图片通常占据网页总下载量的50%以上，是影响页面加载速度的最大因素。做好图片优化是前端性能优化最有效的手段之一，可以在不明显影响视觉质量的前提下将图片体积减少50%-80%，显著提升页面加载速度，改善用户体验，同时降低服务器带宽成本。
选择合适的图片格式是图片优化的第一步。照片类实景图片优先使用WebP或AVIF格式，相比JPEG体积可以减少30%-50%；图标、logo、插画等需要透明背景的图片优先使用SVG矢量图，或者WebP格式；截图和图形界面图片使用PNG或WebP格式；动画效果使用WebP动图或视频，避免GIF（GIF体积大、画质差）。目前主流浏览器对WebP支持率已经达到98%以上，可以放心使用。
图片压缩是必不可少的环节。即使是正确格式的图片，也可以通过无损或有损压缩进一步减小体积。开发阶段可以使用imagemin、Squoosh等工具对图片进行压缩；生产环境可以接入图片处理服务，通过URL参数动态调整图片尺寸、质量和格式。注意不要直接把相机拍摄的原图或设计师导出的高清图直接放到网页上，一定要根据实际显示尺寸压缩到合适大小。
懒加载和响应式图片也是重要优化手段。只在图片即将进入用户视口时才加载图片（懒加载），首屏以下的图片不优先加载，可以大幅缩短首屏加载时间。使用srcset和picture元素为不同屏幕尺寸和分辨率提供不同大小的图片，避免在小屏幕手机上加载桌面端的大图。合理使用这些技术，可以让网页图片加载做到又快又省。