| 簡(jiǎn)介 來(lái)自 Google Code 上 Let's make the web faster 項(xiàng)目的文章. 主要討論了網(wǎng)頁(yè)圖像的一些優(yōu)化技巧. |
需要技能: 基礎(chǔ)的圖像處理
在你優(yōu)化網(wǎng)站的每行代碼的時(shí)候, 不要忘了靜態(tài)內(nèi)容 - 包括圖像. 簡(jiǎn)單的優(yōu)化就可以顯著地減小下載的大小, 而又不破壞網(wǎng)站的品質(zhì).
(原 Flash 影片位置)
這里是一些幫助你加快 web 圖像載入速度的技巧.
裁剪掉多余的白色區(qū)域
有時(shí)候你的圖像周圍會(huì)留下空白區(qū)域, 用來(lái)避免它與文字或其他頁(yè)面元素靠在一起. 作為替代, 裁剪掉空白, 然后使用 CSS 來(lái)創(chuàng)建圖像周圍的邊距.
選用最佳的文件格式
對(duì)于包含簡(jiǎn)單平面插圖或繪畫的圖像, 選用 8-bit PNG 或 GIF 格式并減少調(diào)色板中的顏色數(shù)目. 一些圖像處理軟件如 PhotoShop 允許你為 web 應(yīng)用保存圖像, 同時(shí)可以微調(diào)圖像設(shè)置. 通過(guò)把調(diào)色板從 256 色改為 32 色, 你可以極大地減小文件尺寸. 圖像的顏色數(shù)越少, 文件越小.
對(duì)于細(xì)節(jié)和色彩豐富的繪畫或照片, 通常使用 JPG 和 24-bit PNG, 因?yàn)樗鼈冇懈蟮恼{(diào)色板. 24-bit PNG 在提供更優(yōu)圖像品質(zhì)的同時(shí), 有著更大的文件尺寸. 在允許的時(shí)候, 盡量使用 JPG 并調(diào)整品質(zhì)設(shè)置, 以便在可以忍受的圖像品質(zhì)范圍內(nèi)獲得更高的壓縮比.
作為對(duì)照, 這里是上面那幅圖像在不同格式下的文件大小:
JPG, 品質(zhì): 60 - 32K
PNG-8, 256 色- 37K
GIF, 256 色- 42K
PNG-24 - 146K
同時(shí) JPG 還有一個(gè)叫做"漸進(jìn)(Progressive)"模式的設(shè)置. 這個(gè)選項(xiàng)會(huì)添加若干低分辨率的圖像副本, 以便能讓圖像盡快地以逐步清晰的方式顯示在屏幕上. 但它會(huì)增加圖像文件的大小.
PNG 也有一個(gè)叫做"逐行(Interlaced)"的類似選項(xiàng). 你可以關(guān)掉這個(gè)選項(xiàng)以便讓完整的圖像下載得更快些.
8-bit PNG 和 GIF 格式能提供更小的文件尺寸, 所以在為你的網(wǎng)站制作圖像和插畫時(shí)請(qǐng)牢記這些. 嘗試把顏色數(shù)控制在最少, 并使用平面圖像代替照片. 這樣你可以創(chuàng)建只需要 16 色調(diào)色板的圖像, 讓文件的尺寸保持最小并能被快速下載.
