澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

高dpi图片对于不一致器具的适配方案,图片响应

2019-09-29 作者:澳门新萄京赌场网址   |   浏览(82)

高dpi图片对于不同设备的适配方案

2017/02/18 · CSS · dpi

本文作者: 伯乐在线 - 亚里士朱德 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

英文:html5rocks

原文链接:

背景

众所周知,retina屏的设备像素比是2,而普通屏幕像素比为1,对于图片这种位图像素已定的资源,如果不加以处理的话,要么全都用1倍图,在retina屏上观看就会模糊;要么都是用2倍图,那么在普通屏幕上浏览的时候就会白白浪费流量消耗下载速度。

简单介绍下css像素和位图像素的区别:

  • 无论是retina屏还是普通屏幕,图片展示的区域大小是相同的,这也就是css像素与设备无关。
  • retina屏一个1x1的css像素区域对应着2x2的物理像素,也就是每个css像素宽的区域,在retina屏上是可以再分成两半来显示的,即dpr=2的retina屏上的最小css像素分辨率是0.5px。

理论上,一个位图像素是对应一个物理像素的时候展示完美:

1、假如在retina屏使用1倍图:也就是1个位图大小的区域去用4个物理像素渲染,被分割的位图只能就近取色,就会导致图片显示模糊;
2、同样的,如果在普通屏幕上使用2x图,那么就会一个物理像素对应4个位图像素,就会通过一定算法,给该物理像素一个近似的值,(downsampling过程),图片不会模糊,但会缺失一些锐度。

目前主流方案(使用二倍图):

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

而图片展示的情况在如今也是应用的越来越多,所以要找到两者完美匹配的方法,也就是——响应式图片。

图像(image)

本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思路,以及一些web图像的应用技巧。

介绍

在当今日益复杂的设备领域,屏幕的可用像素密度已经变得非常广泛。既有非常高分辨率的显示设备,也有远远落后的设备。应用程序开发人员需要支持一系列像素密度的显示设备,这可能是相当具有挑战性的。

在移动web端,情况变得更加复杂:

  • 各种各样的设备具有不同的外形尺寸。
  • 受限的网络带宽和电池寿命。
    在图片方面,Web应用程序开发人员的目标是尽可能高效地提供最佳质量的图像。
    本文将介绍适用于现在和不久将来的有效技术来达到这一效果。

本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思路,以及一些web图像的应用技巧。

CSS解决方案——媒体查询

最大缺点:只能用于css,所以也就限定了只有background中的图片可以使用此方法。
简介一下:

@media 
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (-min-moz-device-pixel-ratio:2),//版本低于16的Firefox
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi){
...
}

像七牛这样专业的图片处理应用都可以根据需求生成一倍图,这样对于不同分辨率的显示器,也可以使用不同分辨率的图片。另外的不足是使用媒体查询多了不少代码,个中利弊,具体情况下再权衡吧。

resolution :定义设备的分辨率。

图片 1

resolution兼容性

dppx:也是设备像素比,和dpr一样。
dpi:(Dots Per Inch)每英寸点数。
1dppx=96dpi
【小科普:1参考像素即为从一臂之遥看解析度为96DPI的设备输出即1英寸96点)时,1点(即1/6英寸)的视角。 】

另外,在最新的以webkit为内核的浏览器中,支持支持CSS4的background-image新规范草案image-set,在移动端也勉强可以接受吧。

图片 2

image-set属性兼容性

selector {
  background-image: url(no-image-set.png);
  background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
}

不支持image-set的浏览器会解析background-image中的背景图像;支持image-set的浏览器就会根据是否为retina屏选择相应的背景图,因此这个方案是可以实现向下兼容的。

常用的图像文件存储格式:
  1. 响应式图像的应用与回退

如果可能,尽量避免使用图片

打开这个蠕虫之前,请记住,Web有许多强大的技术,主要是分辨率和DPI独立。 具体来说,由于web的自动像素缩放功能(通过devicePixelRatio),文本,SVG和大多数CSS将“只工作”。

也就是说,你不能总是回避使用图片。
例如,当你在处理一些图片资源的时候,很难用纯svg或css来处理。
把图片自动转为svg并无太大意义,因为只是把图片简单的放大,看起来会比较模糊。

1.响应式图像的应用与回退

HTML解决方案——srcset sizes w标识符

这是HTML5推出的属性,srcset可以根据显示器分辨率智能加载最佳显示的图片。

图片 3

srcset属性兼容性

<img class="image" 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">

srcset :指向提供的图片资源,为用户提供了一种内嵌简单的分辨率媒体查询功能;

sizes : 指定图片宽度,不能使用百分比,可使用:
px,
vw(100vw就是占满父容器宽度,所以要求图片居中宽度为百分比的地方可以使用vw单位,如 sizes=80vw),
calc运算(适用于两边距离固定的情况,如sizes="calc(100vw-20px)"),
媒体查询(如sizes="(min-width:360px) 340px,128px")。

而且最重要的是,sizes属性产生的初衷就是可以在html中实现简单的媒体查询功能,来适应越来越大规模的响应式网站开发。

那么w是个啥?
w是一个衡量宽度的标识符,一定要对应图片的真实宽度,这会使得浏览器正确的选择图片,如果w值和图片宽度不对应时,实际渲染是会有问题的。

拿这段代码来说:

<img class="image" src="test-240.jpg"   
    srcset="test-240.jpg 240w, test-480.jpg 480w, test-720.jpg 720w" 
    sizes="240px"> 

sizes=240px,也就是图片宽度设置为了240px,那么:
当该屏幕dpr==1时,就会选用test-240.jpg;

图片 4

dpr==1

dpr==2时,可渲染的位图像素宽度就变为了480px,也就选用了test-480.jpg;

图片 5

dpr==2

dpr==3时,能渲染的位图像素宽度变为了720px,那么浏览器去选择最适合的图片,也就是test-720.jpg;

图片 6

dpr==3

关于w值设置如果不正确,会出现什么后果,我在这篇文章中写了详细的案例。

现代浏览器对该属性的支持是越来越多了,这个方案应该会是个潮流。
在移动端andriod browser的支持度实在是太差劲了,PC端对于一些fashion的网址试一试。

CDR格式

该格式是CoreDraw软件专用的一种图形文件存储格式;

特点:应用简单,上手容易,性能表现良好难点:lazyload实现

高DPI图片技术概览

有许多技术用于解决尽可能快地显示最佳质量图像的问题,大致分为两类:

  • 单张图片进行质量优化
  • 多张图片选择性展示

单图片解决方案:对一张图片进行巧妙地处理。
缺点就是不可避免地牺牲在某些设备上的性能,因为即使在具有较低DPI的旧设备上也将下载高DPI的图片。
包含以下几种实现方式:

  • 高压缩的高DPI图片
  • webp图片格式
  • 渐进式的图片格式

