網(wǎng)頁圖片優(yōu)化工具及使用技巧分享
我要評論作為網(wǎng)頁的基本元素，圖片是影響頁面加載速度的關鍵因素之一。和圖片相關的網(wǎng)站優(yōu)化技術有 CSS Sprites（圖片合并）、延遲加載、圖片漸進增強等等。下面向大家分享網(wǎng)頁圖片優(yōu)化的一些優(yōu)秀工具和技巧。
TinyPNG 使用智能有損壓縮技術，以減少 PNG 文件的大小。
Smush.it 通過刪除圖片文件中的不必要的字節(jié)信息來減少圖片尺寸。
OptiPNG 是一款 PNG 圖片壓縮工具，不會丟失信息。
通過找到最好的壓縮參數(shù)，消除不必要的注釋和顏色配置文件，可以處理 PNG、JPEG 和 GIF 動畫圖片。
CodeKit 可以幫助你建立更快，更好的網(wǎng)站，它也可以幫助你優(yōu)化圖像。
imgo 是一種無損圖像自動優(yōu)化工具。能夠把一個文件夾中的圖像最大程度的優(yōu)化。
用于延遲圖片延遲加載的 jQuery 插件。
圖片優(yōu)化文章推薦
Smashing Magazine – Optimize Images With HTML5 Canvas
Smashing Magazine – Clever JPEG Optimization Techniques
Smashing Magazine – Clever PNG Optimization Techniques
The Smashing Book – Performance Optimization for Websites
A List Apart – Responsive Images and Web Standards at the Turning Point
A List Apart – Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II
A List Apart – Using SVG for Flexible, Scalable, and Fun Backgrounds, Part I
Six Revisions – The Comprehensive Guide to Saving Images for the Web
Six Revisions – JPEG 101: A Crash Course Guide on JPEG
相關文章
使用css sprites來優(yōu)化你的網(wǎng)站在Retina屏幕下顯示實現(xiàn)原理與代碼
CSS sprites(CSS圖片精靈)已經存在很久了。事實上，八年前就有CSS Sprites的詳細介紹。CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗，不需要2012-12-24- 本文整理了一些在div+css 布局過程中的一些經驗技巧如：瀏覽器兼容、規(guī)范寫法、簡寫等一系列，需要的朋友可以參考下2012-12-19
css sprites技術 CSS Sprites圖片切割術與圖片優(yōu)化深入理解
近段時間一直在做前臺的一些東西，涉及到很多div+css的問題,原來這個叫CSS Sprites技術,我對前臺這些個東西比較感興趣，所以會去了解多一點2012-12-03網(wǎng)頁設計中的CSS Sprites技術介紹及其優(yōu)化方法
CSS Sprites 技術對于廣大的前端工程師來說應該是一點也不陌生。這個被國內開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問題，我們又怎樣合理使用這個技術呢?下面讓我2012-05-31- CSS常用優(yōu)化技巧,提高css書寫技巧。2011-10-07
- CSS 網(wǎng)站性能優(yōu)化筆記，大家可以結合下js 網(wǎng)站性能優(yōu)化筆記。2011-05-24
有利于SEO優(yōu)化的DIV+CSS的命名規(guī)則小結
DIV+CSS的命名規(guī)則小結，讓搜索引擎讀懂你的樣式表。2010-03-17- IE 瀏覽器中 CSS Expression 特性的最大的問題：會反復執(zhí)行，每秒鐘可能執(zhí)行了成百上千次，有嚴重的性能問題。2009-09-23
CSS Sprite優(yōu)化 減少HTTP鏈接數(shù)
CSS Sprite 最大的好處是：減少 HTTP 鏈接數(shù)。提高頁面質量2009-08-03- 明顯HTML，暗渡“公用腳本” 減少web頁面下載時間的關鍵就是設法減小文件大小。當多個頁面共用一些成分內容時，就可以考慮將這些公用部分單獨分離出來。比2008-10-17