图像是网站或Web应用程序的重要组成部分。随着终端设备和5G的普及，用户对图像的要求越来越高。为了提供更快的体验，可以优化图像。
至于是否应优化图像，优化效果可以通过在线工具CloudFlare测试网站的效果，并在网站图像上提供优化意见。
访问该网站的每个人都遇到了一个缓慢的加载网站。从基础上讲，这是由于网络上图像的优化不当而引起的，例如图像太大，依此类推。
页面上的图像可能需要很长时间才能加载，并且像素从上到下都痛苦。更糟糕的是，当浏览器理解其尺寸时，它们可能会在页面布局中引起巨大变化。这些问题对用户来说是非常不友好的体验。
据了解，缓慢的页面加载将对页面的“跳跃率”产生不利影响，即迅速离开页面的访问者的百分比。尤其是在e -Commerce网站上，页面上有更多图像，处理不当，处理不当，并且太高速度将直接影响收入。因此，网页上的图像经过优化，以减少源的负载和输出，从而提高搜索引擎排名中网站的性能，并最终为用户提供出色的体验。
自2021年8月以来，Google在考虑搜索结果时使用核心Web Vitals来量化页面性能。测量的因素重点关注加载速度，交互和视觉稳定性的性能：
：最大内容图，测量加载性能。为了提供良好的用户体验，您是否尝试在网页开始加载时在一秒钟内完成LCP。为了提供良好的用户体验，请尽力控制FID。：即，累积布局偏移量并测量视觉稳定性。在提供良好的用户体验中，请尽力使CLS分数低于低于。
CLS和LCP是两个指标，可以通过优化图像来改进。当CLS高时，这表明加载时大量的页面布局正在移动。LCP测量渲染视图中单个最大图像或文本块所需的时间港口。
这些可以使用真实的用户监控（RUM）分析（例如CloudFlare的Web分析）进行真实的时间测量，或使用CloudFlare Image优化测试工具在“实验室环境”中进行测量。
网站开发人员可以做出的最具影响力的性能之一就是确保提供适当的图像。现代设备的图像分辨率相对较大，导致巨大的图像。将这些图像在网页上无法看到所有问题很快。有时不可能限制用户对图像的使用的分辨率。通常，可以通过程序在线减少分辨率，以减少分辨率，以减少大小并为不同终端配置不同的分辨率图像。
当SRCSet和媒体条件大小将图像插入网页上时，它通常会增加标签并设置图像路径：
自2017年以来，主流浏览器支持了更动态的属性，使开发人员可以基于匹配器的浏览器匹配媒体条件来设置多个图像源，即具有不同分辨率终端的不同分辨率的终端配置：
上面的代码告诉浏览器图像通过属性具有三个更改，每个更改都具有不同的固有宽度：和原始宽度。然后，浏览器评估属性（和）媒体条件，以便在属性中选择适当的图像大小。IF。浏览器的宽度很小，图片将被加载；如果浏览器的宽度之间，则将加载图像；最后，如果浏览器的宽度大于浏览器，则将加载原始图片。
过去，建议使用图像格式使用JPEG，PNG，GIF和WebP。现在是Avif。AVIF是具有广泛行业的最新图像格式。它的性能通常比以前的格式好。AVIF支持频道透明度和动画，并且通常比JPEG小50％（而WebP仅为30％）。
图像的质量与他们的前身不同。较新的图像格式（和）支持非毁灭性压缩。出于某些目的，非毁灭性压缩可能是合适的，但是对于大多数网站来说，速度是首选。这种轻微的质量损失值得节省时间和字节。
优化设置质量的位置是一种平衡的行为：图像上会出现伪镜检查；太少了，图像是不必要的。Butteraugli和ssim是类似于图像质量感知的算法，但目前很难自动化，因此最好手动设置它。大多数压缩库中的％是合理的默认值。
图像标签的所有先前技术都减少了图像中使用的字节数。这对于改善这些图像的加载速度和最大内容图（LCP）指示器非常有用。，您必须最大程度地减少页面布局的更改，可以通过预先通知浏览器图像大小来完成。
在优化的网页上，将在标记中加载图像。浏览器获取这些图像，并且在接收图像的标头字节后只能知道图像的大小。效果是浏览器首先呈现页面在零像素占用的图像中，然后在实际加载图像像素本身之前突然绘制了图像的大小。这对用户非常不友好，对可用性产生了严重影响。
html标记中包含图像的图像的大小非常重要，因此浏览器甚至可以在开始加载之前为图像分配空间。加载响应图像：通过通知浏览器原始图像的高度和宽度，假设垂直和水平比不变，即使使用宽度选择器，它也会自动计算正确的高度。
还有一个标记，延迟加载以增加图像的属性：
CDN加速度最直接的方法是使用CDN加速通过缓存和多线加速图像的加载。
对于使用更多图像的网站，仍然需要图像性能优化。您可以通过CloudFlare的图像优化测试工具优化图像优化测试工具，WebPagetest，Lighthouse综合测试网站。