【奥门威尼斯网址】响应式(10)响应式图片

by admin on 2019年12月16日

聊聊响应式图片

2016/11/14 · HTML5 · 5
评论 ·
HTML5,
响应式图片

本文作者: 伯乐在线 –
TGCode
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者奥门威尼斯网址,。

“响应式(Responsive)”这个词我想大家没有听过一千遍,也有一百遍了。响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。网上介绍响应式的文章也有很多了,比如:《自适应页面设计》。在这篇文章中,我们不讲页面布局的响应式,我们主要来看看“响应式图片”。
这篇文章主要内容:

  • 为什么要使用响应式图片
  • <picture>元素
  • img的srcset、sizes属性

1、为什么要使用响应式图片

假如有一张图片的显示宽度为200px,那么,它在 1x(即设备像素比为 1
的显示器) 的显示器上,是占了 200
个物理像素(即实际所占的像素);它在2x 的显示器上,实际上是占了 400
个物理像素;在 3x 的显示器上,实际上是占了 600 个物理像素;在 4x
的显示器上就是占了 800 个物理像素。

如果这个图片只提供 200 像素的尺寸,那么在 2x~4x
的显示器上看起来就很模糊。如果只提供 800 像素的版本,那么在 1x~3x
的设备上会显得多余,因为加载时间会相较长,所以我们要使用响应式图片。

我们有两种方法来设置响应式图片:

  • 使用<picture>元素(HTML5新增)
  • 使用img的srcset、sizes

2、picture元素

在HTML
5中,增加了一个新元素<picture>。用过<video>、<audio>的,会觉得<picture>的用法很熟悉:

<picture>   <source srcset=”smaller.jpg” media=”(max-width:
750px)”>   <source srcset=”default.jpg”>   <img
srcset=”default.jpg” /> </picture>

1
2
3
4
5
6
7
8
9
<picture>
 
  <source srcset="smaller.jpg" media="(max-width: 750px)">
 
  <source srcset="default.jpg">
 
  <img srcset="default.jpg" />
 
</picture>

 

不知道你注意到没有,在 media
属性使用的语法与CSS媒体(media)特性中使用的语法一样。你可以使用相同的特性,也就是说你可以查询
max-width , min-width , max-height , min-height , orientation
等属性。

看到<picture>这个元素是不是很兴奋,可是不得不提醒你一句,目前来说,这个元素还是有兼容性问题的。

兼容性:兼容性

当然,如果你一定要使用<picture>这个元素,又要在其他浏览器里支持,那你就需要添加一个额外的插件:Picturefill2.0

<script src=”picturefill.js”></script>

1
<script src="picturefill.js"></script>

虽然<picture>很方便,但如果你考虑到兼容性,还是要谨慎使用,不过,我们也有兼容性较好的另外一种处理响应式图片的方法,看下面。

3、img的srcset、sizes属性

当然,<img>元素自身也提供了响应式的属性:srcsetsizes

3.1 旧版本的srcset属性

在以前,我们是这样用的:

<img src=”width-128px.jpg” srcset=”width-128px.jpg 1x,
width-256px.jpg 2x” />

1
<img src="width-128px.jpg" srcset="width-128px.jpg 1x, width-256px.jpg 2x" />

这段代码什么意思呢?

浏览器根据屏幕不同的像素密度(x)来显示对应尺寸的图片,也可以说是根据设备的像素比来显示不同的图片。

看图:

奥门威尼斯网址 1

奥门威尼斯网址 2

别老是看着“别人的妹子”,请注意红色箭头,DPR就是设备像素比,不同的像素比,会显示不同的图片。

目前屏幕密度有:1x、2x、3x、4x。

3.2 新标准的srcset、sizes属性,w描述符

旧版本的srcset使用多少有些局限性,不过幸好的是到2014年,我们已经有了全新的srcset,而且还多一个size是属性。

使用新的srcset,我们只需要提供图片资源以及断点,浏览器会去自动匹配最佳显示图片。

使用方法如下:

<img src=”width-128.jpg” srcset=”width-128.jpg 128w, width-512.jpg
512w” sizes=”(max-width: 500px) 128px, 512px” />

1
<img src="width-128.jpg" srcset="width-128.jpg 128w, width-512.jpg 512w" sizes="(max-width: 500px) 128px, 512px" />

