WP Adminify's营销网站上发货的单次最大性能胜利是n't缓存插件或CDN调整它正在删除一个图像我们的老英雄是一个2,400px的PNG截图I'd导出在"全质量"因为我顽固地认为PNG意味着清脆,那个文件是1.4 MB,在4G以上的中端Android上,它是最大的内容绘画元素- 它拖动LCP到大约4.1秒,我把它换成了84 KB 网络P at 实际显示宽度和LCP下降到1.9s以下 当天下午 没有代码 只是一个较小的图片。
That's图像SEO令人沮丧的事情。It's不具有异国情调。图像通常是页面上最重的东西 - 通常接近总字节的一半 - 然而我们大多数人将其视为事后想法。我们将相机-原件放入CMS中,键入"屏幕截图"进入alt字段,然后继续前进。然后我们想知道为什么 核心网络活力 搜索控制台的报告在移动设备上流血。
本指南是我实际在 toolz。dev 和客户端网站上运行的清单,是从运送这些东西的人的角度编写的。 I'将诚实地介绍免费工具的作用以及 - 同样重要 - 他们不知道什么't。上的每个图像工具 Toolz.dev 完全在浏览器中运行 <canvas>所以你掉进来的东西都不会上传到任何地方。这对你的工作流程产生了真正的影响,有些是好的,一个令人讨厌的。我们'将两者兼而有之。
TL;博士: Resize 图像到它的真实显示宽度 先压缩, 然后服务于现代格式 实践中 that's 三遍: 图像调整大小 要切割像素尺寸, 图片压缩 挤压字节,并且 格式转换器 要获取 WebP。添加
width/height属性来停止布局转移,写出人类会大声说出的替代文本,并懒惰地加载折叠以下的任何内容。这样做,您的 LCP 和 CLS 都会得到改进 - 谷歌实际上排名的两个图像驱动的核心网络生命值。
SEO来说,为什么图像如此重要?
3个核心Web Vital中有2个是伪装的图像问题,最大的内容画图是,在大多数内容页面上,英雄图像完成其下载累积布局Shift通常是一个图像加载较晚,并将文本推下行,两者都是确认的排名输入,并且两者都是您通过更好地处理图像来修复的东西 - 而不是通过编写更多内容。
There's第二个流量渠道人们忘记了:谷歌图片对于很多电子商务,食谱,旅行和设计网站来说,图片搜索是有机访问的一个有意义的部分,有时是其中的五分之一,那个流量完全取决于爬虫可以读取的东西 - 文件名,alt文本,周围的副本,以及图像是否甚至小到足以及时被索引。
然后是's 无聊但真实的:带宽需要金钱和耐心。一个发送 3 MB 图像的页面会在移动用户看到您的标题之前在计量连接上弹跳。更快的页面可以让人们呆在身边,而参与度,无论谷歌衡量它,都不会't 受伤。
您实际应该使用什么图像格式?
格式选择是大多数储蓄的所在地,规则比格式战争让它们听起来更简单。
JPEG is for photographs - 任何具有平滑梯度和数千种颜色的东西。it's lossy,这正是您想要的照片。在质量75 v85下,压缩对于普通查看器来说是不可见的,文件是原始文件的一小部分。Don't将其用于任何具有硬边,文本或透明度的东西。
巴布亚新几内亚 是无损的,将其用于截图,徽标,图表以及任何具有平坦颜色区域或透明度的东西,捕获:对于照片,PNG产生一个滑稽的大文件相比JPEG我1.4 MB英雄错误正是这个 - 一个照片般的截图被迫进入PNG。
网络P 是2026年的实际默认值,它既有损又无损,支持透明度和动画,通常在匹配质量下比JPEG小25。浏览器支持现在是通用的。这是我几乎将所有内容转换为的格式。
阿维夫 compresses 甚至更难 - 往往比 WebP 有意义地更小 - 因为它's 建立在 AV1 视频编解码器之上。它's 是一种很棒的格式。但我必须在这里和你保持直截了当,因为很多指南(包括本文替换的草稿)告诉你用在线工具"转换为AVIF"即可,而那's 不是浏览器画布编码的工作原理。
SVG is for vectors: 图标, 标志, 简易插图无限缩放, 保持微小, 照片没用 's。
AVIF 警告无人提及
这里's诚实的一点。工具z。dev's 格式转换器 出口 PNG、JPEG 或 WebP-而且只有那三个。它可以't输出AVIF,大多数浏览器内转换器也不能。原因是技术性的:工具将你的图像画到一个 <canvas> 和电话 canvas.toBlob('image/webp', quality)。浏览器's画布编码器运送JPEG、PNG、WebP;它不运送AVIF编码器。所以没有办法把一个AVIF从画布中挤出来,句号。
你仍然可以 饲料 AVIF 文件 - 浏览器通过以下方式愉快地解码 AVIF new Image()因此,AVIF 插入式可以渲染到画布上,您只需't 取出一个即可。它's 解码、编码不对称,它会不断地绊倒人们。
所以我的现实建议:使用 WebP 步骤的格式转换器,该步骤涵盖了 95% 的胜利。如果您想要 AVIF 放在上面,请在构建管道中生成它 sharp、 avifenc的,或者 Squoosh's 离线编码器 - 无论如何,AVIF 属于那个's,因为它的编码很慢,你不'不想为每个图像手工完成。
| 格式 | 最好的 | 有损? | Toolz.dev 转换器可以输出它吗? |
|---|---|---|---|
| JPEG | 照片 | 是的 | 是的 |
| 巴布亚新几内亚 | 屏幕截图、徽标、透明度 | 否 | 是的 |
| 网络P | Web上几乎所有东西 | 两者 | 是的 |
| 阿维夫 | 重图像上的最大压缩 | 是的 | 不 - 使用构建工具 |
| SVG | 图标、徽标、矢量艺术 | 不适用 | 否(向量,不是画布) |
如何压缩图像而不破坏质量?
800px显示的4000px图像,我看到的最多的错误就是按错误的顺序压缩错误的东西,压缩一个4000px的图像就像真空密封一个你永远不需要包装的行李箱,先调整大小,再压缩,总是。
所以工作流程是:打开 图像调整大小、将宽度设置为图像实际渲染的最大尺寸(检查您的布局 - 博客正文图像通常是 720 over800px,而不是 1920),调整器适合您的目标框内,绝不会拉伸或裁剪,因此纵横比是安全的,然后将该输出带入 图片压缩 并降低质量,直到你几乎看不出来 - 通常照片为 78 vy82。在提交之前以完全缩放方式预览;工件隐藏在渐变和肤色中,而不是缩略图中。
1个数字锚定:对于摄影内容,质量80是无聊,可靠的答案I've A/B'd 80对90在真实产品拍摄和,在100%放大在一个好的显示器上,大多数人可以't调用它。但80往往是40%小,在60左右以下你开始在光滑的区域看到块状的文物,所以's地板除了一个微小的缩略图。
两个浏览器陷阱会让你感到困惑
这两者都花费了我真正的调试时间,所以免费学习它们。
透明 PNG → JPEG 将背景变成黑色,而不是白色。 JPEG 曾经转换过一个透明的标志,透明的区域出来了纯黑色,我假设工具坏了,花了二十分钟盯着它's 不是一个错误-it's HTML 规格 当你将画布序列化为没有 alpha 通道(JPEG)的格式时,透明像素会合成到纯黑色上,如果你需要透明,保留 PNG 或使用支持 alpha 的 WebP,如果你特别想要白色背景,请先放一层白色。
每个重新编码条都包含 EXIF 和 GPS 元数据。 因为这些工具将图像重新绘制到新的画布上,所以输出没有 EXIF、没有相机信息、没有嵌入的 GPS 坐标。那's 真正的隐私胜利 - 你're 并不是不小心将手机的纬度/经度印在照片中。但是它's 也是一个 gotcha,如果你依赖嵌入的颜色配置文件或版权元数据;那些也去。对于 SEO 来说,这并不重要't 很重要,但知道它's 发生了。
响应式图像和 srcset 如何工作?
390px宽的手机渲染图像,发货一个1920px的文件会浪费你刚才仔细压缩的大部分字节。 srcset 通过向浏览器递送大小菜单并让其选择来修复这个问题。
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Matte-black wireless headphones on a walnut desk"
width="800" height="600" loading="lazy" />
要制作这三个文件,请运行相同的源 图像调整大小 400、800、1200px时,然后将每个转换为webp。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。x。 sizes attribute 是人们跳过的部分,跳过它会悄悄地打破整个事情 - 没有它,浏览器假设图像填充视口并抓住最大的候选者,告诉它图像真正渲染的宽度,它下载正确的。
如何编写真正有帮助的替代文本?
Alt文本是图像SEO的另一半和它's一半的开发人员匆忙。它同时做三个工作:它's屏幕阅读器向盲人用户大声朗读的内容,它's爬虫如何理解图像显示的内容,它's如果图像加载失败的后备文本。正确大多数是像人一样写作,而不是关键字机器人。
我使用的规则:按照你和#39;d在电话中向某人描述的方式描述图像。具体、自然、简短 - 大约 125 个字符以下,因此屏幕阅读器不会't 尴尬地截断它。跳过""的图像;或"的照片,"因为屏幕阅读器已经宣布它's 的图像;用这些引导会浪费听众's 的时间。如果您的目标关键字真正适合图片,自然地包含一次。如果不适合't,请将其排除在外 - 键盘照片不适合't 需要"购买廉价的无线耳机"卡入其替代品。
I've 真正的评论中的几个前后:
alt="image"→alt="Matte-black wireless headphones on a walnut desk"alt="chart"→alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"alt="best cheap headphones buy now free shipping sale"(关键字填充)→alt="Over-ear headphones with the carrying case open beside them"
人们会犯错误的一个细微差别:纯粹的装饰图像--分隔符、背景繁荣--应该有一个 空 alt=""的, 不是描述。空的alt告诉屏幕阅读器完全跳过, 这正是你想要的装饰。为携带信息的图像保留真实的alt文本。
当你'阅读它时,也描述性地命名该文件。 wireless-headphones-matte-black.webp 节拍 IMG_4532.jpg 因为搜索引擎将文件名读取为信号,而连字符(不是下划线)是 Google 在单词中断时解析的分隔符。
这实际上对 Core Web Vitals 改变了多少?
LCP(最大内容涂料): 你的英雄通常是 LCP 元素。在正确的维度、WebP 中、质量 ~80 以及 - 关键 - 做 不是 lazy-load it。懒加载折叠以上英雄是经典的自我;它延迟了LCP正在测量的确切元素,如果它's英雄, <link rel="preload" as="image"> 相反。
CLS(累积布局移位): 总是放 width 並 height 上 <img>。那两个属性让浏览器在图片到达之前预留空间,所以文本不't加载时跳转,这是那里最便宜的单cls修复,我仍然发现缺少它的站点。
INP(与下一幅画的交互): images don't直接驱动INP,但一个页面在3 MB未优化的图片上窒息,正在使主线程和您的JavaScript需要响应的容量的网络挨饿。更轻的图像,更快捷的交互,间接。
I've学到的几件事 讨厌的方式
Audit 之后再优化 通过PageSpeed Insights运行页面, 先修复最重的文件- 1.2 MB的违规者比从图标上剃掉4 KB更重要 像人类一样命名文件: wireless-headphones-matte-black.webp 节拍 IMG_4532.jpg in image search 因为爬虫把文件名当成内容信号读取,写alt文字你'd居然在电话里对某人说描述照片-具体、自然、关键字-包含 只有在合适的地方,永远不要塞满关键字。不要'忘记你 打开图表 分享图片;您制作的尺寸正确的 1200×630 图像调整大小 是社交预览中出现的内容,有时,搜索。
常见问题
SEO排名,图像优化真的会影响吗?
是的,通过 Core Web Vitals。 LCP 和 CLS 是 Google 排名信号的确认,并且两者都是重图像驱动的。优化的图像通常会使移动页面速度得分显着提高,并且在移动设备上可以转化为排名移动。它还可以解锁 Google Images 作为单独的流量源。
我可以使用免费的在线工具将图像转换为 AVIF 吗?
通常不会,并且 toolz。dev's 格式转换器可以't。浏览器内转换器绘制到 a <canvas>,而浏览器's画布编码器只输出JPEG、PNG和WebP - 那里's没有可供其使用的AVIF编码器。在线转换为WebP以获得大部分胜利,并在您的构建管道中生成AVIF,如果您需要的话可以使用锐器或avifenc等工具。
2026年我应该使用WebP还是AVIF?
WebP是安全的默认值,也是我首先达到的目标- 通用支持,节省大量,你可以在浏览器中制作。AVIF压缩得更难,值得为大型英雄和图库图像添加,但在构建时生成并通过以下方式服务 <picture> 具有 WebP 后备功能。
我应该将 JPEG 和 WebP 压缩到什么质量设置?
Quality 80是照片的可靠答案,它's通常在正常观看时与原版无法区分,同时要显著缩小,在提交前以100%缩放预览,由于工件以渐变和肤色显示在60以下,压缩变得可见。
为什么我的透明 PNG 转换为 JPEG 后会变黑?
JPEG因为没有alpha通道,HTML画布规格说透明像素在你序列化为非alpha格式时被合成到纯黑色上,它's预期的行为,而不是错误。将图像保留为PNG或WebP以保持透明度,或者如果您想要白色,请先将其合成到白色背景上。
这些工具是否将我的图像上传到服务器?
No。toolz。dev 上的图像工具在浏览器中的画布上本地处理所有内容 - 文件永远不会离开您的设备。一个值得了解的副作用:每个重新编码条 EXIF 和 GPS 元数据,这对隐私有利,但意味着嵌入的相机数据和颜色配置文件也被丢弃。
What's 网页映像理想的文件大小?
为粗略的目标:在 ~ 200 KB 下的英雄图片,在 ~ 100 KB 下的内容中的图片,在 ~ 30 KB 下的缩略图,这些都是非常可实现的,一旦你调整到真实的显示宽度,并服务于 WebP 的确切数字,这比调整大小然后压缩然后转换的习惯更重要。
相关阅读和工具:
- 图片压缩- 调整大小后剪切文件大小
- 图像调整大小- 制作响应尺寸和社交图像
- 格式转换器- 导出 PNG、JPEG 或 WebP
- 开发者's图像工具指南
- 图像压缩解释
