做者：賀師俊
鏈接：https://www.zhihu.com/question/21815101/answer/19410993
濫觴：知乎
1. 來失落偶然義的建飾。嗯，我會瞎扯嗎?除內容圖片，其他的圖片的做用是建飾，也便是關于轉達疑息去道并不是素質性的。最年夜的劣化便是壓根沒有要圖片!以是正在劣化之前要做的，尾先是確認設想，設想自己能否需求用那末多圖片?借是道能夠更簡約?
2. 不消圖片。嗯，切圖是一件扯濃的工作!沒有要隔靴搔癢了少年，間接利用CSS替換圖片去真現建飾結果吧!如半通明、邊框、圓角、陽影、突變等，正在當前支流閱讀器中皆能夠用CSS告竣。未來CSS濾鏡獲得普遍撐持后，借能夠做到alpha混淆、正片疊底等各類結果。
3. 利用矢量圖替換位圖。關于盡年夜大都圖案、圖標等，矢量圖更小，且可縮放而無需死成多套圖。如今支流閱讀器皆撐持SVG了，以是可定心利用!
4. 利用得當的圖片格局。我們常睹的圖片格局有JPEG、GIF、PNG。根本上，內容圖片多為照片之類的，合用于JPEG。而建飾圖片凡是更合適用無益緊縮的PNG。而GIF根本上除GIF動繪中沒有要利用。且動繪的話，也更倡議用video元素戰視頻格局，或用SVG動繪代替。除那些格局以外，Chrome、新版Opera、Android 4+撐持WebP格局，IE 9+、IE mobile 10+撐持JPEG XR。那兩個新格局皆撐持無益戰有益緊縮，皆具有更優良的緊縮比。固然那需求為差別的閱讀器返回差別的圖片，刪減了開辟本錢，也刪減存儲本錢。不外您省了流量大概不異流量下改進了圖片量量，提拔了用戶體驗。您會怎樣棄取呢?對了，別記了利用優良的圖片編碼器及適宜的參數。好的圖片編碼器，特別是有益圖片格局的編碼器，能經由過程算法或腳動調解，得到更下的緊縮比。
以下是遍及合用各類資本而沒有限于圖片的劣化手腕：
5. 利用data url。資本內嵌于CSS或HTML中，而沒必要零丁懇求。留意，多個處所皆要利用的資本紛歧定合適用此劣化方法，果為圖片數據反復多了，刪減流量。別的很多閱讀器對data url有少度限定，留意資本的巨細。
6. 根據HTTP和談設置開理的緩存。詳細的緩存戰略(如永世緩存+重定名)、布置戰略(如反背代辦署理、CDN等)那里便沒有睜開了。
7. 利用撐持SPDY的效勞器。SPDY可以為是將來的HTTP 2.0的晚期真現，Chrome、Firefox 13+、Opera 12+、IE 11+均已撐持SPDY。SPDY戰HTTP2可參考其中文演講：http://www.youtube.com/watch?v=r74RAcrc1ZA(請自備梯子)，那里便沒有睜開了。
8. 資本的lazyload或postpone。(lazyload：提早到其他資本下載完成后再減載，postpone：提早到元素可睹再減載。)今朝根本上皆要用劇本掌握。將來HTML戰CSS會刪減相干的掌握屬性，睹：Resource Priorities。
9. 資本的prefetch?？捎?，睹http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch。留意prefetch只是hint，Firefox會預與資本(假如收集閑暇的話)，而IE 9則是對該資本的hostname停止DNS預剖析。假如您實的需求更強的掌握，則得用劇本。留意：Chrome撐持取prefetch附近但更進一步的，別的SPDY參加了取prefetch附近但語義差別的subresource link撐持，那兩個新特征我也出用過，有愛好的能夠測驗考試。
圖片的其他劣化本領如字體圖標、CSS Sprites等，不外我沒有保舉。用字體圖標沒有如用SVG。利用了SPDY戰data url后，CSS Sprites完整出有須要用了。
再有各類特定的圖片成績，超越了普通劣化的范圍。多么多腳機閱讀器有烏夜形式，此中有的閱讀器許可定造烏夜形式;有的腳機閱讀器許可正在用戶開啟沒有減載圖片選項的狀況下閃開收者設置必需減載的圖片(有面繞);又多么多腳機閱讀器有所謂云加快形式，即正在效勞器端對圖片停止處置后再收收給客戶端，該當返回如何的圖片給那些效勞器有待研討戰理論。
10. 最初是responsive設想所需的圖片劣化，能夠要發生多套差別巨細戰分辯率的圖片，共同media query、和srcset屬性、picture元素、src-N等尺度提案，那個話題比力年夜，還沒有構成遍及承認的最好理論，那里也沒有多睜開了。
以上。
