显示相关

"Resolution Multiplier"是用来衡量"多少个物理像素组成'一个'像素点的方法"，例如iPhone 5的屏幕分辨率为1136x640，但"显示分辨率"为568x320。这意味着4个物理像素组成了一个"显示像素"，或称"4x multiplier"

inch 物理大小 PPI（pixels per inch） DPI（dots per inch） screen resolution 屏幕分辨率（屏幕物理尺寸inch*PPI，非物理大小） 降低屏幕的分辨率会导致固定物理大小能描述的pixel变少（即PPI降低），而图像的尺寸是固定的pixel，所以图像会变大

HD - 1280x720px or 720p for 720 horizontal lines
full HD - 1920x1080px
4K - 4 times Full HD 3840x2160px、4096x2160px

Monitor Hertz

monitor refresh rate, define how smooth and detailed your animation will look
60Hz = 60 fps（frame per second）

retina display

multiplier

unit

DP - Device independent Pixel
PT - Device independent Point
DP(Android) == PT(Apple) SP - Scale-independent pixels, used to define font size, will be influenced by the user font settings on their Android devices

What happens if I change the PPI configuration in my design tool ?

PPI configuration in software is a printing legacy. If you design only for the web, PPI won't have any influense on the size of your bitmap. A pixel is a pixel and will stay a pixel whatever the PPI configuration. What will make it different is the PPI of the screen that displays it.

图片新格式

WebP

官方介绍 - https://developers.google.com/speed/webp/?csw=1
使用 - http://isux.tencent.com/introduction-of-webp.html
兼容组件 - http://webpjs.appspot.com/

APNG（Animated PNG）

tool - http://isparta.github.io/how.html
demo - https://people.mozilla.org/~dolske/apng/demo.html

img srcset & css image-set

介绍 - http://developer.51cto.com/art/201309/410720.htm
demo - http://www.webkit.org/demos/srcset/