logo
Published on

从google到Chrome内核, 我彻底弄清楚了图片srcset渲染的逻辑

Authors

响应式图片的诞生

在响应式图片的方案出现之前, 也就是在2012年前, 当我们想要使用web加载一张图片的时候, 我们就会写出如下的代码:

<img
  src="/media/cc0-images/hello-world.png"
  alt="description of image" />

是的, 这个方案还不错, 利用src加载图片以及alt作为图片的描述的属性,但是随着web的发展,图片的应用场景开始变的复杂, 我么的需求可能是一个高性能 & 高清晰度 & 高用户视觉感受(注意这里是并列),因此响应式的web就诞生了...

响应式图片

正是这些需求的改变, 我们对于html的图片元素要求也就高了起来,具体的考量如下:

  • 高清晰度: 特定屏幕分辨率(DPR)以及特定屏幕宽度下加载合适分辨率的图片
  • 高用户视觉感受的图片: 当用户反转手机/平板等设备, 又或者当设备尺寸发生变化, 我们的img元素应该切换给用户一个最合适的图片
  • 高性能: 如何加载更少的图片资源节省带宽(由于我们要适配高清晰度以及高用户体验, 这可能会加载很多很大的图片, 进而导致网站变卡)

所以, 在实现一个图片的响应式时,我们就可以从下面的功能实现去考虑:

  1. 根据不同的屏幕尺寸, 提供不同的图片
  2. 根据不同的屏幕尺寸, 提供不同的清晰度的图片
  3. 根据不同的设备像素比(DPR)或用户缩放水平, 提供不同清晰度的图片
  4. 渲染不同类型的图片

这里解释一下

响应式图片的实现

1.根据不同的屏幕尺寸, 提供不同的图片

缩放屏幕尺寸即可查看效果, 我们的断点分别是699, 1150, 1981

  • zip1: 清晰
  • zip2: 模糊
  • zip3: 超级模糊
zip1

代码如下:

<picture>
  <source media="(max-width: 699px)" srcSet="/static/images/blog/zip1.png"></source>
  <source media="(max-width: 1150px)" srcSet="/static/images/blog/zip2.png"></source>
  <source media="(max-width: 1981px)" srcSet="/static/images/blog/zip3.png"></source>
  <img src="/static/images/blog/zip1.png" alt="zip1" />
</picture>

2.根据不同的屏幕尺寸, 提供不同的清晰度的图片

zip1
Discuss on Twitter • View on GitHub