前言

前端性能优化：图片.png

图片优化

几种常见的图片格式

几种常见的图片格式的比较和常见的使用场景：

	JPG/JPEG	PNG	GIF	WEBP
是否压缩	有损压缩	无损压缩	位图图形	支持无损压缩和有损压缩
大小		尺寸上比JPG、GIF更大，当然质量更高
优点	色彩丰富	支持透明效果	支持动画	高压缩率，高质量，支持透明效果，动画
缺点	不支持透明效果		只能存储8位颜色索引，色彩复杂、细节丰富的图片不适合	兼容性
使用场景	适合颜色丰富图片，不规则的图形	适合纯色透明线条绘图，图标，边缘清晰、有大块相同的颜色区域	适合动画	适用于网页开发

配置 Webpack

如果使用Webpack打包，可以引入插件，配置config文件，在这一层级对图片的大小进行优化

Webpack 版本: Webpack 5
CompressionPlugin 还有其他的配置选项，这里不一一列举了

//webpack.config.js
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: "gzip",
    }),
  ],
};

响应式优化

CSS实现

对于className=image的类，在屏幕宽度小于600px时，加载的是logo-200.png版本，当屏幕宽度小于2000px，大于600px时，加载的是logo-512.png版本。这样在小屏幕上显示时，可以减少网络加载图片的时间。

@media screen and (max-width: 600px) {
  .image {
    background-image: url('logo-200.png');
    background-repeat: no-repeat, repeat;
  }
}

@media screen and (max-width: 2000px) and (min-width: 601px) {
  .image {
    background-image: url('logo-512.png');
    background-repeat: no-repeat, repeat;
  }
}

JavaScript实现

使用JavaScript实现响应式图片效果

首先获取窗口的宽度和高度，选择要操作的图片元素responsiveImg，根据窗口的宽度和高度确定要加载的图片尺寸，设置图片的src属性。

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window. innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

var imgElement = document querySelector('.responsiveImg');

var imageUrl = '';
if (windowWidth < 600) {
    imageUrl = 'logo200.png';
} else if (windowWidth < 800) {
    imageUrl = 'logo512.png';
} 
imgElement setAttribute('src', imageUrl);

HTML实现

可以使用img标签实现响应式图片效果

方式一： img + srcSet + sizes

srcSet的值使用w的方式，那么srcSet和sizes要同时配置。

以下代码的含义：在屏幕宽度小于500px时，加载logo200.png，在屏幕宽度小于800px时，加载logo512.png

   <img
      srcSet="logo200.png 200w, logo512.png 500w"
      sizes="(max-width: 500px) 200px, (max-width: 800px) 500px"
      src="logo512.png"
      alt="image"
   />

方式二： img + srcSet

srcSet的值使用x的方式，默认的值是1x，x表示DPR (物理像素/逻辑像素)，可以在浏览器devtool里设置。

   <img
      srcSet="logo200.png, logo512.png 2x"
      src="logo512.png"
      alt="image"
   />

另： picture 元素包含零个或多个source 和 img 元素来为不同的显示或设备场景提供图像.

优化用户体验

当页面上有许多的图片时，可以延迟部分图片的加载，给用户显示一个模糊的版本，这样比长时间的让用户等待更友好一些。

图片懒加载

img的loading属性有lazy和eager,使用lazy实现图片懒加载。

值	描述
eager	默认，图像立即加载。
lazy	图像延迟加载，只有鼠标滚动到该图片所在位置才会显示。

<img
    src="logo512.png"
    loading="lazy"
/>

LQIP

LQIP，低质量图像占位符，顾名思义，如果图片的size太大，加载时间太长，那么可以首先加载低质量的图片，然后一步一步的加载高质量的图片。

如下图，先加载原始图片分辨率20%的模糊图1，然后加载原始图片分辨率60%的模糊图2，最后加载原始高清图。这一过程中，确保页面上图片处有图，使用低分辨率换时间，最终展现高清图。

SQIP

SQIP，基于SVG图像的占位符，使用LQIP，有时候太模糊的图片，虽然能够占位，但是看起来对眼睛不大友好。

SQIP，是根据原图生成轮廓图，如下图，最左侧是原图，primitive art列是SQIP生成的效果图之一，生成原图的轮廓，看起来对眼睛友好，有艺术感，而且size也不高。用来实现图片懒加载很适合。

前端性能优化：如何优化页面图片加载？

前言