如何製作與優化網頁圖片?

進行網頁設計時,網頁所使用的圖片尺寸應該如何設定?網頁圖片要如何優化且不會破壞畫質?網路上國內外有很多篇文章在講解網頁圖片該如何製作、應該注意哪些事項等,數年來我自己也迭代過很多作法,不斷優化自己如何進行高效率製作大量的網頁圖片(更新時間: 2022.04.10)

「實戰經驗分享,非只是網路資料整理」

嗨!我是爾文(Irving Chen),資深網頁設計師,先快速介紹一下自己的架站經驗,本人有多年使用 WordPress 架站與網頁設計接案的經驗,近年則專注 Shopify 電商網站設計與建置。對於這類假站平台的限制與可塑性有一定的了解,例如 Squarespace、Wix 後台真的限制超多,大部分的情況只能按照其版型去做編排,要做其他設定會相當困難而痛苦;WordPress 則是彈性度超高,可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力。

我製作網頁圖片的方法主要有兩大目標:超高效率能大量製作

影片講解

說明:因為事情真的太多了!需要相當非常非常「有效率」去製作「大量」網頁圖片,而且還要優化過,免得增加網站主機的負擔、拖累使用者的瀏覽速度。於是我快速錄製了一支 26 分鐘的影片盡可能說明我常使用的製作圖片的方式,但沒上字幕喔!所以需要開聲音。若你也是網頁設計苦手或周遭設計師也有類似的需求,也可以分享給他們!

影片內容

如何設定網頁圖片尺寸、大量輸出到圖片優化

1. 如何設定網頁圖片尺寸?

因為為了保持高速執行,所以網頁圖片尺寸的設定我大概只分成兩種:若在網頁設計中,圖片寬度若大於 600px 我ㄧ律輸出寬度為 1920px,高度自動等比例 auto;若圖片寬度小於等於 600px,我全部輸出寬度 1200px。

備註:圖片無論是寬度還是高度,務必將小數點後的數字移除成為「整數」,這樣才不會在網頁中產生不必要的破版、模糊等問題。

2. 如何超快速大量輸出網頁圖片(而不是用 Photoshop 一張一張輸出)

在 Figma 中可以一次大量選取數十張圖片,設定好格式後一次輸出,完全省時省力,真可謂兵貴神速!只是有一點要注意的是,將圖片丟到 Figma 時,要確認是否有變色,若有,則需要經過 Photoshop 檢查與重新設定該圖,通常都是正常顯示。

3. 如何優化網頁圖片?

以往我在優化圖片時跟大部分的網頁設計師差不多,都是先將圖片輸出後,再整包丟到 TinyPng 壓縮優化後下載使用。但發現在 Figma 中,可以安裝外掛 TinyImage Compressor,直接從 Figma 輸出「優化過的圖片」,確確實實省了至少兩個動作與時間,提高效率!

備註:平面設計師和網頁設計師真的還是屬於不同領域,有很多網站執行細節需要注意!

製作網頁圖片的使用工具:Figma + TinyPNG

使用工具

  1. Figma:https://www.figma.com
  2. TinyPNG:https://tinypng.com
類似 TinyPNG 的 Figma 外掛,名稱為 TinyImage Compressor

高效率小訣竅

在 Figma 安裝類似 TinyPNG 的外掛,名稱為 TinyImage Compressor,直接從 Figma 優化圖片然後直接下載,節省步驟提高效率(透過此外掛可以輸出的格式:Export compressed JPG, PNG, SVG, WebP, GIF, WebM, AVIF and PDF image files directly from Figma)。只是有使用量的限制,若真的用完了,那就回頭繼續網頁版 TinyPNG 也沒問題的。

使用方式:在 Figma 中,先選取圖片,設定 Export 格式,再選取該圖片按右鍵,選取 Plugins > TinyImageCompressor,確認要輸出的圖片列表按下按鈕「Compress Images」即可。


優質數位工具蒐集研究中

  • ActiveCampaign:Email 行銷、電子報系統(MailChimp 的最佳替代方案)
  • Canva:線上平面設計工具,若團隊沒有設計師,那 Canva 真的是神助攻!解決行銷、社群、平面設計、簡報等需求,版型一應俱全。
  • Envato Elements:無限下載的付費資源素材:包含圖片、影片、音樂、音效、平面設計、插圖、簡報模版等,這個也是我常常在用的素材平台。
  • GetResponse:All-in-one 行銷平台,包含電子郵件行銷 Email marketing、登陸頁建立 Landing pages、行銷自動化 Marketing automation 等功能,可以先註冊帳號使用免費版,覺得需要未來再升級!這軟體類似 Hubspot。
  • PickFu:PickFu 是美國消費者在線調研工具,可進行在線的測試、優化和即時消費者調研問卷,取代猜測。透過 PickFu,你可以立即獲取至多 500 條來自美國消費者的意見。通過尋求眾人的智慧,幫助你做出更好的商業決策。
  • SurveySparrow:全通路顧客滿意度調查管理平台 Omnichannel Experience Management Platform
  • Opinion Stage:建立免費的測驗、投票、表單等工具,視覺質感和功能運作不錯!也有提供付費方案,提高每個月的回應數。
  • Typeform:質感優雅的線上表單
  • UXPressia:快速創建專業的顧客旅程地圖 Customer Journey Map、人物誌 Persona 和影響地圖 Impact Map,還有各種模板可以直接套用。
  • Surfer:SEO 工具,主要可用做 SEO 內容編輯者使用, AI 產生 SEO 文案、關鍵字推薦、SEO Audit 等功能,介面設計滿新穎的,賞心悅目!
  • CopyAI:行銷文案 AI 自動產生器 CopyAI is an AI-powered copywriter that generates high-quality copy for your business.
  • AppSumo:限時優惠的一次性付費數位軟體販售平台(大幅降低成本)
  • Tidio:設計優質的線上交談工具 Online Chat
  • Help Scout:線上客服(Zendesk 的替代方案)
  • HeySummit:舉辦線上虛擬研討會
  • SimplyBook:線上預約排程系統 及 App 預約軟體
  • Liinks:一頁式多連結網頁,整合多個社群、官網的一頁式網站
  • LearnWorlds:創建與銷售線上課程網站平台
  • Teachable:創建與銷售線上課程網站平台


有任何想問的問題,歡迎留言或寄信給我 irving@irvinglab.comFB 粉絲團,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理。

爾文讀書中,跟我一起讀書去!精選書單:前往瀏覽

Post a comment

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