網站圖片壓縮好處
提升網站載入速度 & 搜尋引擎 (SEO) 最佳化
圖片大小影響網站載入速度，網站載入速度太慢不僅會影響 SEO，也會讓使用者很快離開你的網站。測試網站速度的工具會列出數據與測試報告，有些會列出建議修改之圖片列表。
測試網站速度的工具：
使用者體驗 & 提升轉換率
使用清晰及合適大小的圖片展示商品或是作品，使用者體驗較好也會提升購買或合作的意願。
網站圖片基本知識
- 色彩格式為 RGB
- 72 dpi
- 最佳圖片檔案大小於 300kb*
- 圖片命名使用半形英文、數字、橫線「 – 」**
- 圖片大小建議寬高不超過 1240px
* 當你上傳圖片到 WordPress 網站時，系統會自動幫你把圖片畫質壓縮至 82%。並非所有圖片檔案都會壓縮而且你無法控制圖片壓縮的程度，所以僅僅依賴 WordPress 壓縮圖片是不夠的。
** 圖片用中文命名會有社群媒體分享連結縮圖無法顯示的問題。圖片上傳之後設定 Alternative Text (替代文字) 可讓搜尋引擎更好的辨識和索引網站圖片。
圖片壓縮事項清單
了解了基本的圖片知識後，我們來看看將圖片上傳到 WordPress 網站前要做些什麼事情吧！
-
圖片大小是否有裁切小於 1240px？
-
圖片是否有壓縮到小於 300kb？
-
圖片名稱是否只有使用英數字及橫線？
圖片裁切
我們要做的第一件事情是裁切圖片。
以橫幅 (Banner) 或是輪播 (Carousel) 為例，通常都會是滿版 (整個瀏覽器的寬高) 或是全寬，那麼我們的圖片大小裁切為 1240px 就足夠了，如果考量到更高解析度的畫面，可能會需要裁切至 1920px，但是圖片長寬越大，圖片檔案大小也會更大。
以合作夥伴或是公司客戶為例，通常會是多個小 Logo 排列，如下圖範例一排為 5 個 Logo，假設瀏覽器寬度為 1240px ÷ 5 = 248px，另外考量到圖片也許有其他用途加上配合 Retina 顯示器，建議將圖片調整為兩倍大小 248px × 2 = 496px。圖片上傳到 WordPress 網站後，我可以在插入圖片後另外設定寬高為 496px 以下的大小。
以文章列表為例，如下圖範例一排為 3 個 column，一樣的算法 1240px ÷ 3 × 2 = 826px，圖片高度則是看想出什麼比例的圖片。
圖片壓縮
圖片裁切之後，還可以做壓縮讓圖片更小，提升網站讀取的速度，減少伺服器的負擔也有助於 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)
