图像加载。最佳实践
以正确的方式加载你的网络应用程序的图像。
谈到网站，图像很重要，因为它们有助于在一眨眼的时间内传递复杂的信息。
因此，互联网上93.7%的网站至少使用一种类型的图像文件格式。
然而，大量未经优化的图像影响了网站的性能、用户体验和SEO。
因此，在这篇文章中，我将讨论为网站优化图像加载的最佳做法，避免常见的陷阱。
1.使用带有回退功能的新图像格式
许多网站开发人员不知道他们网站的最佳图像文件格式，也不知道如何优化它。结果，他们停留在他们熟悉的那些，如JPEG、PNG、SVG或GIF。
然而，与WebP和AVIF等相对较新的格式相比，这些老的格式性能较差。
WebP是一种专门为提供卓越的有损和无损压缩而开发的图像格式。
- 与PNG相比，它的体积小26%。
- 与JPEG相比，要小25-35%。
- 你可以使用cwebp命令行工具或ImageminWebP插件将你的PNG或JPEG转换为WebP图像。
- 虽然它没有深入的历史支持，但截至2021年8月，WebP在最新版本的主要网络浏览器中得到广泛支持。
此外，你可以为旧版本的浏览器提供后备图像，如下所示。
<picture>
AVIF， 最新的图像格式，与WebP相比提供了更好的性能。
- 与JPEG相比，它小了50%。
- 与WebP相比，小了20%。
尽管在撰写本文时，AVIF仅在Chrome和Opera中得到支持，但你仍然可以在原生HTML中通过元素使用该格式，并支持回退。
<picture>
如果一个浏览器不支持，它将退回到默认的。
2.提供正确尺寸的图片
在现代网络上，忽视你的网站的响应性是一个大错误。你50%以上的流量来自智能手机和平板电脑。
因此，你可以根据流行的设备尺寸缩放图像，并使用srcset为它们服务。
<img src="image.jpg"
然后，浏览器从给定的变体列表中确定哪个图像源最合适。
3.压缩图像
即使在选择了最合适的图像格式和尺寸后，你还可以通过图像压缩进一步减少图像的大小。例如，看一下下面的图像集。
你可能分辨不出原始图像和压缩后的图像之间有什么区别。然而，在测量图像大小时，每张图像需要1.82MB，712KB，582KB，403KB。
在这里，你可以看到在质量上没有明显损失的数值之间有相当大的差别。
此外，你可以通过将压缩率从100%改为75%，从1.82MB到712KB。因此，你的图像质量的少量减少将大大增加你网站的加载速度。
用Bit构建和分享独立的JS组件
比特是一个可扩展的工具，可以让你创建_真正的_模块化应用程序 ，并有_独立_编写、版本和维护的组件。
用它来构建模块化的应用程序和设计系统，编写和交付微型前端，或者简单地在应用程序之间共享组件。
一个独立开发的React "卡片 "组件，并通过自动生成的依赖树进行源代码控制。
4.使用图像懒惰加载
懒惰加载有助于进一步改善页面加载时间。一旦图像接近视口的边界，你就可以懒惰地加载它。
此外，有几种方法可以选择。
原生懒惰加载
图片的原生懒惰加载是非常直接的。
<img src="image.jpg" loading="lazy" alt="..." />
通过在img标签上添加loading="lazy "属性，你可以指示浏览器在图像进入视口时立即加载，而在用户接近屏幕时才获取其他图像。
虽然目前大多数主要浏览器都对加载属性有很好的支持，但其中一个缺点是IE和Safari缺乏支持。
带有模糊图像效果的懒人加载
作为Medium的读者，你一定对这种技术非常熟悉。你有没有注意过网站是如何加载某个故事的横幅图片的？
模糊的图像到优质图像的过渡
正如你所看到的，Medium首先加载的是图片的低分辨率副本，直到你的图片的高分辨率版本被偷懒加载。有几种令人兴奋的方法来实现模糊效果的懒惰加载。
Lozad.js是一个轻量级、高性能的库，你可以使用。作为第一步，用npm或yarn安装lozad。
// You can install lozad with npm
然后使用你选择的模块捆绑器，你可以导入它。
// Using ES6 modules
之后对于基本的实现，在元素中添加class="lozad"。
<img class="lozad" data-src="image.jpg">
最后，你所需要做的就是启动Lozad，如下所示。
const observer
Lozad支持所有现代浏览器。如果你需要旧的浏览器支持，请利用polyfill。
除了上面提到的方法外，你还可以使用其他一些技术，如Intersection Observer API和yall.js来实现懒惰加载。
5.使用图像CDN
内容交付网络（CDN）技术旨在通过在离用户更近的地方存储内容，更快地将内容交付给用户。
有一种特殊类型的CDN叫图像CDN，它在优化你的图像方面非常出色。有了这些，你可以产生40-80%的图像文件大小的节省。
它们是如何工作的？
图像CDN可以根据浏览器、设备尺寸、页面布局和像素密度，动态调整尺寸、质量和格式，从而提供响应式图像。
例如，图像CDN可能在Safari浏览器中提供JPEG，在Chrome浏览器中提供WebP，在Edge浏览器中提供JPEG XR。
这种支持是通过在CDN进行图像转换来实现的。
一些图像CDN支持转换的 "自动模式"。
鉴于图像通常占到页面重量的一半以上。因此，为图像整合一个CDN可以给你的加载速度带来很大的提升。
最后的思考
在今天，要找到一个没有图片的网站是非常困难的。因此，图像在现代网站中起着至关重要的作用，特别是有了更好的图像加载技术。
在这篇文章中，我讨论了五个最佳实践，你可以用来优化你的网络应用中的图像加载。除了上面提到的方法之外，下面是一些其他的最佳实践，你可以使用。
- 使用渐进式JPEGs。
- 为慢速连接的用户提供更小的图像。
- 使用HTTP/2而不是HTTP/1.1。
- 使用图像集。
如果你有其他优化图片的方法，请在评论区告诉我。
谢谢您的阅读!💻
了解更多
5个网站的图像加载最佳实践最初发表在Medium上的Bits and Pieces，在那里人们通过强调和回应这个故事来继续对话。
