Back

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

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

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

嗨!我是爾文(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」即可。

更多補充說明

有些客戶的產品圖和情境圖真的是多到爆,攝影師拍攝的圖片傳來應該有五六百張,如何快速篩選、修圖與輸出網頁使用的格式,我主要用以下三種工具根據不同情況交錯使用,可以提高執行效率,之後會再錄製操作影片簡介一下使用方式

大量修圖、製圖、輸出圖片的方式

  1. Photoshop:動作紀錄、批次處理、多個圖層選取下載
  2. Figma:尺寸統一設定、快速排序、一次命名、一次選取下載
  3. Lightroom:星級分類、AI 修圖、一次選取下載

備註:

  1. 前提是這些攝影圖是專業攝影師拍攝的,畫面都是佈局好的,比較能適用以上方法。若是還要去背、移除不必的畫面物件、細微的修飾等,就還是得用 Photoshop 一張一張修圖。
  2. 提高效率相對可以加速執行時間,但不表示不費時費工,只是相對較快速。

設計與行銷工具

  • 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
  • Qwary:全渠道 CX 客戶體驗平台,可幫助企業獲取客戶反饋並通過設計精美的專業調查來衡量 NPS、CSAT 和 CES,以改善購物體驗和產品性能。
  • 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.
  • ABtesting AI:有用過 AB Testing 在優化網站嗎?來試試 AI 的 Testing,有免費方案可以測試
  • Frase:彈指之間用 AI 協助搜尋、撰寫與優化 SEO 文章
  • AppSumo:限時優惠的一次性付費數位軟體販售平台(大幅降低成本)
  • Tidio:設計優質的線上交談工具 Online Chat
  • Help Scout:線上客服(Zendesk 的替代方案)
  • HeySummit:舉辦線上虛擬研討會
  • SimplyBook:線上預約排程系統 及 App 預約軟體
  • Liinks:一頁式多連結網頁,整合多個社群、官網的一頁式網站
  • LearnWorlds:創建與銷售線上課程網站平台
  • Teachable:創建與銷售線上課程網站平台
  • Make:視覺化自動化工作流程,將數據串接等在各種軟體來回穿梭,提升工作效率
  • Piktochart:資訊圖表設計工具
  • ClickMagick:在找 AB Testing 工具時發現 ClickMagick 有這個功能,也看了其他 YouTuber 簡介,感覺相當易用,所以先收下了
  • 陸續蒐藏與研究…


有任何想問的問題,歡迎填寫表單留言或寄信給我 irving@irvinglab.comFB 粉絲團直接線上交談,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入台灣的 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理。若想進一步了解服務內容,可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號留下訊息給我們

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

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。