网站图片加载慢怎么办?

SinoClick发表于:2022年09月05日 16:57:55更新于:2023年11月07日 18:46:54

概述

对于网页来说,在所下载的字节数中,图片往往会占很大比例。因此,优化图片通常可以卓有成效地减少字节数和改进性能:浏览器需要下载的字节数越少,对客户端带宽的争用就越少,浏览器下载内容并在屏幕上呈现内容的速度就越快。

解决方案

Imagemin是图像压缩的绝佳选择,因为它支持多种图像格式,并且很容易与构建脚本和构建工具集成。Imagemin可用作CLInpm模块。一般来说,npm模块是最好的选择,因为它提供了更多的配置选项,但如果您想在不接触任何代码的情况下尝试 Imagemin,CLI 是一个不错的选择。

Imagemin是围绕“插件”构建的。插件是压缩特定图像格式的npm包(例如“mozjpeg”压缩 JPEG)。流行的图像格式可能有多个插件可供选择。

选择插件时要考虑的最重要的事项是它是“有损”还是“无损”。在无损压缩中,不会丢失任何数据。有损压缩可减小文件大小,但可能会降低图像质量。如果插件没有提及“有损”还是“无损”,则可以通过其 API 来判断:如果可以指定输出图像的质量,说明它是“有损”的。

对于大多数人来说,有损插件是最好的选择。它们会显著降低文件大小,可以自定义压缩级别来满足需求。下表列出了流行的 Imagemin 插件。这些不是唯一可用的插件,但它们都是您项目的理想选择。


图像格式有损插件无损插件
JPEGimagemin-mozjpegimagemin-jpegtran
PNGimagemin-pngquantimagemin-optipng
GIFimagemin-giflossyimagemin-gifsicle
SVGImagemin-svgo
WebPimagemin-webp