图片是网站的重要组成部分。图片会影响此页面的美丽和质量。简而言之，图片在网站构造中的作用是吸引用户，突出网站样式，美化网站并简化网站页面。因此，网站上扮演的角色不少于软文本，有些甚至比软文本具有更好的效果。但是，对图片的不合理使用可能会影响页面的开放速度和用户的正常浏览。优化网站时，您可以从图片的方面开始。
JPEG（联合摄影专家小组）是JPEG标准的产物。该标准由国际标准化组织（ISO）制定，是连续颜色静态图像的压缩标准。JPEG格式是最常用的图像文件格式，后缀为.jpg或.jpeg。
优点和缺点适合具有丰富颜色，颜色图片，大型聚焦图片，传递横幅图片，不规则图片等的图片。
不适合行图形，文本/图片图形等。
PNG是使用非破坏性压缩算法的位图格式。它的设计目的是尝试替换GIF和TIFF文件格式，同时添加GIF文件格式没有的特征。PNG使用LZ77的非毁灭性数据压缩算法。它通常用于Java程序，网页或S60程序中。原因是它具有较高的压缩率，并且文件量较小。
PNG格式有三种形式：8、24-位和32位，其中8位PNG支持两种不同的透明形式（索引透明度和alpha透明）。24-bit PNG不支持透明度。32 -bit PNG根据24位。8位透明通道，因此可以显示256级透明度。
PNG8和PNG24背后的数字是可以索引和存储此PNG格式的颜色值。8代表2的第8侧，即256种颜色，而24个颜色约为1600万颜色24。
优点和缺点适合纯色，透明，线图，图标和透明边缘，并且颜色很大，颜色很小，但需要半透明。
它不适合图片大且图片很大的场景，也不适合图片特别大的场景。
SVG是一种图形文件格式，称为完整英语的可伸缩矢量图形，这意味着易于的矢量图形。从表面上讲，它应该是一种开放的标准矢量图形语言，可让您设计令人兴奋的高分辨率Web图形页面。用户可以直接使用代码来描绘图像。您可以使用任何文本处理工具打开SVG图像。通过更改一些代码以使图像具有交互函数，并且可以随时将其插入HTML中以通过浏览器观看。
优点和缺点IE8和IE浏览器的早期版本，如果您想在页面上显示SVG图片，则需要安装SVGVIEW插件-in。
适用于高分辨率打印图片，设计动画，演示等。
它不适合具有较高渲染速度的网站，也不适合特别大图片的场景。
GIF是一个位置。位图的一般原理是：图片由许多像素组成，每个像素都用颜色指定。这些像素由图片组成。gif使用lempel-zev-welch（lzw）压缩算法，该算法最多支持256种颜色。为此特征，GIF更适合具有较少颜色的图片，例如卡通形状，公司徽标，公司徽标，公司徽标，依此类推。如果您遇到需要使用的场合，则GIF的表达受到限制。GIF通常带有带有各种颜色的调色板，需要使用。图像将显着影响下载速度，因此我们可以根据GIF频段颜色板的特征来优化着色板，从而降低图像的颜色数（图像中未使用某些图像来释放颜色）而不是影响图片的质量。
优点和缺点适合动画和图标。
不适合存储颜色图片。
WebP是一种图片文件格式，可提供压缩和无损压缩的损失（可逆压缩）。webP支持的最大像素数为16383x16383。受损的压缩WebP仅支持8位YUV 4：2：0格式支持VP8L支持VP8L编码和8位ARGB颜色空间具有无损压缩（可逆压缩）。它是损坏还是有损耗的压缩，它支持Alpha透明通道，ICC颜色配置和XMP解释数据。
WebP有两种模式：静态和动态。DYNAMICWEBP（动画WebP）支持损失和无损压缩，ICC颜色配置，XMP解释数据，Alpha透明通道。
优点和缺点适合图形和半透明图像。
不适合256种颜色，不适合彩色图片，不适合彩色图片。
压缩PNG：节点pngquant-native工具，跨平台，高压缩比，压缩PNG24非常好。
节点pngquant-native
测试源代码
压缩值约为50％。
压缩JPG：JPEGTRAN交叉平台，带有Linux，Mac，Windows解决方案。
jpegtran
压缩值约为15％。
压缩GIF：gif：gifsicle通过更改每个帧的比例来减少GIF的大小，它可以将多个GIF合并为GIF动画。将动画分解为其组件帧；更改动画中的单个框架；打开并关闭间隔扫描；提高透明度；将延迟，处理和循环添加到动画中；添加并删除注释；翻转和旋转；优化空间动画；更改图像的颜色图；和其他东西。
gifsicle主页
gifsicle github
压缩值约为30％。
在不同的网络环境中，加载不同的尺寸和像素。总体上，图片的大小通过图片URL的参数更改。
根据用户的设备和用法方案提供适当的图片。对于开发人员，无法预见用户使用的浏览器的所有设置。只有当浏览器打开并渲染时，才会知道其设备的特定情况（屏幕尺寸，能力，大小等）。对于这些请求，开发人员通常会准备不同版本的图片，例如：大型，中等，中等，不同的不同版本的不同屏幕和分辨率的图片。选择最合适的视图尺寸通常可以减少图片的大小并使图片负载更快。
SRCSET开关分辨率
测试源代码
注意：在Chrome中进行测试时，缓存是通过以下方式禁用的：打开DevTools并选择设置> prefaces> network。
SRC属性是我们非常熟悉的属性，其中有两个功能：
SRCSET属性（在浏览器支持的条件下），让浏览器决定通过逗号分割图片的描述制作哪个图片。
但是不幸的是，这篇文章会带来一些问题，例如375像素1倍，900像素1.25X是相同的图片，这不是我们想要的结果。
SRCSET＆尺寸关节开关
测试源代码
使用SRCSET和大小信息来选择对规定条件的最大符合性。
我测试计算机的DPR = 2;
图1
图II
图3
注意：尺寸属性只是浏览器的提示，并且不能保证浏览器会遵守。因此，我们无法确定显示哪个图像，因为每个浏览器都与基于我们提供的信息不同。SRCSET和尺寸列表是浏览器的建议，而不是指令。例如，设备像素比（DPR）的设备为1.5，您也可以使用1倍或2X图像。浏览器根据其能力，网络和其他因素确定。
图片元素HTML元素通过包含零或多个元素和一个元素为不同的显示/设备方案提供图像版本。浏览器将选择最匹配的子元素。如果没有匹配，请选择元素的SRC属性中的URL。然后将所选图像显示在元素占据的空间中。
要确定加载哪个URL，用户代理检查每个SRCSET，媒体和类型属性以选择最匹配的页面的当前布局和显示设备功能的兼容图像。
媒体属性媒体属性使您可以为用户代理提供媒体条件作为选择元素的基础（类似于媒体查询）。如果此媒体条件与结果相匹配，则将跳过此元素。
类型属性类型属性允许您为元素的SRCSET属性的资源指向指定MIME类型。如果用户代理不支持指定类型，则将跳过此元素。
SRCSET属性与以前的角色相同，因此我不会在此处详细介绍。
如果要显示高DPI（视网膜）的更高像素密度的图像版本，请在元素上使用SRCSET。这允许浏览器在经济中选择低像素密度版本，并且不需要您编写清晰的媒体条件。
无论如何，您之前必须正确提供元素及其SRC和Alt属性，否则将没有图片显示。当未返回媒体条件时，它提供了图片；如果浏览器不支持元素，则可以用作储备计划。
不建议使用CSS或JavaScript执行响应图片的效果？当浏览器开始加载页面时，它将在页面的CSS和JavaScript和页面的JavaScript之前下载（预加载）。这是一种非常有用的技术，该技术平均减少了页面加载时间的20％。但是，这无助于响应图片，因此有必要实现SRCSET的实现方法。因为您不能先加载元素，然后使用JavaScript来检测窗口的宽度。如果您觉得大小不合适，则可以动态加载加载图片的小图片更换。在这种情况下，原始图像已加载。原始图像已被加载。然后您再次加载了小图像。这种方法对响应图像的概念不利。
当图片仍在加载时，通常需要图片来填写页面的预览。目前，经常使用图片占据的符号，例如：tmall和jd.com使用DIV充当图片加载中的位置。
我们还可以使用JS动态修改IMG SRC以实现占用的效果。
LQIP：低质量的图像占位持有人会根据原始图片自动生成一个超小尺寸的收缩图。
注意：LQIP仅支持“ JPEG”，“ JPG”，“ PNG”
使用生成的base64填充SRC，但是我们不得手动使用LQIP生成base64来填充每张图片的IMG，因此效率太慢。通过LQIP-LOADER在JS软件包中生成base64。
LQIP-Loader
对于Base64，为了节省内存并改善GPU性能，浏览器（包括61.0.3163.38起的Chrome）现在将显示一个稍微清晰或基于像素的基本64编码图像。
左侧是旧版本的Chrome，右侧是Chrome V61
SQIP：基于SVG的LQIP技术SQIP将生成基于SVG的图像预览。它们可用于延迟图像预览，视频收缩或项目的艺术元素。
SQIP
我们前面提到，为了使“图片加载更快”，我们经常使用：
但是我们真的需要图片吗？也许在某些情况下（注意：并非所有场景），我们可以替换图片。
HTML5为我们提供了一个选择：webfontsss.font集可以包含图形图标和字符集。WebFonts可以替换图形：
图标字体演示
WebFont图标的优点：
WebFont图标的缺点：
数据URI实际上是为了将图片数据转换为base64字符串格式，然后将其引入。与普通介绍方法相比，它不再需要启动网络请求来实现优化网页快速加载的目的（减少HTTP请求）。
数据URI简介方法的数据URI方案的缺点的缺点可以在图片URL链接中添加不同的参数。服务器会自动生成不同的格式，大小和质量。例如，前面提到的“图片大小随网络环境变化”就是一个示例。
本文总结了图片优化的四个主要方面：
过去，当我们进行网站优化时，我们始终专注于网站内容，结构和外部链接的内容，结构，外部链和其他方面。它通常被忽略和重要方面，即对图片的优化。一些朋友可能已经说过没有添加图片，以及需要优化的内容。实际上，近年来，搜索引擎不断改善图像识别功能以及人工智能的进步，因此朋友必须注意图片的优化。
原始：https：//juejin.cn/post/7103311752170831902