快捷搜索:
来自 新京葡娱乐场网址 2019-10-14 11:22 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

依据响应式图片来立异网址图片彰显,响应式广

Web性能优化系列:借助响应式图片来改进网站图片显示

2015/06/22 · HTML5 · 响应式

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

开始使用 <picture> 元素

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

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

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

新京葡娱乐场网址 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 语句时会根据设备的屏幕分辨率来选取大小最合适的图片。点击这个链接观看实际效果。

新京葡娱乐场网址 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> 元素的历史和起源,推荐你读这篇文章新京葡娱乐场网址 ,。

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

处理图片

<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 插件结合起来用,会给你带来更多意外惊喜。

新京葡娱乐场网址 3

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

附注

我第一次使用 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
});
});
接下来要处理的部分就是响应式图片了 根据不同的浏览器窗口大小进而处理不同的响应式的图片 根据 浏览器窗口大小进而相应图片大小

关于作者:yvonne

新京葡娱乐场网址 4

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

新京葡娱乐场网址 5

如何实现响应式图片呢?

新京葡娱乐场网址 6

image.png

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

新京葡娱乐场网址 7

image.png

新京葡娱乐场网址 8

image.png

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:依据响应式图片来立异网址图片彰显,响应式广

关键词: