WEB前端教程：响应式图像

学习如何使用 srcset 以及 <picture> 元素，来实现网页中的响应式图片处理方法

课程目标

学习如何使用 srcset 以及 <picture> 元素，来实现网页中的响应式图片处理方法

我们将学习实现一个响应式图像:根据显示设备的分辨率不同加载不同的类型的图片,防止带宽的浪费.同时，在改变设备类型或者分辨率时，能够及时加载对应的图片。

使用 srcset/size 来创建一个分辨率切换器示例，下面两个场景：

任务步骤

首先创建不同大小的多张图片, 每个图片的图像都是一样的。可以利用 PLACEHOLD.IT 分别生成 1024x1024 px，768x768 px,512x512 px 的图片占位符，来代表同一个图像，的不同尺寸
基于设备像素比选择,实现固定宽度图像:可以在不同的分辨率的情况下，提供相同尺寸的图像。对于设备像素比为 1 ，将使用 512x512 px 大小图像。对于 2 的设备像素比，将使用图像 1024x1024 px 图像
基于 Viewport 大小,实现可变宽度的图像：使用 srcset/size 实现在不同的视图大小的情况下，提供不同尺寸大小的图像.如何显示您可以自行设定。

使用 <picture>元素来实现艺术图片切换器

任务步骤

利用 PLACEHOLD.IT 生成三个张不一样的图片，一张文本为 Small 代表为小号图像，一张文本为 Medium 代表中号图像,一张文本为 Big 代表为大号图片
当 viewport 大于 960 像素时，会加载整体图片，也就是文本为 Big 的图像占位符
当 viewport 宽度大于 575 像素时，浏览器会加载中号图像，也就是文本为 Medium 的图像占位符
而当宽度小于 575 像素时，浏览器会加载小号图像，也就是文本为 Small 的图像占位符
打开开发者工具，进入响应设计视图，调整页面宽度，查看是否是符合要求的图像文件被下载了。

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等