Retina 显示屏的网页图片兼容方案
转载自 http://mutian.wang/tech/1386
感谢 Apple,带来了 Retina 屏幕的革命,让我们可以在电子显示屏上享受到印刷级的分辨率。得益于分辨率的提升,网页中的文字、Flash 和 SVG 内容显示得比原来更加精细,但网页中的大量使用的位图图片却变得异常模糊,存在严重的分辨率适配问题。2010年6月,iPhone4 上市之后,网页图片适配 Retina 显示屏的问题就已出现,经过几年发展,配备 Retina 屏的电子产品越来越多,如今 Apple 又将 Retina 技术应用到了 Macbook Pro 上,网页图片在 Retina 显示屏上的适配问题已经变得迫在眉睫。
接下来为大家分享几种适配方案,供大家参考。
1. <img> 标签引用的图片
我们以一张 300*200px 的照片为例:
1 |
|
如果想让这张图片在 Retina 屏幕下达到应有的显示分辨率,只需使用该照片的源文件导出一张清晰的 600*400px 的图片,我们将其命名为 photo@2x.jpg,替换现有的图片即可:
1 |
|
换成 @2X 图片,在 Retina 屏幕下的显示就清晰多了,可谓细节毕现。不过在普通屏幕下,图片的显示需要经过浏览器的压缩,一些老版本浏览器如 IE6、7 会显示得非常失真,同时大尺寸的图片会占用更多的带宽,增加页面加载的时间,降低用户体验。通过 JS 的辅助,可以让图片在普通屏幕和 Retina 屏幕下做到自动适配:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Retina.js 提供了更加完善的解决方案,自动匹配屏幕分辨率的同时,还可以检测服务器上是否存有当前图片的 @2X 版本,以决定是否替换。
优点:
- 操作简单
- 普通屏幕下不会加载 @2X 的大尺寸图片,节约带宽
缺点:
- Retina 屏幕下,标准图片和 @2X 图片都会被加载
- 图片在显示过程中会被重绘
- 有些老版本浏览器下存在兼容问题
2. CSS 背景图片
2.1 Meta Queries + background-size
我们以一张 logo 的背景图为例,首先我们定义 logo 的尺寸为 100*40px,然后为 #logo 设定一个 100*40px 的背景图片 logo.png,
1 2 3 4 5 |
|
接下来通过 Meta Queries 判断设备的最小显示像素比,如果大于等于1.5的话,为 #logo 设定一张 200*80px 的背景图片 logo@2x.png,然后通过设置 background-size 让背景图显示为 logo 该有的尺寸。这里的显示像素比我们选择 1.5 作为阈值,是为了适配除苹果以外的高分辨率设备,比如三星的 Android Pad。
1 2 3 4 5 6 7 8 9 |
|
这样,对于普通的显示设备或是不支持 Meta Queries 的浏览器,会显示标准的背景图,对于支持 Meta Queries 的 Retina 设备,会显示 @2X 的背景图。( IE6、7、8 均不支持 Meta Queries 和 background-size )
如果仅是为了适配当前的苹果 Retina 显示屏,也可以直接判断设备的显示像素比是否等于2:
1 2 3 4 5 6 |
|
优点:
- 只会加载匹配当前设备的最适图片
- 跨浏览器兼容
缺点:
- 如果背景图片很多的话,需要编写非常冗长的代码
2.2 image-set
我们同样以之前的 logo 为例,实现方式如下:
1 2 3 4 |
|
优点:
- 让图片的链接地址在 CSS 中更加集中,代码的维护成本降低
- 可以让浏览器获取多种尺寸的图片文件,根据屏幕分辨率或是其他一些因素选择适当的图片进行展示,在图片的匹配上可以做到更加智能
缺点:
- image-set 现在只是 CSS4 的一个草案,目前只有 Webkit 内核的 Safari 6+ 和 Chrome 21+ 支持该属性
最后的这条缺点很致命,期待 W3C 早日将 image-set 写入标准之中,让更多的浏览器支持这种写法。
3. 使用 SVG 可缩放矢量图形
与只能记录像素信息的位图相比,矢量图在不同分辨率下的适配有着先天的优势,目前大多数现代浏览器都已经支持基于 XML 的 SVG 格式图形的显示,网页中一些线条简单的 Logo 、图标或特殊字形,如果转成矢量的 SVG 格式来显示,在 Retina 屏下的适配也就搞定了。
制作 SVG 格式图片,可以使用 Adobe Illustrator 或免费的替代软件 inkscape 。
使用 SVG 格式图片,可以像我们使用其他格式的图片一样,用 HTML 的 <img> 标签引用,或用 CSS 的 background-image 、 content:url() 属性,需要注意的是,无论用哪种形式,最好定义一下图片的尺寸。
1 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
如果需要兼容 IE6、7、8 或是其他一些不支持 SVG 的浏览器,需要额外用到 PNG 格式的图片副本(关于 PNG 格式 Alpha 通道的兼容问题这里不做讨论)。
3.1 <img> 标签引用 SVG 格式图片
在 HTML 的 <img> 标签中,增加一个 PNG 格式图片的自定义属性
1 |
|
然后引入 jQuery 和 Modernizr 判断当前浏览器是否支持 SVG ,不支持的话使用 PNG 替换 SVG 。
1 2 3 4 5 6 7 8 |
|
3.2 CSS 背景引用 SVG 格式图片
引入 Modernizr ,将 CSS 改写成以下形式即可:
1 2 3 4 5 6 7 8 9 10 |
|
为了获得最佳的跨浏览器兼容效果,避免在 Firefox 和 Opera 下出现光栅问题,制作的 SVG 图片最小要达到父容器的尺寸。
优点:
- 可以适配任意分辨率
- 维护成本较低
- 矢量图可以无限伸缩,更加面向未来
缺点:
- 不适合复杂的图形,复杂的矢量图形可能会导致文件过大
- 不同的抗锯齿算法,可能会带来不同的浏览感受
- IE6、7、8,早期的 Android 浏览器,及其他一些较老的浏览器无法提供对 SVG 的原生支持,使用 <img> 标签的方式可能会导致浏览器下载 SVG 文件
4. Favicon
Favicon 的 Retina 适配比较容易,或许你的现在 Favicon 在 Retina 下就已经显示得非常清晰,如果不是这样,使用 ico 编辑工具,创建一个包含 16*16 和 32*32 两种内建图像的 ico 文件,替换现有的 Favicon 即可,浏览器会根据分辨率的大小自动匹配内建图像的尺寸。
至于 ico 编辑工具,Windows 下推荐使用 IconXP ,Mac 下推荐 Apple’s Icon Composer(Graphic Tools in Xcode 中)。
Retina 显示屏的网页图片兼容方案相关推荐
- MAC显示屏的网页图片兼容方案
背景图片不同分辨率下的兼容方案调研 PC首页改版中遇到的mac下使用一倍图时,很模糊,一方面,MAC带来了高清屏幕的革命,另一方面,页存在严重的分辨率适配问题,但毕竟我们的用户大部分是在wins平台的 ...
- 导致网页图片字体模糊的原因
1.position:fixed; 会导致字体模糊 2.移动端web及app设计尺寸 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开 ...
- IE中的CSS3不完全兼容方案
IE中的CSS3不完全兼容方案 Opacity透明度 元素的透明度在IE中可以很方便的用滤镜来实现. view source print? 1 background-color:green; 2 op ...
- 网页图片加载优化方法总结
目录 1.压缩 2.直接一开始用压缩过的体积小的图,等加载完毕后,再用高清无码图来替换掉 3.使用base64编码代替图片 4.更好的图片格式 5.合并图片sprite(雪碧图) 6.使用css.sv ...
- Emoji表情符号兼容方案(适用ios,android,wp等平台)
http://blog.csdn.net/qdkfriend/article/details/7576524 Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(え ...
- python抓取图片_Python3简单爬虫抓取网页图片
现在网上有很多python2写的爬虫抓取网页图片的实例,但不适用新手(新手都使用python3环境,不兼容python2), 所以我用Python3的语法写了一个简单抓取网页图片的实例,希望能够帮助到 ...
- vw 前端_前端适配之vw兼容方案(Vue版)
前端适配可以说是前端工程师一个永恒的话题,而解决方案也是层出不穷,其目的都是为了在各个分辨率中最大程度还原设计稿.今天给大家介绍的是vw兼容方案,其原理就是根据视口宽度自动计算页面上的尺寸,无论高度. ...
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
- 前端优化-网页图片优化
前端在工作中,一定会经常涉及到图片,甚至很多人认为前端就是切图的,还有人说前端是用div+css布局的,如果从事了这项工作,你一定不这么认为,相信大家都知道前端绝对不是用PS切片工具把网页切成小图片这 ...
- [ios2]Emoji表情符号兼容方案 【转】
Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji ...
最新文章
- 怎么才能转入大数据领域 ,成为一名合格的大数据分析师...
- oracle 存储过程 输入,Oracle 存储过程加密方法
- 理解spark中的job、stage、task
- think php5是什么,thinkphp5是什么
- 【数据结构与算法】之深入解析“两个数组的交集”的求解思路与算法示例
- cpout引脚是干什么的_FPGA中差分信号的定义和使用(一)
- 台式计算机 评标细则,附:认证评分项目及评分细则
- shell脚本发邮件内容html,Shell发送邮件以HTML展示
- tekla钢结构算量_吉林省中润钢结构科技有限公司应用BIM技术助力润德華城项目建设...
- USBCAN接口卡打开失败收不到数据常见问题分析
- Ubuntu系统的下载与安装(超详细)
- 全球院士共话智能工业创新
- 360wifi架设文件服务器,360wifi怎么搭建局域网共享平台
- Zookeeper 在Windows下的安装过程及测试
- 将svg图片转换icon
- css动画其他div,删除另一个div时的CSS3 Transition动画
- 一套完整的软件开发流程是怎样的?
- python查看显存占用情况以及使用numba.cuda释放显存
- 基于Netty的联机版坦克大战
- 电信天翼无线路由器破解获取telecomadmin的密码
热门文章
- 计算机的字体要怎么删除,win7字体删不掉怎么办?教你删除win7多余字体方法
- Kafka的Topic删不掉
- python爬取12306_详解python 爬取12306验证码
- 倾向得分匹配PSM案例分析
- 一天掌握DID模型,传统DID+多期DID+DID模型扩展PSM-DID+空间DID结合论文实现
- Windows7系统提示当前页面的脚本发生错误怎么办
- 多任务学习之MRI重建(Reconstruction)与超分辨率(Super-Resolution)论文阅读
- 运营Tumblr的几个建议-教你成为tumblr达人
- 宏碁服务器u盘装系统,宏基u盘装系统教程图解
- 微信图片怎么添加竖排文字_微信图文排版怎么在图片上加文字?