帮客户看官网时，最常碰到的一幕是：首页一张轮播大图就有好几兆，是直接从相机里导出来的原图，手机打开要转半天圈。网站本身没什么毛病，就是图片没处理。图片优化听起来像技术活，其实大部分工作在上传之前就能做完，花不了多少时间，回报却很直接。

下面按实际处理顺序讲：先定尺寸，再选格式和压缩，然后是加载方式，最后是很多人忽略的alt文字。

图片优化第一步：按显示位置定尺寸

很多人以为压缩是图片优化的重点，其实尺寸才是第一关。一张图在页面上只显示成 800 像素宽，你上传一张 4000 像素宽的，浏览器照样要把整张下载下来再缩小显示，白白多跑了好几倍的流量。

我们一般这样定：

  • 全屏横幅：宽度按常见电脑屏幕来，1920 像素左右就够了；
  • 正文配图：跟着内容区宽度走，通常几百到一千出头像素；
  • 产品列表缩略图：按卡片大小，再留一点给高清屏的余量；
  • 图标和小装饰：能用矢量图就用矢量图。

有一个坑要提醒：后台如果允许编辑随便传图，过不了半年网站就会被大图塞满。建站的时候最好让程序在上传时自动生成几种尺寸，前台按位置调用合适的那一张，这比靠人自觉靠谱得多。

格式怎么选：JPG、PNG还是WebP

照片类的图，比如车间、产品实拍、团队合影，用 JPG 就行。需要透明背景的图标、Logo，用 PNG。纯线条和图标，SVG 体积小、放大不糊。

WebP 是现在比较推荐的格式，同样清晰度下文件往往比 JPG 和 PNG 小一截，主流浏览器基本都支持。新做的网站，我们会让程序在上传时自动转出 WebP 版本，同时保留原格式给少数老浏览器兜底。老网站要改，也不用一张张手动转，批量处理工具或者服务器端配置都能解决。

格式选错的典型例子：把一张风景照存成 PNG，体积大得离谱，看起来却和 JPG 没区别。这种在产品图里特别常见，检查一遍往往能找出好几张。

压缩到什么程度合适

压缩是图片优化里最容易过头的一步。压得太狠，产品细节糊成一片，客户看不清材质和做工，反而影响询盘。

我们的做法比较朴素：压完放大到实际显示尺寸，自己用眼睛看。产品主图宁可留大一点，保证细节；背景图、装饰图可以压得狠一些，反正没人盯着看。照片导出时顺手把拍摄参数、定位这些附带信息去掉，文件也能小一些。

一个实用判断：单张正文配图如果还有一两兆，基本可以肯定没压过。

懒加载和首屏图片

懒加载的意思是，页面下方还没滚到的图片先不加载，用户往下看了再加载。长页面、产品列表页用上它，首次打开会明显轻快。

不过首屏那张主图别懒加载。它是用户打开页面第一眼看到的东西，延后加载会让页面上方出现一块空白，体验反而更差。另外图片要写好宽高，或者预留好位置，不然图片加载出来时文字会往下跳，用户正要点按钮，结果点到别处去了。

图片alt文字怎么写才有用

alt 文字是给图片写的一段文字说明。搜索引擎看不懂图片画面，主要靠 alt、文件名和图片周围的文字来判断这张图讲什么；视力不好的用户用读屏软件，听到的也是这段文字。所以图片优化不能只管体积，alt 也要认真写。

alt文字的写法

用一句话如实描述画面，顺带把产品名或业务词带进去就行。比如一张产品图，写“不锈钢法兰球阀侧面细节”，比写“产品图1”有用得多。

常见的错误有两种：一是全站图片都不写；二是每张图都塞同一串关键词。后者看着像在做优化，其实是堆砌，搜索引擎并不买账。纯装饰的花边、分割线，alt 留空就好，不用硬写。

文件名也顺手改掉

上传前把“IMG_2023”“微信图片”这类文件名改成有意义的英文或拼音，比如 flange-ball-valve.jpg。这一步几乎不花时间，却经常被跳过。

图片优化做完怎么检查

改完以后用手机流量打开几个主要页面看一看，这是最真实的体验。再用浏览器的开发者工具看一下哪些图片最大，按体积从大到小排查。网站后续每次换图、上新产品，都按同一套规矩来，图片优化才不会白做。如果网站打开慢的原因不止图片，可以结合服务器和代码一起排查。

结论

网站图片优化不复杂，关键是养成习惯：按显示位置定尺寸，照片用 JPG 或 WebP，压缩以看得清细节为准，长页面用懒加载但首屏图除外，每张有内容的图都写一句真实的 alt 文字。新建站时把自动裁切、自动转格式这些功能做进后台，后面运营省心很多。蔚岚科技在做网站建设时会把这些处理规则一起配置好，老网站想做一次图片优化体检，也可以打 18720919319 跟我们聊聊。

常见问题

图片优化会不会让图片变模糊？

方法对就不会。先缩到合适尺寸再适度压缩，肉眼基本看不出差别；只有一味追求体积小、压得过狠才会糊。

网站图片都换成WebP会有兼容问题吗？

主流浏览器都支持 WebP。稳妥的做法是程序同时保留一份 JPG 或 PNG，遇到不支持的老浏览器自动换成原格式显示。

图片alt文字一定要带关键词吗？

不一定。先如实描述画面，自然能带上产品名就带，带不上就算了，别每张图都塞同一个词。

产品图很多，一张张处理太慢怎么办？

可以用批量压缩、批量改尺寸的工具一次处理，或者让网站后台上传时自动处理，以后就不用人工操心了。

图片优化对搜索排名有帮助吗？

有间接帮助。页面打开快、图片描述清楚，用户体验和搜索引擎理解都会更好，还有机会从图片搜索带来访问；但它只是网站优化的一部分，内容质量仍是根本。