八個圖片SEO重點(3)-要用HTML來縮小原本很大的圖檔嗎?
| 目錄 1. 圖片SEO的重要性 2. 8大圖片SEO心法 2-1. 使用合適的圖片檔名 2-2. 優化 alt 文字 2-3. 能不用圖片就不要用圖片 2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸 2-5. 圖片寬度別超過網頁的內容 2-6. 圖片 Exif 資訊 - 視狀況而刪除 2-7. 選擇適當格式的圖片檔 2-8. 創建圖片的 sitemap (進階) |
4.請確實壓縮圖檔的大小 - 別只靠 HTML5 的 width 與 height 來設定尺寸
許多網頁會把同一圖檔用在多個大小不一的網頁上，再使用 HTML 的 width 與 height 來調整它們在網頁上出現的樣子。但是原圖若尺寸過大的話，傳輸一樣會很慢，因為 width 與 height 只能改變使用者 「看到」 的圖片大小，真正傳輸的圖片尺寸其實蝦是一樣的。圖片尺寸越大，網路載入速度越慢。HTML5 的 width 與 height 指令只是讓它在網頁上 「偽裝成」 其尺寸所設定的樣式。
所以圖片的尺寸需要 「最佳化」 - 這裡的 「最佳化」 意思不是指圖檔調整至最大，而是指在不降低圖片解析度的狀況下，給予圖片最合適的大小。
看看下面兩張圖的解析度，是否都差不多清晰? 但是左圖的尺寸竟是右圖的 3.78 倍！
 |
 |
| Original PNG: 75,628 bytes | pngquant: 19,996 bytes (73% smaller) |
Google 也提供了三個能將圖檔尺寸最佳化的開放工具：Guetzli、MozJPEG以及pngquant。Google 提供的使用說明在這裡。若你這些工具都用不習慣的話，那就用 ImageOptim 吧！Windows 及 Linux 使用者請到這裡下載。使用方法一點都不難，只要丟入你的圖片即可最佳化尺寸！
至於做SEO優化時，要選哪一個工具最好呢？SEO 工具 Ahrefs 的部落格針對上述所提的大圖片最佳化的工具之外，也測試了其他的工具。
他們將 15 張圖片丟入 7 個不同的工具做測試，全部都選擇預設的模式。
結果如下(百分比的指數，為 15 張圖片壓縮百分比的平均值)：
Imageoptim: 69% (JPEG). 40% (PNG)
Shortpixel: 42% (JPEG). 59% (PNG)
Kraken.io: 13% (JPEG). 63% (PNG).
TinyPNG: 27% (JPEG). 65% (PNG).
Optimizilla: 27% (JPEG). 60% (PNG)
Imagify.io: 6% (JPEG). 1% (PNG)
Compressor.io: 42% (JPEG). 58% (PNG)
參考以上的結果，Google 官方推薦的圖片尺寸最佳化工具Imageoptim:在 .jpg 檔上表現得較佳；而在 .jpg 與 .png 檔上表現得較平均的為 Shortpixel。
延伸閱讀：
八個圖片SEO重點(2)-優化到底需不需要圖片!?
八個圖片SEO重點(4)-圖片寬度的重要和圖片Exif資訊
八個圖片SEO重點(5)-圖片格式和圖片sitemap怎麼做?
全世界都在瘋的Python,你有發摟上嗎?
人工智慧進入醫療體系將帶來更多希望
挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!
達內教育開幕 培養台灣IT人才進入全球企業
