发布时间：2023-7-23 分类： 行业资讯
有许多前端优化，图像优化是其中的一部分。无论是渐进增强还是优雅降级，图像优化已成为不可忽视的发展的一部分。
了解它，你需要知道原因。
图像优化的前提是需要了解图像的基本原理。传统的图像格式分为矢量图形和位图。
原理：
矢量图形使用线，点和多边形来表示图像。
光栅图案（也可以是位图）通过对矩形网格内的每个像素的值进行编码来表示图像。
矢量格式适用于简单的形状图形，颜色易于更改，颜色只能通过CSS中的填充属性进行更改。并且在太大的变焦下可以保证清晰度，矢量格式不能满足复杂的图像，如照片，高清地图等。目前我们需要位图，并且位图有很多种格式：
GIF
PNG
JPEG
JPEG-XR
WebP的
BPG
Webp是一种流行的图像格式解决方案。目前，移动Android 4.0或更高版本，PC chrome 10+（带有渲染错误的14~16）和opera 11+支持webp格式图像，比jpg小65％。编码和解码速度要慢得多。虽然webp会增加解码时间，但由于体积小，加载时间会缩短。实际上，文件的渲染速度更快。
此外，如果您考虑更完整的兼容性问题，您仍然必须返回到jpg和png。常规选择将使用jpg作为背景图像，并将png作为小图像。当然，你需要压缩它。服务器可以使用Gzip。您还可以在上传图像之前使用该工具压缩一次，例如使用ps或在线压缩
TinyPNG或客户端工具ImageOptim。
压缩可以分为有损压缩和无损压缩。
使用有损压缩来处理图像是为了去除某些像素数据。
使用无损压缩处理图像以压缩像素数据。
可以根据需要选择压缩溶液。
优化策略
常见的优化选项：
使用数据URI（base64）编码而不是图像：对于图像大小为2 KB的情况，并且页面上引用图片的总数很小，原则是将图像转换为base64编码的内联字符串到页面或CSS，这可以减少HTTP请求。 。
合并精灵：在移动端的多图像的情况下，可以将多个图像合并为一个图像，并且可以通过CSS定位背景图像来参考图像，这可以有效地减少HTTP请求。
使用CSS，svg，canvas或iconfont而不是图像：对于移动或高级浏览器，您绘制的图片很简单。
延迟加载图像（lazyload）
使用cdn提供对图像的访问。
响应图片
响应式图像可以与延迟加载相结合，以增强Web体验。许多代购源码网站徽标都是固定宽度图像的示例，无论浏览器视口的宽度如何，它们始终保持相同的宽度。
但是，在移动端，通常需要显示不固定的图像，不同的视口，不同的分辨率和不同的图像尺寸，并且尽管视口改变，图像也会改变。
此时我们需要考虑使用响应式图像：
< img srcset='360.jpg 360w，768.jpg 768w，1200.jpg 1200w，1920.jpg 1920w'size='（max-width: 360px）100vw，
（最大宽度: 768px）90vw，
（最大宽度: 1980px）80vw'
Src='360.jpg'alt=''>
Srcset：我们为浏览器准备了四个高质量的图像，分别为360 768 1200 1920
大小：让我们告诉浏览器不同环境中图像的宽度
当视口不大于360时，图像的宽度为100vw，当视口大于768时，图像显示为90vw，依此类推。
最终的src作为默认图像url引入，是一个后备方案。当然，当浏览器无法识别srcset和sizes属性时，浏览器会直接读取src渲染。
演示:
在iphone4（320）下，图像宽度与我们设置的100vw相同，浏览器选择没有360图像的768图像，因为iphone4的dpr是2，浏览器会智能地选择合适的768.
在iphone6p（414）下，由于6p的较高drp，浏览器选择了显示90vw的1200质量图像。
此时我们可以欺骗浏览器：
360.jpg 1200w
1200.jpg 9999w
此时，浏览器将360地图用作1200.这里可能存在一些疑问。为什么图像的宽度不是90vw？因为浏览器被骗但我不知道，他仍然根据1200的图像调整dpr.414 * 90％*（360/1200）大约等于111.7。此方法非常智能，浏览器从w列表中选择最合适的图像，根据您的尺寸调用显示。
如果我们需要更精确地控制浏览器以什么视口大小显示的图像，我们可以使用图片元素。
<图片及GT;
< source media='（min-width: 960px）'srcset=960.jpg'>
< source media='（min-width: 768px）'srcset='768.jpg'>
< img src='360.jpg'alt=''>
< /图片及GT;
当视口大于960像素时，将加载960.jpg。当它大于768像素时，加载768.jpg。如果视口小于768，则加载默认图像。虽然并非每个浏览器都支持图片元素，但您也可以使用Picturefill polyfill。
加载和显示策略
在多图片渲染的情况下，结合延迟加载，并确保图像的渲染速度，类似于已知的渲染效果，我们可以使用progressive-jpg。
当然，与基线jpg扫描和逐行显示图像相比，从弱网络角度来看，这种显示可能更合适。但仍存在不足之处。参考Zhizhi和medium等代购源码网站的图形效果，您可以模拟：
首先为图像占位符创建一个保留块，其中将显示图像。块中的另一个块将首先设置填充底部以支撑块的高度（即，确保需要加载的图像也是宽度高度的比率）。这可以防止图像在加载时重新排列。
加载图像的轻量级版本。这次您将首先请求图像的缩略图。并使用模糊模糊效果
等到滚动到可见区域，加载高质量图像，并在加载后取消模糊效果。
介质下的实现更复杂。加载缩略图后，它将被绘制到画布画布，然后通过自定义模糊功能（类似于StackBlur），同时请求高质量图像。等到请求完成，然后隐藏画布。
一个简单的例子可以在&ldquo中找到。https://codepen.io/SitePoint/pen/VPVEZm”。
