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

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

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

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

图片[1]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

WordPress 图片尺寸概览

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

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

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

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

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

WordPress 如何处理和管理图片?

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

图片[2]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

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

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

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

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

WordPress 默认图像大小

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

  • 缩略图(150×150像素):通常用于小图像预览。
  • 中等(300×300 像素):中等尺寸的图像,通常显示在博客文章或页面中。
  • 大尺寸(1024×1024 像素):主要用于特色图片、全宽图片或任何需要较大图片的情况
  • 全尺寸:这是上传的图像的原始尺寸。
图片[3]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

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

推荐的 WordPress 图片尺寸

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

图片类型推荐尺寸注意事项
Logo200 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]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

在 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]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

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

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

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

Smush

图片[6]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

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

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

价格:起价 $6/月

Imagify

图片[7]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

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

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

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

更改 WordPress 默认图片尺寸

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

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

下面是更改步骤:

  • 进入 WordPress 管理后台。
  • 在左侧面板中,点击 设置 > 媒体
    图片[8]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名
    • 媒体设置 部分,可以调整每种尺寸的像素。在此示例中,我更改了缩略图尺寸。
    • 点击 保存更改 按钮保存设置。
    图片[9]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

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

      如何重新生成缩略图

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

      以下是操作步骤:

      • 进入网站 WordPress 管理后台。
      • 在左侧面板中,点击 插件 > 安装插件
      图片[10]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名
      • 搜索 Regenerate Thumbnails 插件。
      • 点击 安装
      • 点击 启用
      图片[11]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名
        • 启用后,返回仪表盘,点击左侧面板中的 工具 > 重新生成缩略图
        图片[12]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名
        • 在这里,点击 重新生成所有缩略图附件,以将所有图片更新为新的设置。
        图片[13]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

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

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

        下面是操作步骤:

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

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

        图片[14]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

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

        图片[15]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

        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]-如何优化 WordPress 图片尺寸,提高网站速度和SEO排名

          常见问题解答

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

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

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

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

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

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


          联系我们
          文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
          电话:020-2206-9892
          QQ咨询:1025174874
          邮件:info@361sale.com
          工作时间:周一至周五,9:30-18:30,节假日休息
          © 转载声明
          本文作者:Banner1
          THE END
          喜欢就支持一下吧
          点赞82 分享
          评论 抢沙发

          请登录后发表评论

            暂无评论内容