多图片解决方案:使用多张图片,选择最优的图片进行显示。这种方式会额外增加开发人员的工作量,因为针对每个图片都要创建多个版本,并使用最优的选择策略。一些可选的方式:

  • Javascript
  • 服务端转发
  • css媒体查询
  • 利用浏览器内置特性(image-set(), sercset)

特点:应用简单,上手容易,性能表现良好

javascript解决方案

  • 基于jquery的HiSRC插件,可以基于网速和是否为retina屏来显示图片。
<div class="hisrc">
 <img src="placehold.it/200x100.png" data-1x="placehold.it/400x200.png" data-2x="placehold.it/800x400.png">
</div>

然后调用hisrc的方法

$(document).ready(function(){
  $(".hisrc img").hisrc();
})

官方文档是这样介绍HiSRC如何工作的:正常情况下会直接加载src中的资源;如果网速较好就会加载data-1x中的资源替代原来src的文件;如果设备像素比又比较高的话,就会加载data-2x中的资源代替原来的src中的图片。

它还提供选项允许我们设置一个网速基准。这个html的结构让我不由得想起了lazyload的解决方案,这俩真的是太相似了,我们完全可以给src中放一个统一的占位图,然后再去选择加载适合浏览器展示的图片。

另外还有用于rails的gem包:hisrc-rails.
高dpi图片对于不一致器具的适配方案,图片响应式实施方案。所以也可以写成这样

responsive_image_tag("http://placehold.it/100x100", :'1x' => "http://placehold.it/200x200", :'2x' => "http://placehold.it/400x400")

对于这个方案,个人觉得在工程上应用是可以期待的,因为图片都放在七牛那儿,可以图片上传成功后从2倍图中处理出1倍图,然后再向img标签中添加data-1x,data-2x这样的属性,不过呢,这好像把工作几乎全部添加给了后台的哥们儿,想到这儿,好像应用的难度瞬间增大了呢。。。

  • picturefill方案,依赖picturefill.js这个脚本文件,并且它还对结构有一定的要求,对格式有特定的要求,最开始这个来自于对<picture>的支持。
<picture>
     <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)"> 
     <source srcset="default.jpg, default_retina.jpg 2x"> 
     <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

图片 7

<picture> element兼容性

看到该结构要写这么多代码,多少就会产生一点心理抗拒,但是呢本着技术进步的态度,还是再进一步研究下。
由于picture元素是html5的新产物,兼容性上还不是特别好,要想大规模使用可以配合picturefill.js,另外现在picturefill也支持有srcset属性的img。
这里有picturefill在应用<picture>的页面中存在的一些问题 。
//主要是IE9和安卓2.3上存在一些问题,不过IE9通过hack方法也是可以挽救的。

最后,两句话介绍一下服务端解决方案:
Adaptive Images:最大缺点基于PHP和Apache。它是拦截通过服务器的图片请求来生成图片,如果图片是通过第三方的分网网络的也就用不上了。

AI格式

该格式是Illustrator软件专用的一种图形文件存储格式;

根据不同设备,不同分辨率,不同像素比使用的响应式图像,常用的有两种场景:

高压缩的高DPI图片

图片资源通常占网站下载带宽的60%,如果提供高DPI图片给所有客户端,这一占比将继续扩大。那么具体情况如何?

我用了一些测试脚本来生成图像质量分别为90%,50%,20%的1x图和2x图:

图片 8

从这个小的不太科学的样本来看,似乎压缩大图像提供了一个良好的质量尺寸权衡。
对于我们的眼睛,高压缩比的2x图像实际上看起来比未压缩的1x图片更好。

当然,向2x设备提供低质量,高压缩比的2x图片远不如提供高质量的图片,并且上述方法将导致图像质量损失。
如果你比较90%图像质量和20%图像质量的图片,你会感到明显的失真和颗粒感。
在对图片质量有较高要求的情况下(例如,照片查看器应用程序),或者对于不愿意妥协的应用程序开发人员来说,这些图片是不可接受的。

上述比较使用了未压缩的JPEG图片。值得注意的是,在广泛使用的图像格式(JPEG,PNG,GIF)之间还需要进行更多的折衷和取舍,这使我们选择了另一种处理方式…

难点:lazyload实现

综上

不过既然picturefill也支持srcset,那么比较srcset属性和picture元素,浏览器对srcset属性的支持是更好的。所以srcset sizes w的img元素配合picturefill.js效果应该会不错。只是很可惜,这样的应用案例还没有找到。不过即使picturefill.js不能完美配合srcset方案,仅仅使用srcset sizes w就可以应付主流现代浏览器了,重要的是,这个方案完全也是向下兼容的啊。

DXF格式

是AutoCAD软件的图形文件格式,该格式以ASCII方式存储图形,可以被CorelDraw、3Dmax等软件调用和编辑。

1.1 固定尺寸图像

webp图片格式

WebP是一个非常引人注目的图像格式,压缩非常好,同时保持高图像保真度。 当然它并不是所有情况下可用!

一种方法是通过JavaScript检查是否支持WebP。
通过data-uri加载1x图像,等待加载或错误事件触发,然后验证大小是否正确。 Modernizr附带了这样的功能检测脚本,可通过Modernizr.webp获得。

更好的实现方式是在css中使用image()函数。如果你有webp或者jpeg格式的图片,可以写成:

CSS

#pic { background: image("foo.webp", "foo.jpg"); }

1
2
3
#pic {
  background: image("foo.webp", "foo.jpg");
}

这种方法有一些问题。
首先,image()没有被广泛实现。
第二,虽然WebP压缩打破了JPEG的压缩极限,它仍然是一个相对性的改进 – 体积减少不到30%。
因此,单独的WebP不足以解决高DPI问题。

根据不同设备,不同分辨率,不同像素比使用的响应式图像,常用的有两种场景:

参考:

http://www.tuicool.com/articles/ZraMfa
http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/
http://www.w3cplus.com/responsive/understanding-responsive-web-design-how-to-manage-images.html
http://scottjehl.github.io/picturefill
https://www.ze3kr.com/2015/08/using-srcset/#section-6

EPS格式

该格式是一种通用格式,可用于矢量图形,像素图像以及文本的编码,即在一个文件中同时记录图形、图像与文字。
图像文件格式及处理软件在印前领域最为常用的图像处理软件是Adobe公司的Photoshop软件,该软件广泛地应用于各领域的图像处理工作中,几乎占据了计算机图像处理软件的统治地位。
图像是由一系列排列有序的像素组成的。在计算机中常用的存储格式有:BMPTIFFEPSJPEGGIFPSDPDF等格式。其中

基于设备像素比选择,很多网站logo就是固定宽度图像的一个例子,不管viewport的宽度如何,始终保持相同的宽度。

