图片响应式与优化

Big_fat_cat 发布于2019-08-02 18:52 / 495人阅读

摘要：图片的响应式的纯实现可以借助和属性以及元素来实现。给出了一个例子你有一个宽度为像素密度为的设备，选择有张图片，分别为。浏览器会根据当前的页面布局显示图片的的限制以及将被显示在的设备来选择最适合的来源。

图片的响应式的纯 html 实现可以借助 srcset 和 sizes 属性以及元素来实现。
而且观察Chrome开发者工具的 Network项可以发现，任何时候当屏幕变化的时候，如果匹配到新的规则需要的图片改变了的话，浏览器会去加载需要的图片。

demo

srcset 和 sizes 属性

srcset 属性接受一个或多个 image candidate string，每个值之间用逗号隔开。
image candidate string 由图片地址和零个或多个 width descriptor（非零数字后跟一个小写的w）和 pixel density descriptor（非零数字后更一个小写的x）组成。具体构成见以下引用：

An image candidate string consists of the following components, in
order, with the further restrictions described below this list:

Zero or more space characters.

A valid non-empty URL that does not start or end with a U+002C COMMA character (,), referencing a non-interactive, optionally
animated, image resource that is neither paged nor scripted.

Zero or more space characters.

Zero or one of the following:

A width descriptor, consisting of: a space character, a valid non-negative integer giving a number greater than zero representing

width descriptor value, and a U+0077 LATIN SMALL LETTER W

character.

A pixel density descriptor, consisting of: a space character, a valid floating-point number giving a number greater than zero

the pixel density descriptor value, and a U+0078 LATIN

SMALL LETTER X character.

Zero or more space characters.

一个元素的两个 image candidate string 不能有相同的宽度描述符

一个元素的两个 image candidate string 不能有相同的像素密度描述符，为这个要求起见，没有描述符的 image candidate string 默认指定一个 1x 描述符

一个元素的 image candidate string 指定了宽度描述符，则它所有其他的 image candidate string 也必须指定宽度描述符

有 sizes 属性的元素，它所有的 image candidate string 都必须有宽度描述符

还有个这什么玩意儿：

The specified width in an image candidate string"s width descriptor must match the intrinsic width in the resource given by the image candidate string"s URL, if it has an intrinsic width.

srcset

使用 srcset，浏览器自动选择哪一个图片是最适合的。
Mat Marquis 给出了一个例子：
你有一个宽度为 320px 像素密度为 1x 的设备，选择有3张图片，分别为 small.jpg (500px wide), medium.jpg (1000px wide), and large.jpg (2000px wide)。
浏览器会计算：

500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25

然后选择和你的设备的像素密度最近的图片，本例中为 small.jpg

sizes

举例说明：sizes="100vw" 意味着我假定这个图片将会占据整个 viewport。.
也可以配合媒体查询使用例如 sizes="(min-width: 800px) 50vw, 100vw"，意味着如果浏览器窗口宽度大于 800px 那么这个图片可能会占据一半的宽度，如果小于 800px的话，可能会占据全部宽度。

不建议使用：

That can get a little complicated and honestly it might be a little dangerous because you"re putting CSS stuff in markup and you know how that goes. Eric Portis just wrote about this. Ideally it can be automated or injected server-side.

picture 元素

一个用来为包含在其中的特定的元素指定多个元素的容器。浏览器会根据当前的页面布局（显示图片的 box 的限制）以及将被显示在的设备来选择最适合的来源。
最后的标签是必须的，而且作为 "fallback"

通过指定 media 属性

如果媒体查询评估失败，该被跳过

根据 type 属性

浏览器会跳过不支持的类型

webp 图片格式

Filename extension: .webp
Internet media type: image/webp

兼容性 检测浏览器是否支持 webp

http://stackoverflow.com/questions/5573096/detecting-webp-support

参考：

https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
http://www.html5rocks.com/en/tutorials/responsive/picture-element/
http://stackoverflow.com/questions/5573096/detecting-webp-support
http://webpjs.appspot.com/without-webpjs-support.html

超融合服务器专线服务服务器响应优化服务器响应时间优化图片优化 cdn图片优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55490.html

响应式设计个人的一些总结

摘要：所以一个网，甚至是响应式设计，在两个平台上都会损害您整体的。三响应式与如果把网站作为一个单独的网站，如果网站的内容与桌面版的内容相对缺少，导致用户回到桌面端的网站，会记录这种选择，使搜索排名降低，国内百度就不知道会怎样。一、为什么需要响应式设计（responsible web design） 1. 响应式发展背景 1、屏幕尺寸的快速变化，iphone为320x480，分辨率在未来可以...

LeoHsiun 2019-08-01 15:32 评论0 收藏0
声明式与响应式——前端新一代数据可视化方案

摘要：数据可视化图表图表作为数据可视化最常见的表现形式之一，往往被以偏概全的认为图表就是数据可视化。严格来说，数据可视化应该是连接数据与视觉的一个映射关系，将数据映射成人更容易感知其规律的可视化结果。题目中的新一代是个相对的概念，事实上本文即将介绍的方法已经有了生产环境可用的实现方案（这也侧面佐证了其可行性），但考虑到此方法与现在大部分前端项目中所使用的数据可视化方案相比仍有一些优势，因此...

xuhong 2019-08-20 12:34 评论0 收藏0
拦截过滤器模式

摘要：拦截过滤器模式来源问题需求需要在一次请求处理的之前或之后进行拦截处理请求和响应集中统一校验数据编码记录请求信息压缩响应信息等松耦合处理额外的添加和删除希望预处理和后处理相互独立，也能整合复用解决方案使用一个可插拔的过滤器可以预处理和后处理请拦截过滤器模式来源：http://corej2eepatterns.com/I... 问题需求需要在一次请求处理的之前或之后进行拦截处理请求和...

pkwenda 2019-08-16 13:31 评论0 收藏0
前端移动端适配总结

摘要：设备像素比缩写简称，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。在移动端，默认的情况下，布局视口的宽度是要远远大于浏览器的宽度的。手淘团队布局现今，适配手机端 meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码：但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底...

sydMobile 2019-08-30 13:47 评论0 收藏0
前端移动端适配总结

摘要：设备像素比缩写简称，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。在移动端，默认的情况下，布局视口的宽度是要远远大于浏览器的宽度的。手淘团队布局现今，适配手机端 meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码：但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底...

justjavac 2019-08-21 17:04 评论0 收藏0