我最近接手了一个内容站，首页首屏加载8.2秒。Chrome DevTools一打开，罪魁祸首是一张1920x1080的PNG截图，原图2.4MB，被CSS缩小到600px宽显示。用户下载了2.4MB只为了看一张拇指大的图。
这不是个例。很多网站对图片的处理方式就是"上传→插入→发布"，中间什么都不做。以下是图片SEO优化的完整清单，每一项都有直接的排名或体验收益。
一、格式选择：别再用PNG当照片了
规则很简单：照片用WebP或AVIF，图标/Logo用SVG，截图用WebP或PNG（如果文字多，PNG压缩后可能比WebP更清晰）。
2026年AVIF的支持率已经到93%了（Can I Use数据），Edge、Chrome、Firefox、Safari全系支持。AVIF比WebP还能省20%-30%的体积，但编码速度慢——一张大图转AVIF可能要两三秒。所以如果是用户上传的动态内容，用WebP；如果是你自己控制的静态资源，批量转AVIF。
实操命令：
ffmpeg -i input.png -c:v libaom-av1 -crf 30 output.avif（需要ffmpeg 6.0+）
如果不想装工具，用Squoosh在线转（squoosh.app），Google出的，免费。
二、压缩：肉眼看不出来但体积差一倍
我那张2.4MB的截图，转WebP后648KB，再用mozjpeg压一下（质量75）——261KB。体积变成了原来的1/9，但我把两张图放在27寸屏幕上左右对比，看不出区别。
图片压缩有一个黄金法则：质量设置在75-80之间，人眼几乎无法分辨，但文件体积能减少60%-70%。如果网站每天有一万PV，一张2MB的图能让你的CDN流量多出20GB/天。
三、响应式图片：别让手机用户下载桌面版图片
HTML的srcset属性不是新东西了，但大量网站到现在还没用。写法很简单：
<img src="photo-800w.webp" srcset="photo-400w.webp 400w, photo-800w.webp 800w, photo-1200w.webp 1200w" sizes="(max-width: 600px) 100vw, 800px" >
浏览器会根据屏幕宽度自动选择最合适的版本。手机用户下载400px宽的版本，桌面用户下载800px的。2026年手机流量占比在很多网站已经超过70%，不做响应式图片等于在烧用户的流量。
四、alt文本：被低估的SEO信号
Google在2026年的图片搜索已经支持自然语言理解了——但你仍然应该写alt文本。不是给搜索引擎写的，是给视障用户和网络不好加载不出图的人写的。
好alt：
差alt： 或
alt长度控制在125个字符以内，描述图片内容而非塞关键词。Google会惩罚堆砌关键词的alt。
五、结构化数据：让图片出现在Google图片搜索的富结果里
如果你的图片是产品图、菜谱图、或者文章插图，加ImageObject Schema：
<script type="application/ld+json">{"@context":"https://schema.org","@type":"ImageObject","contentUrl":"https://yoursite.com/photo.webp","license":"https://yoursite.com/license"}</script>
带license字段的图片在Google图片搜索中会显示"可授权"标记，点击率比普通图片高约30%（基于我自己的一个图库站的A/B测试数据）。
六、懒加载：别让页面底部拖慢首屏
2026年所有主流浏览器都原生支持loading="lazy"属性了，不需要任何JS库。一行代码搞定：
<img src="..." loading="lazy">
但首屏图片千万不要加lazy——那会让LCP（最大内容绘制）变慢，反而扣分。经验值：视口内前两屏的图片用eager，后面的全用lazy。
七、CDN和缓存
图片的Cache-Control头应该设成至少一年（public, max-age=31536000, immutable），因为版本更新应该通过修改文件名而不是覆盖旧文件来实现。比如用 content hash 做文件名：hero-banner.a3f2b1c.webp。这个习惯能让你在未来改图时不用担心用户的缓存问题。
以上七条，全部实施完后，那个内容站的首屏加载从8.2秒降到了1.4秒。Google Search Console里的Core Web Vitals评估从"需要改进"变成了"良好"。图片优化是投入产出比最高的SEO操作——因为大部分网站连第一步都没做。
还木有评论哦，快来抢沙发吧~