渐进式图片格式

渐进图像格式,如JPEG 2000,Progressive JPEG,Progressive PNG和GIF的好处就是在图片完全加载之前能看到图片。
这可能会产生一些额外的开销。 Jeff Atwood声称渐进式图片“增加了约20%的PNG图像的大小,和约10%的JPEG和GIF图像的大小”。
然而,Stoyan Stefanov声称,对于大文件,渐进式图片更高效(在大多数情况下)。

乍一看,渐进图像看起来非常有前途,能尽可能快地提供最好的质量图片。
现实是,浏览器一旦知道额外的数据无法提高图片质量(所有保真度的改进是基于子像素的),可能停止继续下载和解码图片。

虽然连接容易终止,但是重新启动它们通常是昂贵的。
对于具有许多图像的站点,最有效的方法是保持单个HTTP连接活动,尽可能长时间地重复使用它。
一张图片下载完毕,浏览器将关闭当前连接,然后再创建新的连接,这在弱网络环境中可能真的很慢。

对此的一种解决方法是使用HTTP Range请求,它允许浏览器指定要提取的字节范围。
智能浏览器可以做出HEAD请求来获取标题,处理它,决定实际需要多少图片然后获取。
不幸的是,HTTP Rang在Web服务器中支持不足,使得这种方法不切实际。

最后,这种方法的一个明显的限制是,你不能选择图像的分辨率,只能选择相同图像的不同的保真度。因此不能满足“艺术级别”的用户体验。

1.1固定尺寸图像

BMP格式

是window中的标准图像文件格式,它以独立于设备的方法描述位图,各种常用的图形图像软件都可以对该格式的图像文件进行编辑和处理。

在dom里图像与在css里的图像写法如下面的例子

用javascript选择图片进行加载

最明显的方法是在客户端中使用JavaScript来决定加载哪一种图片。
这种方法需要获取浏览器的信息来进行判断。
可以通过 window.devicePixelRatio 获取设备像素比率,获取屏幕宽度和高度,甚至可能通过navigator.connection或发出假请求,如foresight.js库做一些网络连接嗅探。
收集所有这些信息后再决定要加载哪个图片。

有大约一百万个JavaScript库做上面的事情,不幸的是没有一个是特别好用的。

这种方法的一个大缺点是,使用JavaScript意味着将延迟图像加载,直到前瞻解析器完成。
这实质上意味着在pageload事件触发之前,图片甚至不会开始下载。

基于设备像素比选择,很多网站logo就是固定宽度图像的一个例子,不管viewport的宽度如何,始终保持相同的宽度。

TIFF格式

该格式是常用的位图图像格式,TIFF位图可具有任何大小的尺寸和分辨率,用于打印、印刷输出的图像建议存储为该格式;

<img srcset="test.jpg 1.5x, test2.jpg 2x" src="test.jpg" 768.jpg 768w, 1200.jpg 1200w, 1920.jpg 1920w" sizes=" (max-width: 360px) 100vw, (max-width: 768px) 90vw, (max-width: 1980px) 80vw, 768px" src="360.jpg" src="/uploads/allimg/170502/1409454491-0.png" width="393" height="293" />

由服务端选择图片

可以通过为每个图片编写自定义请求处理程序来处理。
这样的处理程序将基于User-Agent(中继到服务器的唯一信息)检查Retina支持。
然后,根据服务器端逻辑决定是否要提供高DPI图片来加载适当的资产(根据一些已知的惯例命名)。

不幸的是,用户代理不一定提供足够的信息来决定设备是否应该接收高质量或低质量的图像。
此外,与User-Agent相关的任何内容都可能成为被攻击的漏洞,应该尽量避免使用。

在dom里图像与在css里的图像写法如下面的例子

JPEG格式

是一种高效的压缩格式,可对图像进行大幅度的压缩,最大限度地节约网络资源,提高传输速度,因此用于网络传输的图像,一般存储为该格式。

在iphone4(320)下,图像宽度和我们设置的100vw一致,但是为什么浏览器选择了768的图像而没有选择360的?因为4的dpr是2呀^_^,浏览器很智能的选择了质量最合适的768.

用css媒体查询

CSS媒体查询可以让浏览器知道你的意图并加载正确的的代码。 除了最常见的媒体查询使用 – 匹配设备大小 – 还可以匹配devicePixelRatio。 相关联的媒体查询是device-pixel-ratio,并且有min和max值可以设置。 如果要加载高DPI图片,且设备像素比率超过阈值,则可以执行以下操作:

CSS

#my-image { background: (low.png); } @media only screen and (min-device-pixel-ratio: 1.5) { #my-image { background: (high.png); } }

1
2
3
4
5
#my-image { background: (low.png); }
 
@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}

使用这种方法,可以重获前瞻性解析的好处,而JS解决方案失去了它。
还可以灵活地选择响应断点(例如,可以加载低,中和高DPI的图片),当某些图片请求出错的时候。

不幸的是,它仍然有点笨拙,还需要编写且看起来奇怪的css。 此外,此方法仅限于CSS属性,因此无法设置。所有的图片必须都是背景元素。

background-image:image-set(url(test.jpg)1x,url(test2.jpg)2x);

GIF格式

该格式可在各种图像处理软件中通用,是经过压缩的文件格式,因此一般占用空间较小,适合于网络传输,一般常用于存储动画效果图片。

再看一下6p(414),很听话的按照我们的设置,显示了90vw。因为他的dpr更高,浏览器聪明的选择了1200质量的图像。

使用新浏览器特性

最近有很多关于web平台支持的高DPI图片问题的讨论。 苹果最近把image-set()这个CSS函数添加到了WebKit。 因此,Safari和Chrome都支持它。 由于它是一个CSS函数,image-set()没有解决标签的问题。 srcset属性解决了这个问题, 下面将更深入地讨论image-set和srcset。

1.2不固定尺寸图像

PSD格式

该格式是Photoshop软件中使用的一种标准图像文件格式,可以保留图像的图层信息、通道蒙版信息等,便于后续修改和特效制作。一般在Photoshop中制作和处理的图像建议存储为该格式,以最大限度地保存数据信息,待制作完成后再转换成其它图像文件格式,进行后续的排版、拼版和输出工作。

图片 9

image-set

image-set 函数使用非常简单,在webkit下需要添加前缀:

CSS

background-image: -webkit-image-set( url(icon1x.jpg) 1x, url(icon2x.jpg) 2x );

1
2
3
4
background-image:  -webkit-image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

它将告诉浏览器有两张图片可选。一张是1x图,一张是2x图。然后浏览器会根据一系列因素来自动选择合适的图片加载。

另外浏览器将会子自动缩放对应的图片大小进行加载。

除了设置 1x,1.5x或Nx之外,还可以指定其它设备像素密度。

