适配高分辨率的图片High DPI Images for Variable Pixel Densities
2014-09-27 13:14
495 查看
用最高的效率与性能提供最好的图片质量。
本文内容来至http://www.html5rocks.com/en/mobile/high-dpi/。是在这篇文章的翻译的基础上进行了总结和说明。眼下面临的问题
1.Android手机太多,各种分辨率,各种尺寸。
2.手机流量带宽与电量的问题。
使用图片的原则是,用最大的效率与性能提供最好的图片质量。这篇文章也是要解决这个核心的问题。
历史背景
像素密度的发展历史并不长,早起都是使用72或者96DPI。像素密度能高速的发展主要是由于移动设备的大量使用,由于移动设备通常距离用户的眼睛更近,这样像素密度低了就不好看。
像素密度的理想情况就是物体本身的密度。如今设备的发展的速度已经能够达到视网膜的极限了。
虽然低分辨的图片在高分辨的手机的表现与原来老设备上的表现一致,可是人们已经不惬意了,由于例如以下图的比較。像素密度与高图像表现越好,想比之下就不惬意了
避免使用位图(非矢量图形)
1.能够的话不要使用位图,而使用SVG或者CSS来实现。由于SVG或者CSS在现有技术能很好的自己主动的适配。使用reference pixel 作为像素单位
详见HTMLspecification
两个大的解决方向
1.使用优化的单张图片。不同的分辨率都使用这一张优化后的图片。
这样的解决方法有1.压缩高分辨率的图片
2.不同的情况使用不同的图片。即从多张不同分辨率的图片中选择一张。
JavaScript 这个方式在上一篇文章中有介绍Server side delivery
CSS media queries 这个方式在上一篇文章中有介绍
Built-in browser features (
image-set(),
<img srcset>)
以下具体的介绍每种方式
1.压缩高分辨率的图片
先看一下由 ImageMagick工具生成几组图片,非常明显的能够看出 hq1x和ULQ2x(第一行第一个和第二行第三个比較)的图片的大小差点儿相同,可是明显ulq2x的效果要好于hq1x。
当然quality 90比quality 20的清晰度要高。
而採用quality 20就是一种权衡的做法了。大小和清晰度的权衡。
这样的详细的做法仅仅针对jpeg格式的图片。其它格式的类似的权衡 many
tradeoffs參考这个。
总结
1.能使用SVG和CSS就不使用位图2.背景图片使用 image-set方式,而且正确的处理回调方法,已适配不支持 image-set方式的浏览器
3.假设能够牺牲图片的质量那么考虑使用 压缩高分辨率的图片的方式。
4.内容图片使用 srcset
polyfill, or fallback to using
image-set (有兴趣的自己能够看看)。
相关文章推荐
- 适配高分辨率的图片High DPI Images for Variable Pixel Densities
- [翻译]只为图片使用IMG标签(Use IMG tags only for Images)
- Deep Neural Networks are Easily Fooled:High Confidence Predictions for Unrecognizable Images
- Lazy Load - jQuery plugin for lazy loading images(基于jQuery的图片延迟加载插件)
- #277 – 显示图片的时候注意图片自己的Dpi信息(Images May Have Embedded DpiX and DpiY Information)
- 论文笔记之Synthetic Data for Text Localisation in Natural Images(人工合成带有文本的图片)
- Ros_Opencv_摁下P键获取一定大小图片For Positive Images
- iOSImagesExtractor for mac 快速拿到iOS应用中所有的图片资源
- 高dpi图片对于不同设备的适配方案
- Google Android 原生Rom 下载地址及刷机教程--Factory Images for Nexus and Pixel Devices
- ..::High 65 Resolutions Images of Nature::..
- Tips for Using Images in Blogs
- Test remote images for live writer
- 请问如何让Dundas chart for asp.net控件产生的临时图片文件减少一些?
- Microsoft UAA Bus Driver for High definition Audio
- Image Processing for Dummies with C# and GDI+ Part 1 - Per Pixel Filters
- 64位 Windows Server 2003 SP2 hd声卡 Microsoft UAA Bus Driver for High Definition Audio驱动
- A high performance string format function for JavaScript
- F4 Function for low value and high value
- 透明PNG背景图片 For IE 6.0 Firefox Opera