上面这段代码的意思表示:不支持srcset属性时,使用src中的图片,否则浏览器会自动匹配最佳显示图片;sizes属性的值表示当可视区宽度不大于500像素,则图片宽度显示为128px,其他情况下,图片宽度显示为512px。。

奥门威尼斯网址 3

奥门威尼斯网址 4

注意:如果你用pc浏览器测试这段代码,一定要先进入移动模式,因为一打开页面时可视区大于500px(除非你的电脑是迷你版),会先显示大图片,随后即使你缩小屏幕,小图片虽然会加载,你可以在控制台的“Network”里看到,但是显示的依旧会是大图片,因为前面大图片已经缓存了,而浏览器会自动匹配最佳显示的图片。

srcset用来提供图片资源,sizes属性的作用类似媒体查询,用来设置图片尺寸的临界点。

sizes=”[media query] [length], [media query] [length]…”

1
sizes="[media query] [length], [media query] [length]…"

要保证使用sizes 里计算出来的宽度始终是图片所占屏幕宽度(length)。

为什么说sizes属性的作用类似媒体查询呢?

因为它只是支持部分媒体查询,比如:

(min-width: 400px) (not (orientation: landscape) ) ( (orientation:
landscape) and (min-width:400px) ) ( (orientation: portrait) or
(max-width: 500px) )

1
2
3
4
5
6
7
(min-width: 400px)
 
(not (orientation: landscape) )
 
( (orientation: landscape) and (min-width:400px) )
 
( (orientation: portrait) or (max-width: 500px) )

 

但它不支持我们明确的定义媒体类型:比如screen或者print等等。

除了使用px外,我们还可以使用em、px、cm、vw…,甚至CSS3的calc,不能使用百分比。

sizes=”(max-width: 320px) calc(100vw – 20px), 128px”

表示当视区宽度不大于320像素时候,图片宽度为整个视区宽度减去20像素的大小。

兼容性查看:兼容性

3.3 常见的使用场景

(1)如果图片的宽度是整个视口的百分比,那么sizes可以这样设置:

sizes=”80vw”

1
sizes="80vw"

(2)假如图片两侧的边距各为10px,我们可以这样设置:

sizes=”calc( 100vw – 20px)”

1
sizes="calc( 100vw – 20px)"

(3)如果有一个两侧边距为10px的图片,允许它的最大宽度为500px,我们可以这样设置:

sizes=”( min-width:520px) 500px, calc(100vw – 20px)”

1
sizes="( min-width:520px) 500px, calc(100vw – 20px)"

上面的代码表示当可视区大于520px时,图片宽度为500px,否则宽度为calc(100vw
– 20px)计算的值。

打赏支持我写出更多好文章,谢谢!

打赏作者

原文
“响应式(Responsive)”这个词我想大家没有听过一千遍,也有一百遍了。响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。网上介绍响应式的文章也有很多了,比如:《自适应页面设计》。在这篇文章中,我们不讲页面布局的响应式,我们主要来看看“响应式图片”。这篇文章主要内容:
为什么要使用响应式图片

响应式图片:

响应式广告这里我们使用了第三方的插件来处理广告轮播图。
下面是选择第三方插件的方法:

网页中的图片

在最初的网页主元素是文字,自从图片的加入,使网页变得越来越多元化,网页的访问,简单流程是向服务期发出请求,服务器将网页整体下载都bowser
上面,所以这个图片的大小会影响到网页加载速度

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

奥门威尼斯网址 5
奥门威尼斯网址 6

2 赞 14 收藏 5
评论

<picture>元素

    不仅仅是指图片的排版和布局而且也需要根据设备大小加载不同的图片 。

奥门威尼斯网址 7

加载速度的影响

一般来说,网页会对图片发出 56 次请求。每一次请求都是一种成本

奥门威尼斯网址 8

56次请求.png

根据 Google
,亚马逊和其他公司的研究,即使很小的加载延误,都会造成很明显的流量和经济的损失,所以图片的处理很有必要。

关于作者:TGCode

奥门威尼斯网址 9

路途虽远,无所畏
个人主页 ·
我的文章 ·
9 ·
   

奥门威尼斯网址 10

img的srcset、sizes属性

 
 根据不同的设备大小加载不同的图片这虽然增加了工作量,但是可以更优的进行选择图片,不仅仅带来页面而美观性而且也可以提高网站的响应速度。

image.png

max-width