这种方式比较理想,除开在那些不支持 image-set函数的浏览器上(将不显示任何图片!这太悲剧了,所以需要备用策略)。

CSS

background-image: url(icon1x.jpg); background-image: -webkit-image-set( url(icon1x.jpg) 1x, url(icon2x.jpg) 2x ); background-image: image-set( url(icon1x.jpg) 1x, url(icon2x.jpg) 2x );

1
2
3
4
5
6
7
8
9
10
background-image: url(icon1x.jpg);
background-image: -webkit-image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);
 
background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

支持image-set函数的浏览器将选择图片进行加载,那些不支持的将加载1x图片。
明显的缺陷就是在不支持image-set函数的浏览器上只会加载1x图片。

与内容相关的图片,在需要响应式的时候,它们的大小往往并不是不变的,会随viewport改变,对于这类图像,也有两种常用的处理方式

PDF格式

又称可移植(或可携带)文件格式,具有跨平台的特性,并包括对专业的制版和印刷生产有效的控制信息,可以作为印前领域通用的文件格式。

这里我们可以欺骗一下浏览器:

srcset

XHTML

<img alt="my awesome image" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

1
2
3
<img alt="my awesome image"
  src="banner.jpeg"
  srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

如上所示,除了image-set提供的x声明之外,srcset元素还接受对应于视口大小的w和h值,试图提供最相关的版本。
上面将为banner-phone.jpeg提供视口宽度在640像素以下的设备,banner-phone-HD.jpeg到小屏幕高DPI设备,banner-HD.jpeg到高DPI设备,屏幕大于640px,以及banner.jpeg 到一切。

因为img元素的srcset属性在大多数浏览器中没有实现,所以你可能很容易想到用带有背景的

替换img元素,并使用image-set函数。这种方式可以正常显示,但缺点就是,标签是具有语义的,使用div降低了爬虫的可访问性。

1.2.1 我们使用srcset搭配w描述符以及sizes属性 。

WEB 图形开发

现代网站和应用需要呈现大量图片。展示静态图片可以使用简单的HTML标签<img>,
也可以采用css样式中的background-image属性。与此同时,你也能绘制出动态图像,或者是对图像进行巧妙处理。

360.jpg 1200w,1200.jpg 9999w

结论

没有解决高DPI图片问题的银弹。

最简单的解决方案是完全避免图像,选择SVG和CSS。 但是,这并不现实,特别是如果网站上有高品质的图片。

JS,CSS和使用服务器端的方法都有自己的优点和缺点。 然而,最有希望的方法是利用新的浏览器功能。 虽然浏览器对image-set和srcset的支持仍然不完整。

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

打赏作者

w描述符告诉浏览器列表中的每个图象的质量。sizes属性是一个包含两个值的,由逗号分隔的列表。根据最新规范,如果srcset中任何图像使用了w描述符,那么必须要设置sizes属性。

2D图像

使用canvas来画图
<canvas>是一个可以使用脚本(通常为JavaScript)在其中绘制图形的HTML元素。
SVG
可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用来描述二位矢量图形的XML标记语言。简单地说,SVG面向图形,XHTML面向文本。让你可以用一系列矢量(线条)和形状来描绘图像,无论尺寸多大他们都可以平滑缩放。

我们把360的图像,骗浏览器说这是1200的,然后把原本1200的扔天上去

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

任选一种支付方式

图片 10 图片 11

1 赞 2 收藏 评论

sizes属性有两个值:第一个是媒体条件;第二个是源图尺寸值,在特定媒体条件下,此值决定了图片的宽度。

3D图像

WebGL
WebGL 通过引用一种符合 OpenGL ES 2.0规范的API,将 3D 图形引入 Web 中
开启WebGL(即Web 3D图像API)历程的指南。这项技术可帮助你在Web内容中使用标准的OpenGL ES。


图片 12

关于作者:亚里士朱德

图片 13

微信公众号“web学习社”;js全栈工程师,熟悉node.js、mongoDB。开发者头条top10专栏作者慕课网签约讲师个人博客:yalishizhude.github.io 个人主页 · 我的文章 · 19 ·     

图片 14

比如:

web前端开发常用的几种图片格式及其使用规范

矢量图是通过组成图形的一些基本元素,如点、线、面,边框,填充色等信息通过计算的方式来显示图形的。一般来说矢量图表示的是几何图形,文件相对较小,并且放大缩小不会失真。

这里有一点要注意的是web开发中用到的图片都不是矢量图,即使是一个三角形,只有一个边框,都是位图。

那么矢量图在哪里有用到呢?

我目前的知识池就知道一个图标字体,比如 font-awesome

位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图,只不过每个拼块都是一个纯色的像素点。位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大,放大和缩小图像会失真。

目前在前端的开发中常用的图片格式有三种:jpg,png,gif。这些都是位图。

浏览器果然上当了,他把360的图当成1200的来用了。这里可能有些疑问,图像的宽度为什么不是90vw了哪?因为浏览器被骗了但是自己却不知道,他依然按照1200的图像,去适配dpr。414*90%*(360/1200)约等于111.7。这种方式很智能,浏览器去根据你的sizes,从w列表里选择最适合的图像来调用显示。正因为他太智能了,在实际操作中可控性较差,有些我们想精确控制的图像显示,有时候并不能如意。而且在做lazyload的时候要处理的东西也比较复杂。

768.jpg 768w,

有损压缩和无损压缩

这个时候可以考虑另外一种方式。

1200.jpg 1200w,

有损压缩

是对图像数据进行处理,去掉那些图像上会被人眼忽略的细节,然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量,又不会影响图像的还原效果。

JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。

我们在保存图片为jpg格式时,会有一个品质选项

图片 15

这里指的就是对图片的损耗程度,如果压缩的话一般选择品质在60-80之间,60以下图片失真会很严重。

1.2.2.picture元素,可精确把控

1920.jpg 1920w"

无损压缩

PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的,哪些是不同的,然后把这些相同的数据信息进行压缩记录,(例如一片蓝色的天空之需要记录起点和终点的位置就可以了),而把不同的数据另外保存(例如天空上的白云和渐变等数据)。

这里要说明的是,无损压缩只是一种相对的“无损”压缩,并不是说无论如何压缩图片都不会失真。这点在PNG8中体现的尤为明显。PNG8最多只能索引256种颜色,所以在图像上出现的颜色数量大于我们可以保存的颜色数量时,我们就不能真实的记录和还原图像了。

picture元素就像是图像和其源的容器。浏览器仍然需要img元素,用来表明需要加载图片,如果没有img,那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。

sizes="

1.GIF

先简单说一下GIF吧,GIF是一种正在逐渐被抛弃的图片格式。PNG格式的出现就是为了替代它。PNG 8除了不支持动画外,PNG8有GIF所有的特点,但是比GIF更加具有优势的是它支持alpha透明和更优的压缩(GIF仅支持索引透明)。

