您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net借助响应式图片来改进网站图片显示

新葡亰496net借助响应式图片来改进网站图片显示

发布时间:2019-10-22 02:35编辑:新葡亰官网浏览(115)

    新葡亰496net借助响应式图片来改进网站图片显示,响应式广告和响应式图片。Web性能优化系列:借助响应式图片来改进网站图片显示

    2015/06/22 · HTML5新葡亰496net, · 响应式

    本文由 伯乐在线 - yvonne 翻译,黄利民 校稿。未经许可,禁止转载!
    英文出处:deanhume.com。欢迎加入翻译组。

    开始使用 <picture> 元素

    响应式网页设计太棒了,它改变了我们向手机端用户呈现内容的方式,无论用户使用何种尺寸的手机,我们都能够为其提供定制化的体验。响应式网页设计使用起来很灵活,也容易上手。然而,如果没有正确使用,它会对网页性能带来负面影响。

    用于在 PC 端展示的图片对于手机来说太大了。我们知道,在手机设备上大尺寸高分辨率的图片会大大降低页面加载性能。响应式设计和非固定图片(fluid image)在保证正确显示的同时,也保证大图片在页面显示的性能大大提高。Tim Kaldec 对响应式图片的研究表明,使用响应式图片策略最多可以减少图片72%的负担。72%,这是一个相当大的数量。

    过去这些年里,出现了一些响应式图片解决方案,开发人员也习惯了使用这些方案来解决响应式图片问题。但都现在看来,这些方法都有一点hacky的味道。这就是 <picture> 元素被引入的原因。

    新葡亰496net 1

    <picture> 元素作为一种向不同设备输出高性能图片数据的客户端解决方案,目前已经纳入 WHATWG HTML 规范 。为了向大家展示 <picture> 元素的强大,我们一起来看一个简单的例子。

    XHTML

    <picture> <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg"> <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg"> <source srcset="dest/320/tiger.jpg"> <img src="dest/640/tiger.jpg" alt="This picture will load on browsers that don't yet support the element."> <p>This is some accessible text.</p> </picture>

    1
    2
    3
    4
    5
    6
    7
    <picture>
       <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg">
       <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg">
       <source srcset="dest/320/tiger.jpg">
       <img src="dest/640/tiger.jpg" alt="This picture will load on browsers that don't yet support the element.">
       <p>This is some accessible text.</p>
    </picture>

    浏览器在解析上面的 HTML 语句时会根据设备的屏幕分辨率来选取大小最合适的图片。点击这个链接观看实际效果。

    新葡亰496net 2

    从上面的 HTML 代码可以看到, <picture> 元素由一组 <source> 标签组成。<source> 标签里面声明了设备的视口(viewport)宽度以及与之相应尺寸的图片。这样不同设备上的浏览器就可以根据这些信息选取最适合的图片源。这是一个出色的解决方案,因为所有的操作都是在客户端完成,开发者对展现给用户的图片具有控制权。

    值得一提的是,通过设置 <img> 标签的 srcset 属性和 size 属性也可以达到相同的效果。这两个属性由 <img> 标签和 <source> 标签扩展而来,提供一系列图片资源和相应的图片大小。浏览器根据这些信息来选取最合适的图片。假如你不考虑图片的艺术美感,可以使用这种方法。

    XHTML

    <img src="dest/320/tiger.jpg" srcset="dest/1024/tiger.jpg 1024w, dest/640/tiger.jpg 640w, dest/320/tiger.jpg 320w" alt="A TIGER!!!">

    1
    2
    3
    <img src="dest/320/tiger.jpg"
      srcset="dest/1024/tiger.jpg 1024w, dest/640/tiger.jpg 640w, dest/320/tiger.jpg 320w"
      alt="A TIGER!!!">

    如果你还想了解更多关于 <picture> 元素的历史和起源,推荐你读这篇文章。

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

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

    聊聊响应式图片

    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>

    新葡亰496net借助响应式图片来改进网站图片显示,响应式广告和响应式图片。虽然<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)来显示对应尺寸的图片,也可以说是根据设备的像素比来显示不同的图片。

    看图:

    新葡亰496net 3

    新葡亰496net 4

    别老是看着“别人的妹子”,请注意红色箭头,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。。

    新葡亰496net 5

    新葡亰496net 6

    注意:如果你用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)计算的值。

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

    打赏作者

    创建响应式网格视图

    接下来我们来创建一个响应式网格视图。

    首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box

    确保边距和边框包含在元素的宽度和高度间。

    添加如下代码:

    * {
        box-sizing: border-box;
    }
    

    处理图片

    <picture> 元素在网页性能上效果显著,同时也给我们带来很大的便利,问题是,我们怎样去生产这些不同大小的图片呢?假如你需要多份不同的图片,怎样得到这些图片呢?庆幸的是,有一种简单的方法可以解决这个问题。

    使用 Grunt 响应式图片插件可以自动处理、剪裁图片。假如你对 Grunt 任务不熟,也不知道怎样将它引用到你的工程,请参考我之前发表的这篇博文。 Grunt 官网也提供了非常好的教学资源帮助你立刻开始使用它。

    npm install grunt-responsive-images –save-dev

    配置好 Grunt ,并且保证它能在你机器上运行之后,打开你的网站,在命令行里输入以下命令来下载相应的包。

    npm install grunt-responsive-images –save-dev

    接下来你还需要安装 ImageMagick 或 GraphicsMagick 命令行工具,然后配置 gruntfile.js 文件。下面是一个参数配置例子,有很多配置选项,可以根据实际需求设定不同的参数。

    XHTML

    grunt.initConfig({ responsive_images: { myTask: { options: { sizes: [{ width: 320, height: 240 },{ name: 'large', width: 640 },{ name: "large", width: 1024, suffix: "_x2", quality: 60 }] }, files: [{ expand: true, src: ['assets/**.{jpg,gif,png}'], cwd: 'test/', dest: 'tmp/' }] } }, })

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    grunt.initConfig({
      responsive_images: {
        myTask: {
          options: {
            sizes: [{
              width: 320,
              height: 240
            },{
              name: 'large',
              width: 640
            },{
              name: "large",
              width: 1024,
              suffix: "_x2",
              quality: 60
            }]
          },
          files: [{
            expand: true,
            src: ['assets/**.{jpg,gif,png}'],
            cwd: 'test/',
            dest: 'tmp/'
          }]
        }
      },
    })

    通过上面的参数设置,图片将生成 320 像素, 630 像素和 1024 像素的图片,每种像素的图片将放在不同的目录里。

    现在,可以处理图片了。在命令行中运行 Grunt 命令,这个时候,可以看到目录下会新增加三个目录,每个目录中已经存在裁剪好了的图片! Hooray !

    如果还在想什么工具可以自动帮助你生成相关的 HTML 标签的话,这个 Grunt 插件能替你做这些苦差事。把这个插件和 Grunt responsive images 插件结合起来用,会给你带来更多意外惊喜。

    新葡亰496net 7

    <picture>元素

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

    任选一种支付方式

    新葡亰496net 8 新葡亰496net 9

    2 赞 14 收藏 5 评论

    背景图片

    如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变:
    如果 background-size 属性设置为 "100% 100%" ,背景图片将延展覆盖整个区域
    如果 background-size 属性设置为 "cover",则会把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。
    

    OLDER BROWSERS

    关注浏览器的新特性的同时,也要兼顾到老版本的浏览器。目前,只有 Chrome 38 和 Opera 支持 <picture> 元素。好消息是, <picture> 元素已经正式被 WHAT working group 接受,逐渐所有现代浏览器都会支持这个标签。通过 caniuse.com 可以查到,你喜欢的浏览器现在是不是支持它。

    幸好,现在有一个插件可以解决大部分传统浏览器不支持 <picture> 元素的问题。 Filament Group 的团队开发出 picturefill.js 这个文件,这个插件可以使不支持 <picture> 元素的浏览器解析这个标签以及标签相关的属性。这意味着,你今天就可以开始使用 <picture> 元素了!

    要使用这个插件,你需要在你的页面中添加这个 JavaScript 文件。

    XHTML

    <picture> <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg"> <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg"> <source srcset="dest/320/tiger.jpg"> <img src="dest/640/tiger.jpg" alt="This picture loads on non-supporting browsers."> <p>Accessible text.</p> </picture> <script> // Picture element HTML5 shiv for older browsers document.createElement( "picture" ); </script> <script src="picturefill.min.js" async></script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <picture>
       <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg">
       <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg">
       <source srcset="dest/320/tiger.jpg">
       <img src="dest/640/tiger.jpg" alt="This picture loads on non-supporting browsers.">
       <p>Accessible text.</p>
    </picture>
    <script>
    // Picture element HTML5 shiv for older browsers
    document.createElement( "picture" );
    </script>
    <script src="picturefill.min.js" async></script>

    再补充一句,这个插件和 picture 标签的功能是一样的。点击这个链接可以看到实例效果。在 Responsive Images Community Group 网站上还有很多例子。

    image.png

    img的srcset、sizes属性

    关于作者:TGCode

    新葡亰496net 10

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

    新葡亰496net 11

    不同设备显示不同图片

    body {
        background-image: url('img_smallflower.jpg'); 
    }

    /* For width 400px and larger: */
    @media only screen and (min-width: 400px) {
        body { 
            background-image: url('img_flowers.jpg'); 
        }
    }

    可以使用媒体查询的 min-device-width 替代 min-width 属性,它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时,图片大小不会改变。

    /* 设备小于 400px: */
    body {
        background-image: url('img_smallflower.jpg'); 
    }

    /* 设备大于 400px (也等于): */
    @media only screen and (min-device-width: 400px) {
        body { 
            background-image: url('img_flowers.jpg'); 
        }
    }

     

    附注

    我第一次使用 picture 标签的时候,出现了这个错误:

    “<source src> with a <picture> parent is invalid and therefore ignored. Please use <source srcset> instead.”

    这次错误提示信息非常明确,在引用图片资源时不要使用 src 标签,使用 srcset 标签就可以了。

    1 赞 1 收藏 评论

    这里我们选择处理图片的插件是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
    });
    });
    接下来要处理的部分就是响应式图片了 根据不同的浏览器窗口大小进而处理不同的响应式的图片 根据 浏览器窗口大小进而相应图片大小

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

    HTML5 <picture> 元素

    HTML5 的 <picture> 元素可以设置多张图片。

    <picture> 元素类似于 <video> 和 <audio> 元素。可以设备不同的资源,第一个设置的资源为首选使用的:

    <picture>
      <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
      <source srcset="img_flowers.jpg">
      <img src="img_flowers.jpg" alt="Flowers">
    </picture>

    关于作者:yvonne

    新葡亰496net 12

    简介还没来得及写 :) 个人主页 · 我的文章

    新葡亰496net 13

    如何实现响应式图片呢?

    使用img的srcset、sizes

    video

    新葡亰496net 14

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

    使用 max-width 属性

    如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例,但不会超过其原始大小:

    video {
        max-width: 100%;
        height: auto;
    }

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    image.png

    <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(http://scottjehl.github.io/picturefill/)
    <script src="picturefill.js"></script>

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

    虽然<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" /

    新葡亰496net 15

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

    image.png

    新葡亰496net 16

    新葡亰496net 17

    新葡亰496net 18

    别老是看着“别人的妹子”,请注意红色箭头,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" />

    image.png

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

    新葡亰496net 19

    新葡亰496net 20

    新葡亰496net 21

    image.png

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

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

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

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

    (not (orientation: landscape) )

    新葡亰496net 22

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

    image.png

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

    4.picture标签

    但它不支持我们明确的定义媒体类型:比如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"

    新葡亰496net 23

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

    image.png

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

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

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

    新葡亰496net 24

    image.png

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

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net借助响应式图片来改进网站图片显示

    关键词: