怎样使用HTML5响应式图片技术?

发送到手机
使用"扫一扫"即可发送至手机

导语

最近几年随着响应式网站的火爆,我们稻壳互联的客户对于响应式网站的需求也是日益增高。毕竟今天的网络时代,用户访问互联网的设备都有着特定的屏幕尺寸、分辨率等,在这样的情况下,建设响应式的网站成为了稻壳客户的最佳选择,毕竟响应式网站具有流动性以及适应屏幕大小的能力。

这里对于响应式的优缺点不做过多介绍,本文作为技术文章,重点介绍html5下响应式网站中的图片响应式技术。

初识

这里不得不提到图片的srcset属性,相信很多与时俱进的同学都清楚这是个可以根据屏幕密度现实对应尺寸图片东东。例如:

<img src="mm-width-80px.jpg" srcset="mm-width-80px.jpg 1x, mm-width-120px 2x">

也可以简写为:

<img src="mm-width-80px.jpg" srcset="mm-width-120px 2x">

细心的童鞋们已经发现了,图片地址后面的那个“1x”“2x”,介个就是像素比。目前我们大多数办公的pc显示器默认像素比都是1,对于土豪的苹果除外,俺们农村人用不起。

怎样设置我们浏览器的像素比? Ctrl+✚快捷键,或者ctrl + 鼠标滚轮,放大页面的比例,例如,试试放大到150%。此时设备像素比window.devicePixelRatio为1.5,因此加载的就是120像素宽度的图片。

不同的2x显示策略

还有些时候,使用同尺寸的高清图片作为2x对应图片,虽然两者图片大小差不多,但个人觉得还是2倍尺寸优化大图更好一点,为什么呢?

srcset当初设计的用意是为了高密度屏幕上图片更好的显示,如果世界上就只有“不同设备密度”这一个戏剧冲突的话,2x图片是高清图还是2倍尺寸图其实都无伤大雅。然而,事实上,生活无处不戏剧,现代web布局中,有种布局不可忽略,那就是「响应式布局」,剧本往往会这样,PC浏览器上显示大图,Mobile浏览器上显示小图。发现没,同样是“大小图的要求”,和设备像素比有类似的戏剧冲突。

于是,如果我们2x图片使用的是高清图,结合响应式布局,我们可能需要4张图片资源,即:小图、小图高清和大图、大图高清。但是,2x图片走的是2倍尺寸图片,我们只需要3张图片资源,即:小图、中图以及中图、大图。

在老一代srcset规范成型过程中,其实已经考虑到与响应式布局的纠葛,出现了w描述符,例如,走高清路线的:

<img src="small.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x">

走2倍尺寸路线的

<img src="small.jpg" srcset="small.jpg 640w 1x, medium.jpg 640w 2x, medium.jpg 1x, large.jpg 2x">

全新的智能srcset、sizes属性, w描述符

旧的srcset是人主导,而现在新的srcset是浏览器主导,你主需要提供图片资源、以及断点,其他都交给浏览器智能解决,什么响应宽度啊、设备像素比啊,你都不要关心了,浏览器会自动匹配最佳显示图片。

<img src="mm-width-128px.jpg"
     srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">

其中1:
srcset用来指向提供的图片资源,注意,仅仅是资源指向,没有以前的1x, 2x什么的,这个都交给浏览器了,我们不需要关心!例如这里,指向了3个尺寸图片,分别实际尺寸128像素,256像素和512像素。

其中2:
sizes用来表示尺寸临界点,主要跟响应式布局打交道。语法如下:

sizes="[media query] [length], [media query] [length] ... etc"


怎样使用HTML5响应式图片技术?

怎样使用HTML5响应式图片技术?

分享:

标签: