Tag: 图片尺寸设置

  • WordPress 图片大小: 如何修改和优化图片

    WordPress 图片大小: 如何修改和优化图片

    随着内容竞争的加剧和用户注意力的下降,图片等视觉元素变得比以往更加重要。因此,选择合适的 WordPress 图片尺寸也很重要。

    得益于 WordPress 的灵活性,可以更改默认的图片尺寸,甚至添加自定义图片尺寸。此外,多种图片优化插件让工作更加轻松。

    在本篇文章中,我们看看新手如何修改 WordPress 图片尺寸、如何重新生成缩略图(即将更改的设置应用到之前上传的图片)、图片优化技巧,以及不同图片格式的优缺点。

    图片[1]-361Sale WordPress Care

    WordPress 图片尺寸概览

    每次将图片上传到 WordPress 媒体库时,WordPress 会为该图片生成多种不同的尺寸,例如 700px x 400px。这意味着图片的宽度为 700 像素,高度为 400 像素

    通过这种功能,网站可以根据图片的使用场景显示合适的尺寸,从而提升加载速度和视觉效果。

    这些数字通常被称为图片的“尺寸”。换句话说,图片尺寸越大,像素越多,文件的存储大小也越大

    图片大小也指图片在设备上占用的存储空间,通常以字节表示,例如 100KB(千字节)。

    如果图片文件过大,用户下载图片所需时间会更长,从而降低网站的运行速度。因此,文件大小应保持较低,同时图片尺寸需适当。关于图片优化的更多内容,我们会在后面讨论。

    WordPress 如何处理和管理图片?

    当管理员将图片上传到 WordPress 媒体库时,WordPress 会自动创建多种尺寸的图片版本。上传的原始图片被称为“全尺寸图片”,而 WordPress 会根据预定义的尺寸自动生成额外的版本,例如缩略图、中等尺寸大尺寸

    图片[2]-361Sale WordPress Care

    这些尺寸在 WordPress 设置中定义,并会根据图片在网站上的展示位置(例如文章、画廊或侧边栏)自动使用。

    为什么 WordPress 要这样做?可以理解为 WordPress 确保您的图片在各种场景中都能得到最佳展示,无论是在侧边栏、页脚、文章中,还是页面上。

    例如,一张 100 像素的小图片可能适合用作文章预览,而相同的图片放大到横幅尺寸也可以保持良好的视觉效果。

    WordPress 生成这些不同尺寸的图片,以便满足网站各个区域的常规需求,同时避免图片被过度拉伸或缩小导致失真。

    WordPress 默认图像大小

    WordPress 生成的图像副本是默认的 WordPress 图像大小。可以根据特定的设计需求调整这些尺寸。我们会在本篇博文中学习如何做到这一点:

    • 缩略图(150×150像素):通常用于小图像预览。
    • 中等(300×300 像素):中等尺寸的图像,通常显示在博客文章或页面中。
    • 大尺寸(1024×1024 像素):主要用于特色图片、全宽图片或任何需要较大图片的情况
    • 全尺寸:这是上传的图像的原始尺寸。
    图片[3]-361Sale WordPress Care

    要查看这些选项,请将照片上传到网站页面并点击它。图像大小选项将显示在右侧面板上。

    推荐的 WordPress 图片尺寸

    网站的不同部分有不同的需求,每个区域需要不同的图片尺寸。以下是具体建议:

    图片类型 推荐尺寸 注意事项
    Logo 200 x 100 像素(或更大,取决于设计) 确保 Logo 为高分辨率 PNG 格式,尽量使用透明背景。
    头部/横幅图片 1200 x 600 像素 图片需足够大以填满屏幕宽度,但需优化以防加载速度变慢。
    特色图片(博客文章) 1200 x 628 像素(社交分享用)或 800 x 450 像素 为社交媒体平台的分享进行优化。
    缩略图 150 x 150 像素 用于博客预览、归档页面和小部件中,不需要过大尺寸。
    产品图片(WooCommerce) 主图:800 x 800 像素
    目录缩略图:300 x 300 像素
    画廊缩略图:100 x 100 像素
    产品图片应保持正方形以确保一致性。
    背景图片 1920 x 1080 像素 图片需足够大以覆盖全屏宽度,同时文件大小应控制在 500 KB 以下以提升加载速度。
    社交媒体图片 1200 x 630 像素 优化以便在 Facebook 和 Twitter 等平台分享。

    WordPress 图片优化

    没有必要用超过需求的图片尺寸。

    过大的图片文件会导致网页加载速度变慢,很多访问者没耐心的话,会导致他们离开网站。同时,这也可能对搜索引擎排名产生负面影响。(加载速度也是收录因素之一)

    理想情况下,WordPress 图片大小应控制在 150KB 以下,但对于较大的图片,可以适当容忍更大的文件大小。

    以下是优化 WordPress 图片尺寸时需要注意的一些事项:

    压缩 WordPress 图片

    压缩是通过减少文件大小而不影响图片质量的过程。

    图片[4]-361Sale WordPress Care

    在 WordPress 网站上压缩图片是提升网站速度的有效方法之一。

    可以使用以下几种在线工具来进行压缩:

    • TinyPNG
    • Squoosh
    • Imagify
    • Optimizilla
    • Compressor.io

    通过压缩所有的 JPEG(照片)和 PNG(图形)图片,可以显著提升网站的速度和效率。

    压缩有两种主要类型:有损压缩和无损压缩。

    • 有损压缩:通过去除一些可能看不到的图像数据来大幅减少文件大小。适用于网页图片,但如果压缩过度,会导致图像质量略有下降。
    • 无损压缩:保持图像的质量,同时在有限程度上减少文件大小。如果希望保留尽可能多的图像细节,无损压缩是很有用的。

    插件可以大大帮助进行图片压缩,更多内容将在后面介绍。

    调整图片大小

    调整图片大小是指改变图片的实际尺寸(而非像素大小),包括宽度和高度。

    大尺寸图片占用更多的磁盘空间,并且加载时需要更长的时间,因此需要优化。

    许多主题已经提供了多种图片尺寸,可以从中选择。不过,在上传图片到网站之前,最好还是手动调整其尺寸。

    SEO 优化

    在 WordPress 中进行图片的 SEO 优化对搜索引擎排名和网站性能至关重要。压缩图片是提升加载速度和优化 SEO 的重要步骤。

    优化图片的有效技巧

    在上传图片之前,确保重新命名。不要使用“IMG1425”。应为图片赋予描述性的名称,如“WordPress 图片大小: 如何修改和优化图片.jpg”。

    使用 alt 文本。这对于访客(增强可访问性)和爬虫(帮助理解图片内容并可能提高排名)都很有帮助。

    使用响应式图片,因为它们有助于保持或提升移动端的性能,这可能成为搜索引擎排名的一个因素。

    为特定类型的图片添加 schema 标记,例如产品图片,以改善 SEO。此外,创建图片站点地图,帮助搜索引擎更好地索引网站图片。

    选择合适的图片格式(JPEG、PNG、GIF 等)

    除了调整尺寸,选择合适的图片格式也非常重要。每种图片格式都有其优缺点。

    以下是几种常见格式及其优缺点:

    格式 优点 缺点
    JPEG 高度压缩,适用于颜色较多的图片,广泛支持浏览器和设备 有损压缩会降低质量,不支持透明背景
    PNG 无损压缩保留图片质量,支持透明背景,适用于图形、logo 和需要清晰度的图片 文件大小比 JPEG 大,不适合大尺寸照片,旧版浏览器支持有限
    WebP 优越的压缩效果,支持透明背景,文件大小更小,比 JPEG 和 PNG 更好 旧版浏览器(如 Internet Explorer、旧版 Safari)支持有限,需要更多处理能力进行编码/解码,尚未普遍应用于所有平台

    可以参阅文章《超详细保姆级教程:手把手教你在 WordPress 中实现 WebP 图片转换,加速网站速度》

    WordPress 图片尺寸优化插件

    插件在优化 WordPress 图片尺寸时非常有帮助。有许多易于使用的插件可以满足不同的需求。

    对于压缩和调整尺寸,您可以使用以下插件:

    EWWW Image Optimizer

    图片[5]-361Sale WordPress Care

    EWWW Image Optimizer 是一款流行的图片优化插件,可以自动压缩图片。主要功能包括:

    • 支持无限文件大小
    • 支持 WebP 转换
    • 付费服务可达到 80% 的压缩率
    • 支持 PNG、JPEG、GIF、WebP 和 PDF 文件
    • 评分:5/5(1,725 评价)

    价格:免费或起价 $8/月

    Smush

    图片[6]-361Sale WordPress Care

    Smush 是一款非常适合压缩和调整图片尺寸的插件,拥有超过 100 万次安装,成为非常受欢迎的 WordPress 图片插件。主要功能包括:

    • 延迟加载图片
    • 支持 WebP 转换
    • 提供免费的无损压缩
    • 与 Gutenberg 块集成
    • 评分:5/5(6,000 评价)

    价格:起价 $6/月

    Imagify

    图片[7]-361Sale WordPress Care

    Imagify 是另一款图片优化插件,提供调整大小和压缩功能,同时不会降低图片质量。主要功能包括:

    • 支持转换为 AVIF 和 WebP 格式
    • 移动设备图片优化
    • 批量优化
    • 评分:4.5/5(1,406 评价)

    价格:免费或起价 $4.99/月

    更改 WordPress 默认图片尺寸

    如前所述,WordPress 已经提供了三个默认的图片尺寸。如果默认设置不满足需求,可以进行更改。

    例如:认为默认的缩略图尺寸(150×150)太大,需要调整为更小的尺寸(例如 100×100)。

    下面是更改步骤:

    • 进入 WordPress 管理后台。
    • 在左侧面板中,点击 设置 > 媒体
      图片[8]-361Sale WordPress Care
      • 媒体设置 部分,可以调整每种尺寸的像素。在此示例中,我更改了缩略图尺寸。
      • 点击 保存更改 按钮保存设置。
      图片[9]-361Sale WordPress Care

        注意:现在更改的设置仅适用于新上传的

        如何重新生成缩略图

        不用担心,可以轻松地将新的设置应用到现有的图片。只需使用 Regenerate Thumbnails 插件即可。

        以下是操作步骤:

        • 进入网站 WordPress 管理后台。
        • 在左侧面板中,点击 插件 > 安装插件
        图片[10]-361Sale WordPress Care
        • 搜索 Regenerate Thumbnails 插件。
        • 点击 安装
        • 点击 启用
        图片[11]-361Sale WordPress Care
          • 启用后,返回仪表盘,点击左侧面板中的 工具 > 重新生成缩略图
          图片[12]-361Sale WordPress Care
          • 在这里,点击 重新生成所有缩略图附件,以将所有图片更新为新的设置。
          图片[13]-361Sale WordPress Care

          如何在 WordPress 中添加自定义图片尺寸

          WordPress 提供了三种默认的图片尺寸,但如果需要更多的图片尺寸选项,可以通过编辑 functions.php 文件来添加自定义的图片尺寸。

          下面是操作步骤:

          1. 进入网站 WordPress 管理后台。

          2. 在左侧面板中,点击 外观 > 主题文件编辑器

          图片[14]-361Sale WordPress Care

          3. 在右侧找到 functions.php 文件。

          图片[15]-361Sale WordPress Care

          4. 在 functions.php 文件中,添加一个函数来定义新的图片尺寸,使用 add_image_size()

            例如:

            phpCopy codeadd_image_size('custom-size-name', 800, 600, true); // 800px 宽,600px 高,裁剪

            其中:

            • 'custom-size-name' – 自定义图片尺寸的唯一名称。
            • 800, 600 – 图片的宽度和高度(以像素为单位)。
            • truefalse – 裁剪模式。true 启用硬裁剪(精确尺寸),false 保持原始宽高比(软裁剪)。
            1. 点击 更新文件 按钮以保存文件。
            2. 要在主题中显示自定义图片尺寸,粘贴以下代码:
            phpCopy code<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

            💡 在进行任何更改之前,请备份网站数据!

            1. 将“your-specified-image-size”替换为你在前一步中设置的名称。例如,可以将其更改为 custom-size-name
            图片[16]-361Sale WordPress Care

            常见问题解答

            Q) 在 WordPress 中使用什么尺寸的图片?
            常见尺寸包括:

            • 1200×628 px 用于特色图片
            • 300×300 px 用于缩略图
            • 1024×768 px 用于内容图片

            根据主题需求选择尺寸,并进行优化以加快加载速度。

            Q) 如何调整 WordPress 中的图片尺寸?
            进入 设置 > 媒体 来设置默认尺寸,或者在 媒体库 中单独选择并调整图片尺寸。

            Q) 如何增加 WordPress 中的图片上传大小?
            通过编辑 php.ini 文件、修改 .htaccess 文件,或在主机面板中调整设置来增加上传大小。

            Q) 如何让 WordPress 中的所有图片尺寸一致?
            使用图片编辑插件(例如 Regenerate Thumbnails)或调整自定义 CSS 以确保网站中的图片尺寸一致。