網站上傳圖片前先裁切壓縮的好處與方法教學

分享文章

網站圖片壓縮好處

提升網站載入速度 & 搜尋引擎 (SEO) 最佳化

圖片大小影響網站載入速度,網站載入速度太慢不僅會影響 SEO,也會讓使用者很快離開你的網站。測試網站速度的工具會列出數據與測試報告,有些會列出建議修改之圖片列表。

測試網站速度的工具:

使用者體驗 & 提升轉換率

使用清晰及合適大小的圖片展示商品或是作品,使用者體驗較好也會提升購買或合作的意願。

網站圖片基本知識

  • 色彩格式為 RGB
  • 72 dpi
  • 最佳圖片檔案大小於 300kb
  • 圖片命名使用半形英文、數字、橫線「 – 」
  • 圖片大小建議寬高不超過 1240px

當你上傳圖片到 WordPress 網站時,系統會自動幫你把圖片畫質壓縮至 82%。並非所有圖片檔案都會壓縮而且你無法控制圖片壓縮的程度,所以僅僅依賴 WordPress 壓縮圖片是不夠的。

圖片壓縮事項清單

了解了基本的圖片知識後,我們來看看將圖片上傳到 WordPress 網站前要做些什麼事情吧!

  1. 圖片大小是否有裁切小於 1240px?
  2. 圖片是否有壓縮到小於 300kb?
  3. 圖片名稱是否只有使用英數字及橫線?

圖片裁切

我們要做的第一件事情是裁切圖片。

橫幅 (Banner) 或是輪播 (Carousel) 為例,通常都會是滿版 (整個瀏覽器的寬高) 或是全寬,那麼我們的圖片大小裁切為 1240px 就足夠了,如果考量到更高解析度的畫面,可能會需要裁切至 1920px,但是圖片長寬越大,圖片檔案大小也會更大。

滿版圖片
滿版圖片案例:Atlas Renewable LLC

合作夥伴或是公司客戶為例,通常會是多個小 Logo 排列,如下圖範例一排為 5 個 Logo,假設瀏覽器寬度為 1240px ÷ 5 = 248px,另外考量到圖片也許有其他用途加上配合 Retina 顯示器,建議將圖片調整為兩倍大小 248px × 2 = 496px。圖片上傳到 WordPress 網站後,我可以在插入圖片後另外設定寬高為 496px 以下的大小。

圖片裁切

文章列表為例,如下圖範例一排為 3 個 column,一樣的算法 1240px ÷ 3 × 2 = 826px,圖片高度則是看想出什麼比例的圖片。

文章列表圖片
客戶案例:世紀帝國 IV 亞洲最大交流群

圖片壓縮

圖片裁切之後,還可以做壓縮讓圖片更小,提升網站讀取的速度,減少伺服器的負擔也有助於 SEO 排名上升。

圖片壓縮模式

圖片壓縮模式分為失真 (Lossy) 和無失真 (Lossless) 兩種。

無失真 (Lossless)

圖片壓縮率較低,最能保有圖片原始的樣貌。

Deja Vu Studio 的客戶網站都是設定使用無失真圖片壓縮模式唷!

失真 (Lossy)

圖片壓縮率高,但是圖片會相較明顯失真。

圖片名稱

英文與數字組合,如要使用符號區隔,可用減號「-」,勿使用下底線「_ 」或其他全形符號、特殊符號。

例如:logo-color-full.png、photo-scene-landscape-1.jpg、icon-search.svg

圖片剪裁、轉檔、壓縮工具

  • Photoshop – 剪裁、轉檔
  • Illustrator – 剪裁、轉檔
  • Adobe Express (免費 FREE) – 剪裁、轉檔、去除背景
  • Mac 內建預覽程式 (Preview) – 剪裁、轉檔
  • TinyPNG – 壓縮 (可壓縮 png/jpg/webp)
  • iLoveIMG – 剪裁、轉檔、壓縮 (jpg)

立即聯繫

工作區域 1
我還想了解更多
bulb
我對網站已有想法
Yuli
Yuli

Yuli is a mother of 2 working as a WordPress developer. She is the founder of dejavu.stuido. She has been organizing meetups and WordCamps in Taiwan since 2017. She loves solving problems and learning new things in the process.

發佈留言

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