响应式图片,根据屏幕的大小调整自己的大小,当这个图片很小,在屏幕的放大会出现失帧的情况,这是因为我们用的图片大部分都是位图,是由像素组成的,所以会出现下面这种情况。(使用学校的电脑太卡了
,谅解(@^_^@)

奥门威尼斯网址 11

width.gif

我们使用 max-width
将图片放到最大的时候不进行放大,避免元素的失帧。(使用学校的电脑太卡了
,谅解(@^_^@)

奥门威尼斯网址 12

max-width.gif

1、为什么要使用响应式图片
假如有一张图片的显示宽度为200px,那么,它在 1x
(即设备像素比为 1 的显示器) 的显示器上,是占了 200
个物理像素(即实际所占的像素);它在 2x
的显示器上,实际上是占了 400 个物理像素;在 3x
的显示器上,实际上是占了 600 个物理像素;在 4x
的显示器上就是占了 800 个物理像素。
如果这个图片只提供 200 像素的尺寸,那么在 2x~4x
的显示器上看起来就很模糊。如果只提供 800 像素的版本,那么在 1x~3x
的设备上会显得多余,因为加载时间会相较长,所以我们要使用响应式图片。
我们有两种方法来设置响应式图片:
使用<picture>元素(HTML5新增)

如果实现响应式?

这里我们选择处理图片的插件是OwlCarousel2
地址如下:https://github.com/OwlCarousel2/OwlCarousel2
优点如下:对响应式有好的支持,对不同的浏览器有很好的支持,最小的压缩包很小。
首先要引入下面的样式库:
<link rel=”stylesheet” href=”owlcarousel/owl.carousel.min.css”>
<link rel=”stylesheet”
href=”owlcarousel/owl.theme.default.min.css”>
接下来要引入下面的js:
<script src=”jquery.min.js”></script>
<script src=”owlcarousel/owl.carousel.min.js”></script>
如下轮播图 响应式图片使用了picturefill.js 文件
目的是处理不支持picture标签的浏览器来完成响应式图片的设置。
处理轮播图的样式代码如下所示:
<div class=”ad”>
<div class=”owl-carousel owl-theme”>
<div class=”item”>
<picture>
<source srcset=”img/ad001-l.png” media=”(min-width:50em)”>
<source srcset=”img/ad001-m.png” media=”(min-width:30em)”>
<img src=”img/ad001.png” alt=”2015年度报告”>
</picture>
</div>
<div class=”item”>
<picture>
<source srcset=”img/ad002-l.png” media=”(min-width: 50em)”>
<source srcset=”img/ad002-m.png” media=”(min-width: 30em)”>
<img srcset=”img/ad002.png” alt=”新年红包”>
</picture>
</div>
<div class=”item”>
<picture>
<source srcset=”img/ad003-l.png” media=”(min-width: 50em)”>
<source srcset=”img/ad003-m.png” media=”(min-width: 30em)”>
<img srcset=”img/ad003.png” alt=”新手秘籍”>
</picture>
</div>
</div>
</div>
处理轮播图的js代码如下所示:
$(document).ready(function () {
$(“.owl-carousel”).owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
});
接下来要处理的部分就是响应式图片了
根据不同的浏览器窗口大小进而处理不同的响应式的图片 根据
浏览器窗口大小进而相应图片大小

calc()

当我们进行响应式布局的时候,一般都使用 %
来规定大小,目的是为了在屏幕缩小或变大的时候,都可以按照比例缩放和扩大,但是在进行了边距调整,比如
margin-left:10px,我们需要计算 % 这样显得很麻烦,但是calc
函数可以帮助计算,唯一注意的是 calc((100% – 10px)/2)
中间遇到+-的时候,左右都要有 空格 。

img{
    width: calc((100% - 10px)/2) ;
}

使用img的srcset、sizes

    (1)js或者服务端  根绝window.resize事件修改  图片路径

如何实现响应式图片呢?

vmax和vmin

很常见的修改大小的css 单位 px 和 % 但是很少用 vmax 和vmin 单位
,大家可以尝试使用vmin 和 vmax 单位 看看有什么区别;

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。

关于css的单位的博客

2、picture元素
在HTML
5中,增加了一个新元素<picture>。用过<video>、<audio>的,会觉得<picture>的用法很熟悉:

奥门威尼斯网址 13

奥门威尼斯网址 14

位图和矢量图

区别:位图使用的像素,矢量图用的是形状,线条和填充颜色组合。在选择图片的时候,不同情况下使用的图片不一样,格式也不一样。在选择logo
或者小图标的时候一般选择矢量图,因为矢量图的特性,是不会根据图片的大小改变图片的质量。
选择格式:我们会选择用位图和矢量图的同时,还会面对不同的图片格式

jpeg的 log图,放大后会出现锯齿,二svg格式的log 保存完好

通过下面的示例网站,对比不同格式和大小的区别:

奥门威尼斯网址 15

logo.png

示例:
JPEG 格式 logo
图片
JPEG 格式图片,覆盖为 SVG 格式的
logo
SVG v PNG v
JPG


图片格式
图片优化
更多关于 WebP
的信息
WebP
浏览器支持

最后,在选择格式的时候我们优先选择 svg,如果不会生成,优先选择 png 格式

<picture>
<source srcset=”smaller.jpg” media=”(max-width: 750px)”>
<source srcset=”default.jpg”>
<img srcset=”default.jpg” />
</picture>

浏览器改变或者开始加载的时候调用图片

image.png

压缩、优化和自动化

(以下全部来自优达学城)
开始编写你自己的自动化 ImageMagick 或 ImageOptim 工具前,你需要安装
Node.js
和 [npm]
(https://docs.npmjs.com/getting-started/installing-node)。
ImageMagick:
ImageMagick
Mac 上的一个简单的 ImageMagick
安装包
GraphicsMagick
(ImageMagick 的一个分叉)
Grunt:
Grunt
简介
Grunt
使用入门
用 Grunt
生成不同分辨率的图片
用于生成多张图片的 grunt-responsive-images
插件
用于响应式图片工作流的 grunt-respimg
插件
脚本编制示例中使用的文件:
convert.sh
(含说明)
Gruntfile.js
(对于 Windows,移除第 7 行:engine: ‘im’,
)
Imager.js:为
BBC 新闻开发的响应式图片加载。
图片处理工具:
ImageOptim
(Mac)
Trimage – 和
ImageOptim 类似 (Windows, Mac, Linux)
ImageAlpha

不知道你注意到没有,在 media
属性使用的语法与CSS媒体(media)特性中使用的语法一样。你可以使用相同的特性,也就是说你可以查询
max-width , min-width , max-height , min-height , orientation
等属性。
看到<picture>这个元素是不是很兴奋,可是不得不提醒你一句,目前来说,这个元素还是有兼容性问题的。
兼容性:兼容性
当然,如果你一定要使用<picture>这个元素,又要在其他浏览器里支持,那你就需要添加一个额外的插件:Picturefill2.0(http://scottjehl.github.io/picturefill/)
<script src=”picturefill.js”></script>

   
这种方法采用的是js脚本,要写多余的逻辑代码修改起来也不是很方便,那有没有声明狮的方法呢,我们把图片声明到浏览器中,由浏览器决定使用哪个图片。这样我们把js脚本或者代码从逻辑中分离出来实现高内聚低耦合。

虽然<picture>很方便,但如果你考虑到兼容性,还是要谨慎使用,不过,我们也有兼容性较好的另外一种处理响应式图片的方法,看下面。
3、img的srcset、sizes属性
当然,<img>元素自身也提供了响应式的属性:srcset
和sizes

3.1 旧版本的srcset属性
在以前,我们是这样用的:
<img src=”width-128px.jpg” srcset=”width-128px.jpg 1x,
width-256px.jpg 2x” /

    (2)我们可以使用srcsize或者srcsize配合size还可以使用

首先在图片库中准备三张图片

这段代码什么意思呢?
浏览器根据屏幕不同的像素密度(x)来显示对应尺寸的图片,也可以说是根据设备的像素比来显示不同的图片。
看图:

奥门威尼斯网址 16

奥门威尼斯网址 17

奥门威尼斯网址 18

srcsize用法

image.png

奥门威尼斯网址 19

    srcset的用法是图片地址
尺寸,这样的描述符浏览器会根据页面宽度不同选择不同的尺寸图片 
浏览器会对当前的环境做一个感知,浏览器会根据不同的环境因素比如网速或者图片的质量来进行考量,这里我们就不关心浏览器是如何去实现这个算法的,我们只要告诉浏览器有哪些图片就可以。

别老是看着“别人的妹子”,请注意红色箭头,DPR就是设备像素比,不同的像素比,会显示不同的图片。
目前屏幕密度有:1x、2x、3x、4x。
3.2 新标准的srcset、sizes属性,w描述符
旧版本的srcset使用多少有些局限性,不过幸好的是到2014年,我们已经有了全新的srcset,而且还多一个size是属性。
使用新的srcset,我们只需要提供图片资源以及断点,浏览器会去自动匹配最佳显示图片。
使用方法如下:
<img src=”width-128.jpg” srcset=”width-128.jpg 128w, width-512.jpg
512w” sizes=”(max-width: 500px) 128px, 512px” />

   
其实srcsize一般都是配合sizes来使用的,我们上面没有写是因为sizes有个默认是100vw,100vw是什么意思呢,v代表的viewpoint而w代表width,而100呢不是具体的数值,是指代的100%,所以100vw是默认视口宽度100%;sizes的使用相当于媒体查询,

奥门威尼斯网址 20

上面这段代码的意思表示:不支持srcset属性时,使用src中的图片,否则浏览器会自动匹配最佳显示图片;sizes
属性的值表示当可视区宽度不大于500像素,则图片宽度显示为128px,其他情况下,图片宽度显示为512px。。

奥门威尼斯网址 21

image.png

奥门威尼斯网址 22

srcset和sizes

奥门威尼斯网址 23

   
(3)我们还可以使用picture来实现自适应,我们也可以使用picture标签,在其中使用媒体查询的方法,在不同的屏幕下加载不同的图片,我们可以根据媒体查询,查询不同的屏幕大小直接来进行加载。其这样实现起来更加的细致。

奥门威尼斯网址 24

注意:如果你用pc浏览器测试这段代码,一定要先进入移动模式,因为一打开页面时可视区大于500px(除非你的电脑是迷你版),会先显示大图片,随后即使你缩小屏幕,小图片虽然会加载,你可以在控制台的“Network”里看到,但是显示的依旧会是大图片,因为前面大图片已经缓存了,而浏览器会自动匹配最佳显示的图片。
srcset用来提供图片资源,sizes
属性的作用类似媒体查询,用来设置图片尺寸的临界点。
sizes=”[media query] [length], [media query] [length]…”

奥门威尼斯网址 25

image.png

要保证使用 sizes
里计算出来的宽度始终是图片所占屏幕宽度(length)。
为什么说sizes
属性的作用类似媒体查询呢?
因为它只是支持部分媒体查询,比如:
(min-width: 400px)

picture

无论图片外面的元素的大小 也无论图片本身的大小 sizes
的大小设置就是当前设备的大小设置。不受到外界样式的干扰

(not (orientation: landscape) )

    注意:

使用媒体查询来完成响应式图片的设计。

( (orientation: landscape) and (min-width:400px) )

   
但是使用picture和srcset都是有兼容性问题的,picture在IE浏览器下面是完全不兼容的,srcset也就是强那么一点点。

奥门威尼斯网址 26

( (orientation: portrait) or (max-width: 500px) )

   
所以我们需要做兼容性处理,这里我们就需要引入一个库Picturefill.js,我们引入这个库就可以直接使用picture这个标签了。

image.png

但它不支持我们明确的定义媒体类型:比如screen或者print等等。
除了使用px外,我们还可以使用em、px、cm、vw…,甚至CSS3的calc
,不能使用百分比。
sizes=”(max-width: 320px) calc(100vw – 20px), 128px”
表示当视区宽度不大于320像素时候,图片宽度为整个视区宽度减去20像素的大小。
兼容性查看:兼容性
3.3 常见的使用场景
(1)如果图片的宽度是整个视口的百分比,那么sizes可以这样设置:
sizes=”80vw”

4.picture标签

(2)假如图片两侧的边距各为10px,我们可以这样设置:
sizes=”calc( 100vw – 20px)”

奥门威尼斯网址 27

(3)如果有一个两侧边距为10px的图片,允许它的最大宽度为500px,我们可以这样设置:
sizes=”( min-width:520px) 500px, calc(100vw – 20px)”

image.png

上面的代码表示当可视区大于520px时,图片宽度为500px,否则宽度为calc(100vw
– 20px)计算的值。

高级设置 针对不同的图片文件进行设置

奥门威尼斯网址 28

image.png

Tip: 给出一个可以支持图片压缩的网站
https://tinypng.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图