前端面试中常见的图片优化问题是什么？

图片优化常见问题及解决方案全解析

---

在前端开发领域，图片优化是提升网页性能、改善用户体验的关键环节，也是前端面试中高频出现的技术话题。前端面试中常见的图片优化问题主要包括：图片格式的选择、图片压缩策略、懒加载与预加载的实现、响应式图片处理，以及图片加载失败的处理机制，下面将逐一解析这些问题,并提供实用的解决方案。

图片格式的选择：何时使用JPEG、PNG、WebP或AVIF？

• JPEG：适合色彩丰富的照片类图像，支持有损压缩，文件体积较小,但压缩过度会导致图像质量下降。
• PNG：分为PNG-8和PNG-24，支持透明背景，适合需要高保真或透明效果的图标、logo等,文件体积通常大于JPEG。
• WebP：谷歌推出的现代图片格式，同时支持有损和无损压缩，能在保持较高图像质量的同时显著减小文件大小,是JPEG和PNG的理想替代品。
• AVIF：基于AV1视频编码的新一代图片格式，提供更优的压缩效率,但浏览器兼容性尚在完善中。

解决方案：根据图像内容和目标用户的浏览器支持情况，优先选择WebP，对于需要兼容旧浏览器的场景，可采用JPEG/PNG作为备选，并利用<picture>元素实现格式回退。

图片压缩策略：如何平衡质量与体积？

图片压缩是减少HTTP请求大小、加快页面加载速度的有效手段,关键在于找到质量与体积的最佳平衡点。

解决方案：

• 使用工具如TinyPNG、ImageOptim进行手动压缩。
• 在构建流程中集成自动化压缩工具，如Webpack的image-webpack-loader。
• 对于动态内容，考虑在服务端实施压缩策略,根据用户设备网络状况动态调整压缩率。

懒加载与预加载：如何提升用户体验？

• 懒加载：延迟加载非首屏可见区域内的图片，减少初始页面加载时间，提升用户体验，可通过Intersection Observer API实现。
• 预加载：对于关键路径上的图片，提前加载以减少用户等待时间，如使用<link rel="preload">或JavaScript的new Image().src方法。

解决方案：结合项目实际需求，合理运用懒加载和预加载技术,优化资源加载顺序。

响应式图片处理：如何适应不同屏幕尺寸？

响应式设计要求图片能根据设备屏幕大小自动调整尺寸和分辨率,避免不必要的带宽消耗。

解决方案：

• 使用srcset和sizes属性,为不同分辨率的设备提供合适的图片源。
• 利用CSS的object-fit属性控制图片在容器内的显示方式,保持比例或填充容器。

图片加载失败的处理：如何提升健壮性？

图片加载可能因网络问题、路径错误等原因失败,良好的错误处理机制能提升应用的健壮性。

解决方案：

• 使用<img>元素的onerror事件,加载失败时替换为默认图片或显示错误提示。
• 采用服务端监控,及时发现并修复图片链接问题。