图片优化技术

JS.Huang

已于 2023-07-09 22:32:45 修改

阅读量691

点赞数

CC 4.0 BY-SA版权

分类专栏： Front-End 文章标签：前端 node.js javascript

于 2023-07-09 22:22:51 首次发布

本文链接：https://blog.youkuaiyun.com/Superman_H/article/details/131628453

Front-End 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了DataURL用于嵌入小文件到网页的方法，以及其优缺点。提到了雪碧图技术减少HTTP请求和提高页面加载速度。WebP是一种压缩效率高的图像格式，而Iconfont允许以字体形式使用图标。此外，讨论了渐进式加载和懒加载图片优化技术，以及预加载策略来提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Data URL

Data URL 是一种将小型文件嵌入到网页中的方法。

Data URL 的格式：

data: [<mediatype>][; base64], <data>

<mediatype> 是媒体类型，例如图片可以是 image/png、image/jpeg 等，CSS 可以是 text/css，JavaScript 可以是 application/javascript 等。如果不指定媒体类型，则默认为 text/plain。
base64 是可选的，表示数据使用 Base64 编码。如果数据不是 Base64 编码的，则可以省略此部分。
<data> 是文件内容的数据，可以是文本或二进制数据。如果使用 Base64 编码，则以 Base64 字符串的形式表示。

转换的方法：

使用网上的在线转换工具。
使用 Node.js 脚本：

const fs = require('fs');

// 将图片转换为 base64 编码
const base64Encode = file => {
    const data = fs.readFileSync(file).toString('base64');
    return `data:image/png;base64,${data}`;
};

// 将 base64 编码转换为图片
const base64Decode = (base64Str, file) => {
    const base64 = base64Str.replace(/^data:image\/\w+;base64,/, '');
    const data = Buffer.from(base64, 'base64');
    fs.writeFileSync(file, data);
};

优点：① 能减少 HTTP 请求，从而提高页面加载速度。② 减少文件的数量，便于管理和维护。

通常情况下，Google Chrome 在同一域名下的并发请求数限制为 6 个。超过这个限制的请求将会排队等待。

最大并发请求数限制是浏览器的一种策略，可能会因浏览器版本、网络环境和设备性能等因素而有所不同。此外，浏览器还考虑了其他因素，如每个请求的资源大小、请求类型和服务器响应时间等。

缺点：① 体积会变大，约为原体积的 4/3。② Data URL 不会被浏览器缓存，就是说每次访问页面时都要重新下载 Data URL 中的数据。

雪碧图

雪碧图（Sprite）是一种将多个小图标或图片合并到一张大图中的技术。

使用雪碧图的好处有以下几点：

减少 HTTP 请求：通过将多个小图标合并成一张大图，可以减少网页加载时的 HTTP 请求次数，从而加快页面加载速度。
减小文件大小：合并后的雪碧图可以通过压缩算法进行优化，从而减小文件大小，节省带宽。
提高渲染性能：使用雪碧图可以减少浏览器渲染多个小图标的开销，提高页面的渲染性能。

创建雪碧图的一般步骤如下：

收集需要合并的小图标或图片。
使用图像编辑工具，将这些小图标或图片按照一定的排列方式合并到一张大图中，并保留各个小图标的间隔。
在网页中使用 CSS 将大图作为背景图，并通过调整背景位置来显示需要的小图标。

WebP

WebP 是一种现代的图像格式，由 Google 开发。它使用有损和无损的压缩算法，能够提供更小的文件大小和更快的加载速度，同时保持较高的图像质量。

与传统的 JPEG 和 PNG 图像相比，WebP 图像通常具有更小的文件大小，可以节省带宽和加载时间，从而提供更好的用户体验。

大多数现代浏览器已经原生支持 WebP 格式。对于不支持 WebP 的浏览器，可以通过提供备用的 JPEG 或 PNG 图像作为回退方案。

要创建 WebP 图像，可以使用各种图像处理工具，如 Adobe Photoshop、GIMP、ImageMagick 等，或者使用在线的图像转换工具。选择合适的压缩质量和优化选项，以确保生成高质量且文件大小较小的 WebP 图像。

Iconfont

Iconfont 是一种图标字体，它将一系列矢量图标打包成字体文件。通过使用 Iconfont，我们能以字体的形式使用图标，而不是使用传统的图像文件。这种方法具有以下优点：

矢量化：Iconfont 中的图标是基于矢量图形创建的，因此可以无损缩放和变换而不会失真。这意味着我们可以轻松调整图标的大小和颜色，以适应不同的设计需求。
文件体积小：相比于使用多个图像文件，使用 Iconfont 可以大大减小文件体积。字体文件通常比图像文件更小，因为它们只包含图标的轮廓和描述信息。
灵活性和可定制性：通过 CSS，我们可以轻松地为 Iconfont 应用样式，例如改变颜色、旋转、添加动画等。此外，Iconfont 还支持多色图标和多种图标风格的选择。
兼容性：由于 Iconfont 是基于字体的，因此在大多数现代浏览器中都能够良好地支持。

