前端

2019 年 8 月 21 日

SEO 優化:轉檔縮小網站照片,加速網頁載入!

已複製到剪貼板


SEO 優化:網站載入速度的重要性!

網站的載入速度影響到了用戶對於網頁的使用體驗,當然網站載入速度只是良好使用者體驗的其中一個指標,網站載入越快使用者越不用等,就能減少用戶使用您網站時的不耐煩感,也就能增加再回到您網頁瀏覽的意願!

提高頁面載入速度:提供 Next-Gen 格式的圖片

會減慢網頁載入速度的圖片格式

常常剛開始接觸經營網站或部落格的人,要放張照片或圖片到網站或文章中時,都會以「JPG」、「JPEG」、或「PNG」的格式直接上傳,雖然這些檔案已經是屬於壓縮檔了,但其實對於網頁載入速度的要求體驗下,還是不夠快的。

適合網頁也較快速的圖片格式

「提供 next-gen 格式的圖片」是加快網站載入速度最佳化的其中一個方法。盡量讓照片或圖片的檔案越小越好,載入才快!要把照片縮檔卻又不失視覺上的美觀,要使用新一代的圖像格式:

  • JPEG 2000
  • JPEG XR
  • WebP

其中我最推薦使用「WebP」的照片檔案格式,因為自己三種檔案格式都試過了,發現「WebP」在縮檔程度上最高,能把檔案縮到最小,不過這也是因為它是以編碼的形式來存檔。所以在放到網頁上前,你看到的不是一張相片,而是以「.webp」作結尾的檔案。

將照片、圖片轉成 Next-Gen 檔案格式的方法

使用工具:「Squoosh」

推薦一個 Google 推出的照片縮檔轉檔工具「Squoosh」。

你看到的上面這張「Squoosh」照片就是用 Squoosh 來做轉檔與縮檔的:原本這張截圖是 PNG 檔 610 KB,轉成了 WebP 檔後,變成了 92.9 KB,整整省了 85% 的載入大小!

照片、圖片轉檔方法

點選紫色的「select an image」,並選擇想轉檔的照片,進入後 Squoosh 提供了許多的照片格式可供選擇,包含:

  • OptiPNG
  • MozJPEG
  • WebP
  • Browser PNG
  • Browser JPEG
  • Browser BMP
  • Browser GIF
  • Browser TIFF
  • Browser JPEG 2000
  • Browser PDF

當然,我最推薦使用「WebP」的檔案格式,因為經驗裡它的縮檔程度比較高!選擇完要轉檔的檔案格式後,按右下角的下載符號就完成轉檔了!而你原來的照片依然會保留在原來的地方。

分享文章

已複製到剪貼板

主題文章

查看 前端

關於看我所見

「看我所見」主題多元,分享作者的生活經歷、特殊經驗,舉凡:教育、生活、科技、3C、音樂、娛樂 ⋯⋯,我們也將持續優化,提供讀者最好的體驗!


Contacts

Ricky Chuang

看我所見

linktr.ee/5j54d93

最新文章