但是gif在网上还是有一席之地的,比如在贴吧或者qq群里常看到的动画图片,用的都是gif。

当图片颜色简单到一定程度,大小小到一定程度的时候,gif格式图片大小要小于png8。比如一个1*1像素的纯黑色点,在PNG8下是124byte,在GIF下是43byte。

适用场景为:在一个精确特定的转效点(breakpoint)需要显示一个特定的图像时。使用picture元素选择图像,不会有歧义,理解起来也更直观。

(max-width: 360px) 100vw,

2.JPG

优缺点:

支持摄影图像或写实图像的高级压缩,并且可利用压缩比例控制图像文件大小。
有损压缩会使图像数据质量下降,并且在编辑和重新保存JPG格式图像时,这种下降损失会累积。
JPG和PNG8都适合颜色较少的图片,因为JPG在栅格化时精确记录少数点,其它点用差值补齐。但是当图像颜色数少于一定值比如256的时候,PNG8可能更合适
JPG不适合具有大块颜色相近的区域或亮度("锐度")差异十分明显的较简单的图片。
JPG在存储摄影或写实图像一般能达到最佳的压缩效果,比如网站的背景图,轮播图,用户头像等等。

<picture> <source media="(min-width: 960px)" srcset=960.jpg"> <source media="(min-width: 768px)" srcset="768.jpg"> <img src="360.jpg" target="_blank"> 里面使用较多

(max-width: 768px) 90vw,

3 PNG

这里PNG放在最后说,PNG可以细分为三种格式:PNG8,PNG24,PNG32。

后面的数字代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色,而24则代表2的24次方大概有1600多万色。

关于透明:

PNG8支持索引透明和alpha透明
PNG24不支持透明;
而PNG32在24位的PNG基础上增加了8位(256阶)的alpha通道透明,也就是说可以存储从完全透明到完全不透明一共256个层级的透明度(即所谓的半透明)。
你可能要问了,我保存是PNG-24格式,为什么还有透明呢?

其实在你勾选了透明度选项之后,你保存的格式就是PNG-32了,只是ps没有提示你罢了。

优缺点:

能在保证最不失真的情况下尽可能压缩图像文件的大小。
PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。
对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。
1,少用图片元素,尽量用css3代替

比如圆角,提示框,不会二次渲染的元素的阴影。关于css3的filter属性,在移动端并不推荐使用,虽然会节省图片的空间,但是 1、渲染会消耗性能,导致页面加载反而变慢;2、andorid系统在4.0以上版本才支持。

2,尽量少用png32格式,太大了=。=

在某些情况下,如果损失一定的视觉可以获得性能较大的提升,可以和设计师协商去掉一些效果。

3, JPG适合摄影图像或写实图像,同时也适合颜色较少图像;

PNG8 适合所含颜色很少(少于256)、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片;

PNG32适合图片较为复杂且有透明效果且透明效果无法用css来实现的情况。

4, 如果页面中有较多的小icon,首先考虑使用webfont,如果webfont不能满足需求,必须使用css sprite将图片合并,来压缩总体图片的大小,同时减少页面请求提高访问速度。

也不需要去特意做回退处理,当浏览器不支持的时候就直接读取img标签。对于懒加载的回退,我选择判断IE 7-8直接url给他。

(max-width: 1980px) 80vw,

如何在同一个网站,对不同设备使用不同图像源

HTML 5.1规范草案
基于设备像素比(device-pixel-radio)选择
基于viewport选择
基于美术设计(Art direction)选择
基于图像格式选择

该规范中,img元素增加了两个新属性:srcset和sizes。srcset用来声明一组图像源,浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度,描述符w表示图像的宽度;浏览器使用这些信息从列表中选择合适的图像。sizes属性为浏览器提供将要显示图像的尺寸信息,srcset使用w描述符时必须包含此属性。这种方法尤其适用于可变宽度的图像,我将在后面详细讨论。

我们现在可以根据用户的viewport,提供不同质量或art direction的图像,无需借助复杂的服务器端设置。响应式图像将成为HTML规范的重要组成部分,所有浏览器终将都会支持此解决方案

  1. 特殊格式的图像应用与回退

768px"

1.1 固定尺寸图像

在dom里图像与在css里的图像写法如下面的例子

img srcset="test.jpg 1.5x, test2.jpg 2x" src="test.jpg" alt="图片 16" />

background-image: image-set(url(test.jpg) 1x,url(test2.jpg) 2x);

特点:体积优化效果显著难点:兼容性掌控

src="360.jpg"alt="">

1.2 不固定尺寸图像

上面picture元素还可以提供 基于图片格式选择。

我们来逐条读这一个img标签的信息

1.2.1 我们使用srcset搭配w描述符以及sizes属性 。

w描述符告诉浏览器列表中的每个图象的质量。sizes属性是一个包含两个值的,由逗号分隔的列表。根据最新规范,如果srcset中任何图像使用了w描述符,那么必须要设置sizes属性。
sizes属性有两个值:第一个是媒体条件;第二个是源图尺寸值,在特定媒体条件下,此值决定了图片的宽度。
比如:

![](360.jpg)

我们来逐条读这一个img标签的信息
srcset,我们给浏览器准备了四个质量的图像,分别为360 768 1200 1920
sizes,我们来告诉浏览器,在不同的环境下图像的宽度
当视口不大于360的时候,图像显示宽度为100vw,当视口不大于768的时候,图像显示宽度为90vw,以此类推。
最后一个src作为默认图像url引入,并且是天然的回退方案,当浏览器不认识以上属性的时候,直接读取src渲染。
1.2.2.picture元素,可精确把控
picture元素就像是图像和其源的容器。浏览器仍然需要img元素,用来表明需要加载图片,如果没有img,那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。
适用场景为:在一个精确特定的转效点(breakpoint)需要显示一个特定的图像时。使用picture元素选择图像,不会有歧义,理解起来也更直观。<picture><source media="(min-width: 960px)" srcset=960.jpg"><source media="(min-width: 768px)" srcset="768.jpg">

图片 17

