圖片壓縮優(yōu)化 提高網(wǎng)站開啟速度

0 評論 2795 瀏覽 3 收藏 6 分鐘

對于一個網(wǎng)站而言,頁面的開啟速度是至關(guān)重要的。它不僅直接影響到該網(wǎng)站在搜索引擎中的排名參數(shù),更為重要的是,會減緩訪客的頁面開啟速度。本文主要講解圖片壓縮優(yōu)化對提升用戶體驗的優(yōu)點及做法。

圖片優(yōu)化基本原則:

一、圖片縮放
通常情況下,數(shù)碼相機(jī)拍出的照片分辨率是用于沖洗照片所用的,在網(wǎng)上瀏覽不需要上傳那么大的照片,既影響圖片上傳速度,又浪費下載觀眾的帶寬,解決方法是上傳圖片前,用圖片編輯軟件(photoshop 或者 光影魔術(shù)手)壓一下,500像素左右就可以了。

二、圖片裁切
切圖時盡量貼合圖形區(qū),避免空白區(qū)域占用文件大小。

三、圖片輸出
1. 使用photoshop的“存儲為web所用格式”功能來輸出圖片。測試表明:輸出某張圖片為jpg格式,分別使用“存儲為web所用格式”和一般的“存儲為”,都壓縮到50%,前者得到的圖片結(jié)果為14.4kb,后者為47.1kb。
2. 在使用上述功能進(jìn)行圖片輸出的過程中,對比jpg、gif格式下的文件大小,選擇效果和大小較優(yōu)的文件格式。一般情況下,色彩少的圖片使用png-8、gif格式文件會小些,色彩漸變豐富的圖片,則使用jpg會小些。
3. Jpg格式的圖片,需綜合對比壓縮品質(zhì)高、中、低下的效果,盡量選擇效果好且壓縮品質(zhì)較低的選項,以達(dá)到獲取較小文件的目的。
4. 對于無多通道透明需求的圖片,避免使用png24位格式輸出。
Gif圖片如何優(yōu)化?

有些圖片,色彩并不是很豐富,通過對比可知輸出gif會更小些;或者,因為要用在多種背景中使用,需要輸出為透明格式(非多通道),這時,就需要選用gif 格式。我們都知道Jpg格式可以通過控制壓縮比來優(yōu)化,相對于JPG,gif優(yōu)化是比較容易被忽視的。看到身邊有些朋友在輸出gif時基本不作什么優(yōu)化選擇,覺得很可惜。其實,即使確定要輸出gif格式,通常也仍有繼續(xù)瘦身的余地。

做個實驗,下面四個圖片,大家在肉眼、不進(jìn)行圖片放大的情況下能看出區(qū)別來嗎?

其實,這幾張圖片有著不同的色階。請看下面在Photoshop中輸出時的相關(guān)參數(shù),注意文字中紅色線標(biāo)注的內(nèi)容。
e02

樣圖解讀:
圖1為要輸出的原圖效果;
圖2為64色輸出的效果,輸出后文件大小為601字節(jié);
圖3為128色輸出的效果,輸出后文件大小為853字節(jié);
圖4為256色輸出的效果,輸出后文件大小為1.286K。

由此可見,上述四張圖中,在肉眼可辨識情況下,64色的圖片對比256色圖片,輸出后可以少掉一半還多的字節(jié)數(shù),且效果完全能滿足視覺要求。不要小看這幾百個字節(jié),試想網(wǎng)站里幾百張圖片,如果每張圖都節(jié)省一些,最終可以節(jié)省多少空間出來?

這是PS的輸出模式中提供的gif色彩選項。
e03

根據(jù)這些選項,我們再看看更多的Gif格式下多色階的效果和文件大小對比。
e04
經(jīng)對比可知,其實對于此圖片而言,用32色來輸出也是可以接受的。

優(yōu)化小結(jié)

對于jpg而言,選擇一個能看清楚的最大的壓縮率;
對于gif而言,色彩越少,文件也就越小。在肉眼可接受的范圍內(nèi),盡量將gif色彩數(shù)量降低。

道理其實很簡單,關(guān)鍵就在于我們實際輸出過程中要細(xì)心、耐心。雖然從外表上,客戶看不到我們所做出的優(yōu)化工作,但客戶的客戶肯定更喜歡開啟速度快的網(wǎng)站。順手多付出一點,不是壞事情。

來源:http://uicss.cn/improved-image-compression/

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!