适配高分辨率的图片High DPI Images for Variable Pixel Densities
2014-05-11 12:03
330 查看
用最高的效率与性能提供最好的图片质量。
本文内容来至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
- 论文笔记之Synthetic Data for Text Localisation in Natural Images(人工合成带有文本的图片)
- 高dpi图片对于不同设备的适配方案
- iOSImagesExtractor for mac 快速拿到iOS应用中所有的图片资源
- Ros_Opencv_摁下P键获取一定大小图片For Positive Images
- Deep Neural Networks are Easily Fooled:High Confidence Predictions for Unrecognizable Images
- [翻译]只为图片使用IMG标签(Use IMG tags only for Images)
- #277 – 显示图片的时候注意图片自己的Dpi信息(Images May Have Embedded DpiX and DpiY Information)
- Lazy Load - jQuery plugin for lazy loading images(基于jQuery的图片延迟加载插件)
- Google Android 原生Rom 下载地址及刷机教程--Factory Images for Nexus and Pixel Devices
- 图像分割“RefineNet-Multi-Path Refinement Networks for High-Resolution Semantic Segmentation”
- 每日论文Transient Attributes for High-Level Understanding and Editing of Outdoor Scenes
- Android平板上开发应用的一点心得——精确适配不同的dpi和屏幕尺寸
- android UI 编程的基本概念 -- pixel,dp,dpi,ppi,屏幕尺寸,分辨率,sp
- Highly Efficient Forward and Backward Propagation of Convolutional Neural Networks for Pixelwise Cla
- Android平板上开发应用的一点心得——精确适配不同的dpi和屏幕尺寸
- MFC程序的DPI适配
- Data Augmentation by Pairing Samples for Images Classification
- 1414 - OUT or INOUT argument 3 for routine nenghao.xxx is not a variable or NEW pseudo-variable in B
- ENGINEERING: YOUR CHANCE FOR A HIGH PAYING ENTRY LEVEL JOBS?