</picture>
在本例中,当viewport大于960像素时,会加载图像960的图像。当viewport宽度大于768像素时,浏览器会加载768的。而当宽度小于768像素时,加载默认图像360。
而且这个写法的懒加载非常好处理,只需要在传统的lazyload策略上稍加改进
data-src
data-srcset
在加载到的时候更换为
src
srcset
就轻松解决了。
http://snghr.tencent.com 里面使用较多
也不需要去特意做回退处理,当浏览器不支持的时候就直接读取img标签。对于懒加载的回退,我选择判断IE 7-8直接url给他。

  1. 特殊格式的图像应用与回退
    特点:体积优化效果显著
    难点:兼容性掌控
    上面picture元素还可以提供基于图片格式选择。

    有一些图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错,但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错,但只有Chrome和Opera原声支持。JPEG-XR,最初被称为高清照片,是微软发布的一个专有图像格式,仅Internet Explorer支持<picture><source type="image/vnd.ms-photo" src="test.jxr"><source type="image/jp2" src="test.jp2"><source type="image/webp" src="test.webp">

    图片 18

    </picture>
    source的type属性用来指定每个图像的MIME类型,浏览器会选择第一个含有其支持的MIME类型的源。源的顺序是至关重要的,如果浏览器无法识别所有的图象类型,它会回退至原来的img元素。
    但是目前这些格式的支持多数不会直接这么做,因为代码会有些冗余难看,有判断浏览器ua输出不同dom或者样式的,也有服务端直接输出的。服务端直接输出,或者CDN做特殊处理,进行无感知格式切换,同时预留url和拒绝的接口,处理起来更灵活,省时省力,例如我们的:

    图片 19

