響應式圖片

一、儘量使用矢量圖（svg）或者字體圖標

 

二、鼓勵人們上傳最高質量的圖片，屏幕向着高分辨率發展，方便之後改版

 

三、自動修改圖片大小和壓縮服務，最好能經過URL參數修改圖片大小 （webP）

 

四、當同一張圖片縮小看能夠看不清楚，例如

這個時候應該顯示下面這種

art direction use case.   http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/#artdirection

 

五、優化圖片，選擇合適的格式，下面爲Google development建議

PNGs are almost always superior to GIFs and are usually the best choice. IE 4.0b1+, Mac IE 5.0+, Opera 3.51+ and Netscape 4.04+ as well as all versions of Safari and Firefox fully support PNG, including transparency. IE versions 4 to 6 don't support alpha channel transparency (partial transparency) but they support 256-color-or-less PNGs with 1-bit transparency (the same that is supported for GIFs). IE 7 and 8 support alpha transparent PNGs except when an alpha opacity filter is applied to the element. You can generate or convert suitable PNGs with GIMP by using "Indexed" rather than "RGB" mode. If you must maintain compatibility with 3.x-level browsers, serve an alternate GIF to those browsers.

Use GIFs for very small or simple graphics (e.g. less than 10x10 pixels, or a color palette of less than 3 colors) and for images which contain animation. If you think an image might compress better as a GIF, try it as a PNG and a GIF and pick the smaller.

Use JPGs for all photographic-style images.

Do not use BMPs or TIFFs.

 

 

http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/

 

 

 

拓展：JPEG2000可讓同一個圖片文件展示出不一樣的分辨率         http://www.verypdf.com/pdfinfoeditor/jpeg-jpeg-2000-comparison.htm

 

 

響應式圖片最大的衝突：

瀏覽器爲了加快頁面加載速度有pre-parse（在整個頁面佈局決定以前儘量下載資源），而響應式圖片則是但願在佈局計算好以後才加載適合分辨率的圖片

如今的作法通常是先加載通常分辨率的圖片，而後再用javascript檢測屏幕分辨率後替換爲高分辨的圖片

http://blog.cloudfour.com/the-real-conflict-behind-picture-and-srcset/