Site Loader

我們再來看看SEO優化的秘訣是什麼?快點記下來,絕對受用無窮!!

我們再來看看SEO優化的秘訣是什麼?快點記下來,絕對受用無窮!!
我們再來看看SEO優化的秘訣是什麼?快點記下來,絕對受用無窮!!
目錄
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 tiny png converted
Original PNG: 75,628 bytes pngquant: 19,996 bytes (73% smaller)

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

Google 也提供了三個能將圖檔尺寸最佳化的開放工具:GuetzliMozJPEG以及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)

參考以上的結果,Google 官方推薦的圖片尺寸最佳化工具Imageoptim:在 .jpg 檔上表現得較佳;而在 .jpg 與 .png 檔上表現得較平均的為 Shortpixel

推薦閱讀:

當輕鬆的SEO不是夢-(六)網路行銷課程教你小撇步,讓你往前一大步

關於網路行銷課程你不能不知道黑白帽SEO

網路行銷太多學不完?業界不告訴你的SEO優化秘訣!

Java課程、UI課程、程式課程、網路行銷課程推薦

中國IT教育領導品牌 達內教育集團第一家海外授權中心

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *