五龙潭做摄影作品集的李老师，网站首页有一百多张高清摄影作品。'每张图片都是我精心挑选的舍不得压缩'——但结果是首页加载要十几秒，访客等不及全跑了。这是个经典的两难——摄影师想要展示高质量的图片但用户没有耐心等待大图加载。解决思路是：原始高清图保留在服务器上供用户点击查看详情时使用，列表页和首页用优化过的缩略图。这样既保证了视觉效果又不牺牲加载速度。
具体技术手段有几种。响应式图片（srcset属性）——根据用户屏幕尺寸自动选择合适大小的图片（手机端不需要看2400像素宽的图）。渐进式JPEG——图片从模糊逐渐变清晰（用户感知速度更快）。懒加载——首屏以下的图片等用户滚动到附近再开始加载。WebP格式——比JPEG小25%-35%且视觉质量相当。这四种组合使用效果最好。李老师在汉峪金谷用了这套方案后首页加载从12秒降到了2.5秒。
各种图片格式的对比
目前web常用的图片格式各有优劣。JPEG——最适合照片类图像，压缩率高但有损压缩。PNG——适合需要透明背景的图片但文件通常很大。WebP——Google推出的新一代格式，比JPEG小25%-35%比PNG小26%以上，现代浏览器全面支持（IE除外但IE已经死了）。AVIF——更新的格式压缩率比WebP还高但目前浏览器支持还不够普及（可以作为增强方案配合fallback使用）。
我的建议是：主格式用WebP，给不支持WebPIE浏览器准备JPEG fallback（用标签实现）。李老师的网站改造后图片总体积减少了65%——从原来的800MB降到了280MB（指全部图片的总和），而视觉质量几乎没有下降。经十路如果你也在运营图片密集型网站，WebP格式转换是第一步要做的事。
自动化图片优化方案
手动一张张压缩在图片少的时候还行，一旦图片数量上百就必须自动化了。推荐几个方案：如果你用的是WordPress——WP Smush / ShortPixel Image Optimizer 这类插件可以自动压缩所有上传的图片。如果你用的是自定义网站——可以在上传逻辑里集成ImageMagick或Sharp（Node.js）做自动处理。如果你用的是云存储（阿里云OSS/腾讯COS/AWS S3）——它们都有内置的图片处理接口可以在URL层面实时转换格式和尺寸。
李老师最终选了阿里云OSS的方案——原始高清图上传到OSS后通过URL参数自动生成各种尺寸和格式的缩略图（?x-oss-process=image/resize,w_800/format,webp）。这样他只需要维护一套原始图片，所有优化工作由OSS在云端自动完成。这套方案的额外成本几乎为零（OSS的图片处理按次数收费但前几个月每月有免费额度）。四门塔的图片重度用户强烈推荐这个方案。
总结
图片优化不需要在质量和速度之间做取舍——现代技术可以让你两者兼得。