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

網站圖片壓縮好處

提升網站載入速度 & 搜尋引擎 (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

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

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

立即聯繫

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

發佈留言

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