第五章：图片优化策略-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35094120/article/details/145721231

在网页中，图片往往占据较大的资源比重，对页面加载速度和性能影响显著。合理的图片优化策略，既能保证图片展示效果，又能提升用户体验。本章将从图片格式选择、压缩处理、裁剪技巧以及懒加载等方面展开介绍。

5.1 图片格式的选择与特点

5.1.1 JPEG格式

JPEG（Joint Photographic Experts Group）格式适用于色彩丰富、细节复杂的照片类图像。它采用有损压缩算法，通过丢弃部分人眼不易察觉的图像细节来减小文件大小。在保证图片质量可接受的前提下，JPEG格式能有效压缩文件，节省带宽。例如，旅游网站展示的风景照片，使用JPEG格式既能清晰呈现美景，又能快速加载。但JPEG格式不适合包含透明区域或简单图形的图像，反复压缩可能导致图像出现明显失真。

5.1.2 PNG格式

PNG（Portable Network Graphics）格式分为PNG - 8和PNG - 24。PNG - 8支持索引颜色模式，适合颜色种类较少、简单图形以及需要透明背景的图像，如网站图标、logo等，它采用无损压缩，文件大小相对较小。PNG - 24支持真彩色和透明通道，常用于高质量的图像展示，不过文件体积较大。像电商网站商品详情页的商品图片，若有透明背景需求，PNG格式是较好选择；但对于色彩丰富的大幅商品展示图，使用PNG - 24可能会使加载速度变慢。

5.1.3 WebP格式

WebP是一种新兴的图像格式，由Google开发。它同时支持有损和无损压缩，在同等图像质量下，WebP格式的文件大小比JPEG和PNG更小。WebP还支持动画和透明度，能满足更多场景需求。例如，在一些追求极致性能的移动应用或网页中，使用WebP格式可显著提升加载速度。然而，WebP目前存在浏览器兼容性问题，部分老旧浏览器不支持，使用时需进行兼容性处理。

5.2 图片压缩技巧

5.2.1 在线压缩工具

利用在线压缩工具是一种简单高效的图片压缩方式。如TinyPNG，它能智能分析图像内容，在保证视觉质量的前提下，大幅压缩JPEG和PNG图片。用户只需将图片上传至TinyPNG网站，工具会自动处理并提供下载。以一张500KB的JPEG风景照片为例，经TinyPNG压缩后，文件大小可降至100KB左右，且画质几乎无明显变化。类似的在线工具还有Compressor.io等，它们操作便捷，无需安装软件，适合各种用户。

5.2.2 图像编辑软件压缩

专业图像编辑软件也具备强大的压缩功能。Adobe Photoshop可通过调整图像质量、分辨率等参数来压缩图片。在“存储为”或“导出”选项中，用户可选择不同的压缩级别。例如，对于一张用于网页展示的图片，将分辨率从300dpi降低到72dpi，同时适当降低JPEG质量因子，可在不影响视觉效果的情况下减小文件体积。Sketch、Figma等设计工具也有类似的图片导出和压缩设置，方便设计师在设计过程中优化图片资源。

5.3 图片裁剪与尺寸适配

5.3.1 精准裁剪

根据图片在网页中的实际展示需求进行精准裁剪，去除不必要的部分，能有效减小文件大小。比如电商网站商品展示图，只保留商品主体部分，裁剪掉多余的背景，既突出了商品，又降低了图片文件大小。在图像编辑软件中，使用裁剪工具按照所需比例或尺寸进行裁剪，确保图片在满足展示效果的同时，文件体积最小化。

5.3.2 响应式图片尺寸适配

随着移动设备的多样化，实现图片的响应式尺寸适配至关重要。通过使用标签和 srcset 属性，可根据不同设备屏幕尺寸和分辨率加载合适大小的图片。例如：

<picture>
   <source media="(min - width: 1200px)" srcset="large - image.jpg">
   <source media="(min - width: 768px)" srcset="medium - image.jpg">
   <img src="small - image.jpg" alt="示例图片">
</picture>

这样，大屏幕设备会加载大尺寸图片以保证清晰度，小屏幕设备则加载小尺寸图片，避免加载不必要的大文件，节省带宽，提升加载速度。

5.4 图片懒加载技术

5.4.1 原生HTML懒加载

HTML5为标签新增了 loading=“lazy” 属性，实现原生图片懒加载。例如：

<img src="image.jpg" alt="示例图片" loading="lazy">

当图片即将进入浏览器视口时，才会触发加载，避免页面初始加载时大量图片同时请求，减少资源竞争，加快关键内容的呈现速度。这种方式简单易用，兼容性也在不断提升。

5.4.2 JavaScript实现懒加载

通过JavaScript也能实现图片懒加载，尤其适用于需要更多自定义逻辑的场景。使用IntersectionObserver API，可监听图片元素与视口的相交状态。当图片进入视口一定比例时，动态修改 src 属性加载图片。例如：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF - 8">
</head>

<body>
   <img data - src="image.jpg" alt="示例图片" class="lazy - load">
   <script>
       const lazyImages = document.querySelectorAll('.lazy - load');
       const observer = new IntersectionObserver((entries, observer) => {
           entries.forEach(entry => {
               if (entry.isIntersecting) {
                   const img = entry.target;
                   img.src = img.dataset.src;
                   observer.unobserve(img);
               }
           });
       });
       lazyImages.forEach(image => {
           observer.observe(image);
       });
   </script>
</body>

</html>

这种方法灵活性高，可根据业务需求定制加载时机和逻辑，进一步优化页面性能。