图片是官网的质感来源，也常常是速度的杀手。很多企业陷入两难：压缩狠了显得廉价，不压缩页面又卡。实际上清晰度与体积并不是简单的对立关系——大多数网站慢，是因为在用错误的方式交付图片，而不是因为图片本身太清晰。
按显示尺寸输出，而不是上传原图
最常见的问题是拿相机或设计稿直出的三四千像素原图，在页面上以三百像素的宽度显示。多出来的像素没有任何视觉贡献，却在白白消耗带宽。正确做法是按页面实际显示尺寸的两倍左右输出，兼顾高清屏的观感，同时去掉无用的部分。这一步通常就能把体积减掉相当可观的一部分，而且肉眼几乎看不出画质差异。
选对格式
照片类图像适合用有损压缩的现代格式，在同等观感下体积明显小于传统的 JPG；简单的图标、logo、界面元素适合矢量或无损压缩格式，缩放不失真且体积小。要避免的是用 JPG 存需要透明背景的图，或用位图存本可以矢量的图标——格式选错，再怎么压都吃亏。
响应式：不同屏幕给不同图
同一张图在手机和桌面上的显示尺寸差别很大。如果统一发一张大图，移动端用户就在下载他们根本看不到的细节。提供多个尺寸版本，让浏览器按屏幕宽度选择，移动端就能拿到体积小得多的那一份。这对流量敏感、网络不稳定的移动端访客体验改善明显。
按需加载与优先级
首屏图片应当优先加载，因为它决定用户对「快不快」的第一印象；首屏之外的图片则完全可以等用户滚动到附近再请求。这一项处理得当，页面初始请求量会显著下降。同时给图片标注明确的宽高尺寸，避免加载过程中页面跳动——这种跳动会让访客误点，体验很差。
别忘了替代文本
每张有意义的图片都应当有简明准确的文字描述。它既是图片无法加载时的兜底说明，也是检索系统理解图片内容的依据。装饰性图片可以留空，但承载信息的图片，这段文字本身就是内容的一部分。
小结
图片优化不是一味压缩，而是「在正确的位置、以正确的格式、给正确尺寸的图」。做好尺寸、格式、按需加载这三件事，清晰度和速度可以同时拿到。