渐进式加载

渐进式加载是一种优化图片加载的技术，它可以改善页面的加载性能和用户的体验。传统的图片加载方式是一次性将整个图片文件加载完毕后显示在页面上，这可能导致页面加载时间过长，尤其是对于大尺寸的图片来说。而渐进式加载可以在图片加载的过程中逐步显示图片的内容，从而提供更好的用户体验。

渐进式加载的工作原理如下：

首先，浏览器会先加载图像的基本结构和模糊的预览图像，这个预览图像通常是图像的低分辨率版本。
接着，浏览器会逐步加载图像的细节部分，通过不断加载更多的图像数据来提高图像的清晰度。
最终，当整个图像加载完毕后，浏览器会显示完整的高质量图像。

渐进式加载的好处包括：

更好的用户体验：用户可以先看到图像的大致内容，即使在加载过程中还没有完全显示，也能够得到足够的信息。
降低页面的加载压力：通过渐进式加载，可以减少对带宽和服务器的负载，因为浏览器会优先加载图像的低分辨率版本，而不是直接加载完整的高质量图像。

要实现渐进式加载，可以使用多种方法，其中一种常用的方法是将图像保存为渐进式 JPEG（Progressive JPEG）格式。渐进式 JPEG 可以在图像加载过程中逐步显示图像的内容，而不是一次性加载完整的图像。

要创建渐进式 JPEG，通常可以使用图像编辑软件或在线工具来保存图像。在保存图像时，选择渐进式（progressive）选项，软件会将图像以渐进的方式进行编码，并生成渐进式 JPEG 格式的图像文件。渐进式 JPEG 与普通的基线（baseline）JPEG 文件格式兼容，因此可以在任何支持 JPEG 格式的设备和浏览器上使用。

懒加载

图片的懒加载是一种延迟加载图片的技术，它可以优化网页的加载性能和用户体验。懒加载意味着在页面加载时不会立即加载所有的图片，而是根据需要动态加载图片。

传统的图片加载方式是在页面加载时一次性加载所有的图片，无论它们是否在可视区域内。这会导致页面加载时间延长，并且消耗用户的带宽和资源。

<img
    class="lazy"
    data-src="path/to/your/image.jpg"
    alt="Image"
    width="500"
    height="300"
/>

.lazy {
    opacity: 0; /* 初始时设置透明度为0 */
    transition: opacity 0.3s ease-in; /* 添加过渡效果 */
}

.lazy.loaded {
    opacity: 1; /* 图片加载完成后设置透明度为1 */
}

function lazyLoad(images) {
    // 创建一个观察器
    const observer = new IntersectionObserver((entries, observer) => {
        // 遍历所有被观察的元素
        entries.forEach(entry => {
            // 如果被观察的元素进入了视口
            if (entry.isIntersecting) {
                const image = entry.target; // 获取该元素
                if (image.getAttribute('data-src')) {
                    image.src = image.getAttribute('data-src'); // 加载真实的图片
                    image.removeAttribute('data-src'); // 移除 data-src 属性
                    observer.unobserve(image); // 停止观察已加载的图片
                }
            }
        });
    });

    // 开始观察图片
    images.forEach(image => {
        observer.observe(image);
    });
}

// 在初始的 HTML 文档被加载、解析完之后被触发
document.addEventListener('DOMContentLoaded', () => {
    // 获取所有需要懒加载的图片
    const lazyImages = document.querySelectorAll('.lazy');
    // 开始懒加载
    lazyLoad(lazyImages);
});

预加载

图片的预加载是一种优化技术，用于提前加载网页中需要显示的图片资源，以改善用户体验和加快网页加载速度。预加载可以确保图片在需要使用时已经被完全加载，减少用户等待时间和防止图片闪烁。

以下是常见的图片预加载技术：

JavaScript 预加载：使用 JavaScript 创建 Image 对象，设置图片的 src 属性来触发图片的加载。可以通过监听 load 事件来判断图片是否加载完成。

const image = new Image();
image.src = 'image.jpg';

image.onload = function () {
    // 图片加载完成后的处理逻辑
};

隐藏图片预加载：在页面中提前插入 <img> 元素，并使用 CSS 将其隐藏，例如设置 display: none; 或将其移出可视区域。这样浏览器会在后台加载图片，将其缓存起来，准备好显示时可以立即使用。

<img src="image.jpg" style="display: none;" />

CSS 背景图预加载：通过 CSS 的 background-image 属性设置图片的背景图，将其路径引用在样式表中。当浏览器加载样式表时，会自动预加载背景图片。

.element {
    background-image: url('image.jpg');
}