八大圖片SEO心法第三招:別靠HTML縮小圖檔! @ Java課程是為了今日．Python課程是為了將來

網頁SEO不要靠HTML調整圖片尺寸!?

網頁SEO不要靠HTML調整圖片尺寸!?

目錄
2. 8大圖片SEO心法
2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸

4.請確實壓縮圖檔的大小 - 別只靠 HTML5 的 width 與 height 來設定尺寸

很多網頁會把同一個圖檔用在許多大小不一的網頁上，再使用 HTML5 的 width 與 height 來調整它們在網頁上呈現的樣子。但原圖尺寸過大的話，傳輸一樣會很慢，因為 width 與 height 只會改變使用者「看到」的圖片大小，但真正傳輸的圖片尺寸還是沒有改變。

圖片尺寸越大，網路載入速度越慢。HTML5 的 width 與 height 指令只是讓它在網頁上「偽裝成」其尺寸所設定的樣式。

所以圖片的尺寸要「最佳化」 - 這裡的「最佳化」不是指將圖檔調整至最大，而是指在不降低圖片解析度的狀況下，給予圖片最合適的大小。

下面兩張圖的解析度，是不是都差不多? 但是左圖的尺寸竟是右圖的 3.78 倍！


Original PNG: 75,628 bytes	pngquant: 19,996 bytes (73% smaller)

針對圖片尺寸的 SEO ，以及網頁的關係，GOOGLE 也曾經寫了這份官方說明。其中一句話是:「為了最佳的效果，請把圖片調成各樣的品質來測試。別害怕調低圖片的品質 - 通常這樣，圖片在視覺上效果仍然很好，但是卻大大節省了檔案的儲存空間。」

Google 也提供了三個能將圖檔尺寸最佳化的開放工具：Guetzli、MozJPEG以及pngquant。Google 提供的使用說明在這裡。若你這些工具都用不習慣的話，那就用 ImageOptim 吧！Windows 及 Linux 使用者請到這裡下載。使用方法很簡單，只要丟入你的圖片即可最佳化尺寸！

至於要選哪一個工具最好呢? 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)