响应式图片.md

响应式图片

time: 2021-07-05 20:16:51
author: heyunjiang

背景

本次在根据 ui 图实现网页时，遇到了图片兼容渲染 retina 屏幕问题，这里对图片兼容渲染做个总结

1 retina 图片模糊问题

普通网页渲染宽度：680px
retina 渲染宽度：680px
图片实际宽度：1080px
在普通屏幕 devicePixelRatio=1 上渲染：清晰
在 retina 屏幕 devicePixelRatio=2 上渲染：模糊

陷入误区：在 retina 上模糊，认为是缩小了之后也模糊，因为 680 < 1080
问题解答：retina 模糊是因为浏览器渲染图片，也会根据 dpi 来渲染，也就是说，retina 也会模糊，不是因为缩小了模糊，而是因为放大了模糊，需要更大尺寸的图片来

疑问：浏览器对 px 好像有做兼容处理，1px 表示的是兼容像素，不是显示器指定的 1px，而是兼容普通屏幕和 retina 等屏幕之后显示值，这就是说在 mac pro 等屏幕也不会缩小文字； 为什么图片没有做兼容渲染？
疑问解答：浏览器没有做兼容处理，这个是由 retina 屏幕自己优化的，对文字、字体图标、svg 等几何绘制指令渲染，采用的4个像素渲染一个几何像素，目的是显示更清晰。 图片通常是位图，视频也是由众多位图组成，位图是要实际填充 retina 密集的一个一个像素点，所以需要2倍宽高的图片，否则就会模糊

retina 屏幕

1. 1屏幕像素由显卡控制的4个像素组成，主要特点是增强了清晰度，在浏览器中可以通过 window.devicePixelRatio 来判断
2. 具体体现：文字、字体图标、svg 的宽度，由4个 retina 像素表示一个屏幕宽度 px 单位，也就是说在 retina 屏幕上概念高宽都 x2 了的，本质高宽没有变，只是占据像素点更多。 所以在普通显示器和 retina 屏幕上看起来是一样的宽度，不用开发者刻意控制，但是 retina 更清晰，这个是由 retina 屏幕带来的优点
3. 具体体现：视频和图片(位图)就需要使用2倍的宽高 size 在 retina 屏幕上显示，retina 没有像处理文字那样处理位图。 因为位图本质是由一个一个像素组成，在普通屏幕上看起来正常的图片，如果没有控制图片宽高，在 retina 屏幕上就会缩小，因为 retina 像素密度较高； 如果控制了宽高，retina 上图片就会模糊，因为存在了一些像素点空闲的情况。

2 响应式图片渲染

分辨率兼容：相同的尺寸，不同的分辨率

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

宽度兼容：不同的屏幕宽度，显示不同的图片

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

通过 img 标签 srcset 实现的响应式图片，对于 css media query 实现来说，浏览器在解析 dom 时就会做响应优化，只去加载对应屏幕适配的图片，并且是预加载

3 图片类型

矢量图：svg
位图：由像素点构成的图，包含了 png, jpg 等常用的图

其他问题

text-align: justify; 对于只有一行文字，2端对齐浏览器不会生效，因为浏览器对最后一行不会做任何处理。 可以使用 text-last-align: justify; 实现，但是不兼容 safari。 也可以使用 <span style="display: inline-block;width: 100%;height: 0;" /> 来添加一个空的元素在末尾，实现文字两端对齐。

参考文章

mdn 响应式图片
wikipedia 视网膜显示屏