响应式图片(自适应图片)

谁践踏了优雅 2022-03-07 19:38 250阅读 0赞

> 在这篇文章中讨论的新特性 — `srcset/sizes/<picture>` — 都已经被新版本的现代浏览器和移动浏览器所支 持（包括Edge，而不是IE）。

## 解决的问题 ##

1.  **分辨率切换问题：**小屏手机屏幕上显示网页，那么没有必要在网页上嵌入pc端的大图片，浪费带宽
2.  **艺术方向问题：**当网站在狭窄的屏幕上观看时，显示一幅包含了重要细节的裁剪版图片，而不是显示pc端的大图，这样会显得图片缩小，重要地方不突出

## 分辨率切换问题 ##

### 不同分辨率加载不同尺寸的图片 ###

需要说明的几点如下:

*  `srcset`语法: "图片路径 物理像素, 图片路径 物理像素, ....."
 *  `size`: "媒体查询 css像素"
 *  `src`: 当浏览器不支持上面的属性的时候，默认加载这里

加载的流程如下:

1.  查看设备宽度
2.  检查sizes列表中哪个媒体条件是第一个为真
3.  查看给予该媒体查询的槽大小
4.  加载srcset列表中引用的**最接近**所选的槽大小的图像

在很多pc端上，`1px=1w`

### 不同的分辨率加载相同的尺寸 ###

<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 {
        width: 320px;
    }

一般情况下当我们给`img`设置固定的宽的时候,为了在不同的`dpr`设备上显示相同的大小，可以配合`x`来，例如`1.5x`代表dpr为1.5的设备

## 艺术问题 ##

需要说明的几点:

1.  source当中的也可以使用`srcset`、`sizes`属性
2.  必须提供一个`img`元素，以备浏览器不支持的时候使用

## 为什么不使用`css`和`javaScript`来完成图片替换 ##

因为你不能先加载好 `<img>` 元素后, 再用 `JavaScript` 检测视图的宽度，如果觉得大小不合适，就动态地加载小的图片替换已经加载好的图片，这样的话, 原始的图像已经被加载了, 然后你也加载了小的图像, 这样的做法对于响应式图像的理念来说，是很糟糕的。

## 另一种方式`svg` ##

位图由以像素为单位的宽和高表示，如果位图显示的尺寸大于原始尺寸，一张较小的位图看来会有颗粒感（然而矢量图不会这样）

但是它不适用于所有的图片，在某种程度上是这样的——它们无论是文件大小还是比例都合适，无论在哪里你都应该尽可能的使用它们。

虽然在简单图形、图案、界面元素等方面较好，但如果是有大量的细节的照片，创建矢量图像会变得非常复杂。加载会消耗更多的带宽。

## 使用现代图像格式 ##

有很多令人激动的新图像格式（例如`WebP`和`JPEG-2000`）可以在有**高质量**的同时有**较低的文件大小**。然而，浏览器对其的支持参差不齐。

为了兼容老旧浏览器，我们可以在`<source>`标签当中指定`MIME`类型，使用`type`属性，并在`srcset`当中指定相应格式的图片

响应式图片(自适应图片)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS图片自适应框架

相关 html并列图片自适应后错位,css3响应式图片列表高度不同导致页面错位

相关响应式/自适应/流动布局

相关响应式图片101

相关实现响应式图片

相关关于自适应图片

相关响应式图片(自适应图片)

相关响应式图片(自适应图片)

相关图片自适应

相关 html背景图片自适应