如何进行优化图片大小，减少 HTTP 请求数-CSDN博客

本文链接：https://blog.csdn.net/2301_80140433/article/details/147164755

优化图片大小

1. 选择合适的图片格式

JPEG：适用于色彩丰富的照片。它支持不同程度的压缩，在保证一定质量的前提下能大幅减小文件大小。可根据实际需求调整压缩率，一般来说，70% - 80% 的质量就足以满足大多数网页展示需求。
PNG：有 PNG - 8 和 PNG - 24 之分。PNG - 8 适用于颜色较少、有透明效果的图标或简单图形，文件相对较小；PNG - 24 能支持更多颜色和更复杂的透明效果，但文件较大。
WebP：是一种现代的图片格式，它在压缩率和图像质量上都优于 JPEG 和 PNG。大多数现代浏览器都支持 WebP 格式，建议优先使用。

2. 使用图片压缩工具

在线工具：TinyPNG、Compressor.io 等，这些工具操作简单，只需上传图片，就能自动压缩并提供下载。
本地工具：ImageOptim（适用于 macOS）、RIOT（适用于 Windows）等。这些工具可以批量处理图片，提高工作效率。

3. 调整图片尺寸

确保图片的尺寸与在网页上显示的尺寸相匹配。如果图片原始尺寸过大，即使进行了压缩，文件大小仍然可能较大。可以使用图像编辑软件（如 Adobe Photoshop）或代码（如 JavaScript）来调整图片尺寸。

减少 HTTP 请求数

1. 图片精灵（CSS Sprites）

将多个小图标合并成一张大图片，然后通过 CSS 的 background - position 属性来显示不同的图标。这样可以将多个小图标的请求合并为一个请求。
以下是一个简单的示例：

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

<head>
    <meta charset="UTF - 8">
    <style>
      .icon {
            display: inline - block;
            width: 20px;
            height: 20px;
            background - image: url('sprite.png');
        }

      .icon - home {
            background - position: 0 0;
        }

      .icon - search {
            background - position: - 20px 0;
        }
    </style>
</head>

<body>
    <span class="icon icon - home"></span>
    <span class="icon icon - search"></span>
</body>

</html>

2. 内联图片

对于一些非常小的图片（如图标），可以将其转换为 Base64 编码，然后直接嵌入到 HTML 或 CSS 中。这样可以避免额外的 HTTP 请求。

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

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

<body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
        alt="Small Icon">
</body>

</html>

3. 响应式图片

使用 HTML5 的 <picture> 元素或 CSS 的 srcset 属性，根据设备的屏幕尺寸和分辨率，提供不同尺寸的图片。这样可以避免在小屏幕设备上加载过大的图片，同时减少不必要的请求。

<picture>
    <source media="(min - width: 1200px)" srcset="large.jpg">
    <source media="(min - width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive Image">
</picture>

4. 懒加载

对于页面上位于可视区域之外的图片，采用懒加载技术。当图片即将进入可视区域时，再加载图片。这样可以减少初始加载时的 HTTP 请求数，提高首屏加载速度。可以使用第三方库（如 LazyLoad、Intersection Observer API）来实现懒加载。