服务端根据浏览器的请求头,返回不同的图像格式,对于X5内核还可以支持sharpP。
  1. SVG应用
    难点:变色方案,响应式定位计算
    上面这个source的type属性还支持另一种我们更常用的图像格式,SVG。
    说起SVG,这是个出现频率比webp更高的图像格式了,他有着比iconfont更多的优点,所以现在web上正在大量的应用。
    优点:
  2. SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能力,它还具备了传统图片没有的矢量功能,可适配任何高清屏。
  3. 可读性好,有利于SEO与无障碍
    与iconfont对比
  4. 渲染方式不同
    关于渲染方式,之前欧文同学的文章已经讲述的很清楚,这里不多做叙述(https://isux.tencent.com/svg-icon-part-one.html),无论黑白渲染,灰度渲染,次像素渲染,还是DirectWrite 或 GDI 渲染,既然iconfont他是一个字体,就难逃出现锯齿的命运,特别是在一倍屏幕下的渲染。
  5. icon font只能支持单色
    icon font做为字体无法支持多色图形,这就对设计造成了许多限制,因此这也成为了icon font的一个瓶颈。
  6. icon font可读性不好
    icon font主要在页面用Unicode符号调用对应的图标,这种方式不管是浏览器,搜索引擎和对无障碍方面的能力都没有SVG好
    在对比完之前,可能有同学就会问,SVG和iconfont对比有个致命的缺点,就是换色.
    比如hover换色,iconfont只要写个颜色就好了,SVG是不是需要做两个颜色的图?这也是SVG图像应用我们解决的一个难点之一
    SVG换色,最初我试过三个方案
    一是mask-image属性,他的优点是简单粗暴,直接用css来mask这个svg图形来进行换色,缺点很明显就是兼容性了,除去兼容性,还是很好用的。
    demo:
background: #ff6600;
-webkit-mask:center no-repeat;
-webkit-mask-image: url(qq-logo.svg);

查看demo
二是通过SVG滤镜来实现,优点是效果更好,缺点除了兼容性,还需要额外的脚本配合。关于滤镜换色的详细说明在我上一篇文章里有详细介绍以及demo
查看文章
三是我们最终选择的底层无感知换色的方案,把修改颜色的脚本集成到了我们的工作流里,我们在写css的时候,遇到svg需要换色的地方,只需要

background-image: url(test.svg?fill=#ffffff)

SVG应用的另一个难点,就是作为背景图响应式渲染,雪碧图的background-position和background-size 的计算,这个其实也是其他图像都会存在的一个难点。
我的导师 wenju 之前发过这个计算公式相关的文章:
百分比值()是背景图相对于背景定位区(background positioning area)的百分比,可以控制在容器元素内仅显示Sprites图的部分内容。比如下图中,Sprites图是由四张图像拼成的,要想在容器内仅显示第一张图像,background-size的值应该多少呢?

图片 20

我们仅需要Sprites图的1/4显示在容器内,那么Sprites图与容器的比例应该是4:1,计算公式为: background-size : ( Sprites width / image width) (Sprites height / image height)

图片 21

如何计算background-position
我们已知的信息如下:
容器元素的尺寸:elW * elH
单张图片的尺寸:imgW * imgH

Sprites图片的尺寸:spritesW * spritesH
单张图片在Sprites图上的位置:imgPosX, imgPosY

我们假设:
点的位置为 (x, y)容器上的(x, y)点与容器左上角的距离为 cX, cYSprites图上的(x, y)点与本张图片左上角的距离为 sX, sY
如果要把某张图片完全显示在容器元素内,我们可以推导出:
elW = imgW, elH = imgHcX = sX, cY = sY
根据上面的信息,我就可以计算出具体的(x, y)值了,下面以 x% 为例:
cX = elW * xsX = spritesW * x - imgPosXelW * x = spritesW * x - imgPosX
解方程后就得到计算公式了:
x = imgPosX / (spritesW - elW) = imgPosX / (spritesW - imgW)y = imgPosY / (spritesH - elH) = imgPosY / (spritesH - imgH)
如果你每次都手动计算的话会被累死吧?所以这一步我们还是集成到了工作流里,在所有合并雪碧图的地方用这个公式自动计算出位置。

图片 22

而关于SVG的回退方案,已经是老生常谈
比如

<svg width="200" height="200">
        <image xlink:href="svg.svg" src="svg.png" width="200" height="200" />
</svg>

svg标签方式,缺点必须指定宽高,没有图片的保持款高比例特性,优点兼容性好,兼容所有主流浏览器

或者

<picture>
    <source type="image/svg xml" srcset="svg.svg">
    ![](svg.png)
</picture>

在支持的浏览器里使用SVG,在不支持的浏览器里显示PNG,优点是type灵活,可用于SVG,WEBP等,而且保持了img标签的特性,方便做布局操作。缺点兼容性要求高,ios9 ,安卓5 ,微软Edge
当然这个兼容性说的是source type的兼容,并不是SVG本身的兼容。

对于css里的SVG 的应用与回退策略,比较简单,也已经成熟,一般情况下都是这种用法

 background-image: url(fallback.png);
 background-image: url(image.svg), none;

利用的技术是CSS3多背景,浏览器只要支持了多背景,几乎无一例外支持SVG
再或者

background-image: url(fallback.png);
background-image: image-set( "test.png" 1x, "test-2x.png" 2x,
"test-print.png" 600dpi );

通过image-set来筛选和回退。

有一些图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错,但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错,但只有Chrome和Opera原声支持。JPEG-XR,最初被称为高清照片,是微软发布的一个专有图像格式,仅Internet Explorer支持

srcset,我们给浏览器准备了四个质量的图像,分别为360 768 1200 1920

SVG有什么优势?

文件体积小,能够被大量的压缩
图片可无限放大而不失真(矢量图的基本特征)
在视网膜显示屏上效果极佳
能够实现互动和滤镜效果

<picture> <source type="image/vnd.ms-photo" src="test.jxr"> <source type="image/jp2" src="test.jp2"> <source type="image/webp" src="test.webp"> <img src="test.png" src="/uploads/allimg/170502/14094523b-3.png" width="292" height="66" />图片 23

sizes,我们来告诉浏览器,在不同的环境下图像的宽度

缺点

最大的缺点是难以表现色彩层次丰富的逼真图像效果。

服务端根据浏览器的请求头,返回不同的图像格式,对于X5内核还可以支持sharpP。

当视口不大于360的时候,图像显示宽度为100vw,当视口不大于768的时候,图像显示宽度为90vw,以此类推。

  1. SVG应用

最后一个src作为默认图像url引入,并且是天然的回退方案,当浏览器不认识以上属性的时候,直接读取src渲染。

难点:变色方案,响应式定位计算

这样说不够直观,我们看个demo

上面这个source的type属性还支持另一种我们更常用的图像格式,SVG。

图片 24

说起SVG,这是个出现频率比webp更高的图像格式了,他有着比iconfont更多的优点,所以现在web上正在大量的应用。

在iphone4(320)下,图像宽度和我们设置的100vw一致,但是为什么浏览器选择了768的图像而没有选择360的?因为4的dpr是2呀^_^,浏览器很智能的选择了质量最合适的768.

优点:

再看一下6p(414),很听话的按照我们的设置,显示了90vw。因为他的dpr更高,浏览器聪明的选择了1200质量的图像。

1. SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能力,它还具备了传统图片没有的矢量功能,可适配任何高清屏。

图片 25

  1. 可读性好,有利于SEO与无障碍

这里我们可以欺骗一下浏览器:

与iconfont对比

360.jpg1200w,

  1. 渲染方式不同

1200.jpg9999w

关于渲染方式,之前欧文同学的文章已经讲述的很清楚,这里不多做叙述( 或 GDI 渲染,既然iconfont他是一个字体,就难逃出现锯齿的命运,特别是在一倍屏幕下的渲染。

我们把360的图像,骗浏览器说这是1200的,然后把原本1200的扔天上去

图片 26

图片 27

  1. icon font只能支持单色

浏览器果然上当了,他把360的图当成1200的来用了。这里可能有些疑问,图像的宽度为什么不是90vw了哪?因为浏览器被骗了但是自己却不知道,他依然按照1200的图像,去适配dpr。414*90%*(360/1200)约等于111.7。这种方式很智能,浏览器去根据你的sizes,从w列表里选择最适合的图像来调用显示。正因为他太智能了,在实际操作中可控性较差,有些我们想精确控制的图像显示,有时候并不能如意。而且在做lazyload的时候要处理的东西也比较复杂。

icon font做为字体无法支持多色图形,这就对设计造成了许多限制,因此这也成为了icon font的一个瓶颈。

这个时候可以考虑另外一种方式。

  1. icon font可读性不好

1.2.2.picture元素,可精确把控

icon font主要在页面用Unicode符号调用对应的图标,这种方式不管是浏览器,搜索引擎和对无障碍方面的能力都没有SVG好

picture元素就像是图像和其源的容器。浏览器仍然需要img元素,用来表明需要加载图片,如果没有img,那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。

在对比完之前,可能有同学就会问,SVG和iconfont对比有个致命的缺点,就是换色.

适用场景为:在一个精确特定的转效点(breakpoint)需要显示一个特定的图像时。使用picture元素选择图像,不会有歧义,理解起来也更直观。

比如hover换色,iconfont只要写个颜色就好了,SVG是不是需要做两个颜色的图?这也是SVG图像应用我们解决的一个难点之一

在本例中,当viewport大于960像素时,会加载图像960的图像。当viewport宽度大于768像素时,浏览器会加载768的。而当宽度小于768像素时,加载默认图像360。

SVG换色,最初我试过三个方案

而且这个写法的懒加载非常好处理,只需要在传统的lazyload策略上稍加改进

一是mask-image属性,他的优点是简单粗暴,直接用css来mask这个svg图形来进行换色,缺点很明显就是兼容性了,除去兼容性,还是很好用的。

data-src

demo:

data-srcset

background: #ff6600;-webkit-mask:center no-repeat;-webkit-mask-image: url(qq-logo.svg);

在加载到的时候更换为

查看demo

src

二是通过SVG滤镜来实现,优点是效果更好,缺点除了兼容性,还需要额外的脚本配合。关于滤镜换色的详细说明在我上一篇文章里有详细介绍以及demo:

srcset

三是我们最终选择的底层无感知换色的方案,把修改颜色的脚本集成到了我们的工作流里,我们在写css的时候,遇到svg需要换色的地方,只需要

就轻松解决了。

background-image: url(test.svg?fill=#ffffff)

http://snghr.tencent.com里面使用较多

加一句换色参数,工作流在底层会自动生成你所需要的svg图片并合并到雪碧图里。

他也不需要去特意做回退处理,当浏览器不支持的时候就直接读取img标签。对于懒加载的回退......我选择判断IE 7-8...直接塞url给他.....。

SVG应用的另一个难点,就是作为背景图响应式渲染,雪碧图的background-position和background-size 的计算,这个其实也是其他图像都会存在的一个难点。

2.特殊格式的图像应用与回退

我的导师 wenju 之前发过这个计算公式相关的文章:

特点:体积优化效果显著

百分比值()是背景图相对于背景定位区(background positioning area)的百分比,可以控制在容器元素内仅显示Sprites图的部分内容。比如下图中,Sprites图是由四张图像拼成的,要想在容器内仅显示第一张图像,background-size的值应该多少呢?

难点:兼容性掌控

图片 28

上面picture元素还可以提供基于图片格式选择。

我们仅需要Sprites图的1/4显示在容器内,那么Sprites图与容器的比例应该是4:1,计算公式为: background-size : ( Sprites width / image width) (Sprites height / image height)

有一些图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错,但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错,但只有Chrome和Opera原声支持JPEG-XR,最初被称为高清照片,是微软发布的一个专有图像格式,仅Internet Explorer支持

图片 29

source的type属性用来指定每个图像的MIME类型,浏览器会选择第一个含有其支持的MIME类型的源。源的顺序是至关重要的,如果浏览器无法识别所有的图象类型,它会回退至原来的img元素。

如何计算background-position

但是目前这些格式的支持多数不会直接这么做,因为代码会有些冗余难看,有判断浏览器ua输出不同dom或者样式的,也有服务端直接输出的。服务端直接输出,或者CDN做特殊处理,进行无感知格式切换,同时预留url和拒绝的接口,处理起来更灵活,省时省力,例如我们的:

我们已知的信息如下:

图片 30

容器元素的尺寸:elW * elH单张图片的尺寸:imgW * imgHSprites图片的尺寸:spritesW * spritesH单张图片在Sprites图上的位置:imgPosX, imgPosY

图片 31

我们假设:

服务端根据浏览器的请求头,返回不同的图像格式,对于X5内核还可以支持sharpP。

点的位置为 (x, y)容器上的(x, y)点与容器左上角的距离为 cX, cYSprites图上的(x, y)点与本张图片左上角的距离为 sX, sY

3.SVG应用

如果要把某张图片完全显示在容器元素内,我们可以推导出:

难点:变色方案,响应式定位计算

elW = imgW, elH = imgHcX = sX, cY = sY

上面这个source的type属性还支持另一种我们更常用的图像格式,SVG。

根据上面的信息,我就可以计算出具体的(x, y)值了,下面以 x% 为例:

说起SVG,这是个出现频率比webp更高的图像格式了,他有着比iconfont更多的优点,所以现在web上正在大量的应用。

cX = elW * xsX = spritesW * x – imgPosXelW * x = spritesW * x – imgPosX

优点:

解方程后就得到计算公式了:

1.SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能力,它还具备了传统图片没有的矢量功能,可适配任何高清屏。

x = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)

2.可读性好,有利于SEO与无障碍

如果你每次都手动计算的话会被累死吧?所以这一步我们还是集成到了工作流里,在所有合并雪碧图的地方用这个公式自动计算出位置。

与iconfont对比

图片 32

1.渲染方式不同

而关于SVG的回退方案,已经是老生常谈

关于渲染方式,之前欧文同学的文章已经讲述的很清楚,这里不多做叙述(https://isux.tencent.com/svg-icon-part-one.html),无论黑白渲染,灰度渲染,次像素渲染,还是DirectWriteGDI渲染,既然iconfont他是一个字体,就难逃出现锯齿的命运,特别是在一倍屏幕下的渲染。

比如

图片 33

<svg width="200" height="200"> <image xlink:href="svg.svg" src="svg.png" width="200" height="200" /></svg>

2.icon font只能支持单色

svg标签方式,缺点必须指定宽高,没有图片的保持款高比例特性,优点兼容性好,兼容所有主流浏览器

icon font做为字体无法支持多色图形,这就对设计造成了许多限制,因此这也成为了icon font的一个瓶颈。

或者

3.icon font可读性不好

<picture> <source type="image/svg xml" srcset="svg.svg"> <img src="svg.png" target="_blank">腾讯ISUX

icon font主要在页面用Unicode符号调用对应的图标,这种方式不管是浏览器,搜索引擎和对无障碍方面的能力都没有SVG好

在对比完之前,可能有同学就会问,SVG和iconfont对比有个致命的缺点,就是换色.

比如hover换色,iconfont只要写个颜色就好了,SVG是不是需要做两个颜色的图?这也是SVG图像应用我们解决的一个难点之一

SVG换色,最初我试过三个方案

一是mask-image属性,他的优点是简单粗暴,直接用css来mask这个svg图形来进行换色,缺点很明显就是兼容性了,除去兼容性,还是很好用的。

demo:

background:#ff6600;

-webkit-mask:centerno-repeat;

-webkit-mask-image:url(qq-logo.svg);

查看demo

二是通过SVG滤镜来实现,优点是效果更好,缺点除了兼容性,还需要额外的脚本配合。关于滤镜换色的详细说明在我上一篇文章里有详细介绍以及demo

查看文章

三是我们最终选择的底层无感知换色的方案,把修改颜色的脚本集成到了我们的工作流里,我们在写css的时候,遇到svg需要换色的地方,只需要

background-image:url(test.svg?fill=#ffffff)

加一句换色参数,工作流在底层会自动生成你所需要的svg图片并合并到雪碧图里。

SVG应用的另一个难点,就是作为背景图响应式渲染,雪碧图的background-position和background-size 的计算,这个其实也是其他图像都会存在的一个难点。

我的导师 wenju 之前发过这个计算公式相关的文章:

百分比值()是背景图相对于背景定位区(background positioning area)的百分比,可以控制在容器元素内仅显示Sprites图的部分内容。比如下图中,Sprites图是由四张图像拼成的,要想在容器内仅显示第一张图像,background-size的值应该多少呢?

图片 34

我们仅需要Sprites图的1/4显示在容器内,那么Sprites图与容器的比例应该是4:1,计算公式为: background-size : ( Sprites width / image width) (Sprites height / image height)

图片 35

如何计算background-position

我们已知的信息如下:

容器元素的尺寸:elW * elH

单张图片的尺寸:imgW * imgH

Sprites图片的尺寸:spritesW * spritesH

单张图片在Sprites图上的位置:imgPosX, imgPosY

我们假设:

点的位置为 (x, y)

容器上的(x, y)点与容器左上角的距离为 cX, cY

Sprites图上的(x, y)点与本张图片左上角的距离为 sX, sY

如果要把某张图片完全显示在容器元素内,我们可以推导出:

elW = imgW, elH = imgH

cX = sX, cY = sY

根据上面的信息,我就可以计算出具体的(x, y)值了,下面以 x% 为例:

cX = elW * x

sX = spritesW * x - imgPosX

elW * x = spritesW * x - imgPosX

解方程后就得到计算公式了:

x = imgPosX / (spritesW - elW) = imgPosX / (spritesW - imgW)

y = imgPosY / (spritesH - elH) = imgPosY / (spritesH - imgH)

如果你每次都手动计算的话会被累死吧?所以这一步我们还是集成到了工作流里,在所有合并雪碧图的地方用这个公式自动计算出位置。

图片 36

而关于SVG的回退方案,已经是老生常谈

比如

svg标签方式,缺点必须指定宽高,没有图片的保持款高比例特性,优点兼容性好,兼容所有主流浏览器

或者

在支持的浏览器里使用SVG,在不支持的浏览器里显示PNG,优点是type灵活,可用于SVG,WEBP等,而且保持了img标签的特性,方便做布局操作。缺点兼容性要求高,ios9 ,安卓5 ,微软Edge

当然这个兼容性说的是source type的兼容,并不是SVG本身的兼容。

对于css里的SVG 的应用与回退策略,比较简单,也已经成熟,一般情况下都是这种用法

background-image:url(fallback.png);

background-image:url(image.svg),none;

利用的技术是CSS3多背景,浏览器只要支持了多背景,几乎无一例外支持SVG

再或者

background-image:url(fallback.png);

background-image:image-set("test.png"1x,"test-2x.png"2x,

"test-print.png"600dpi);

通过image-set来筛选和回退。

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:高dpi图片对于不一致器具的适配方案,图片响应

关键词: