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

高效率小訣竅
在 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」即可。
更多補充說明
有些客戶的產品圖和情境圖真的是多到爆,攝影師拍攝的圖片傳來應該有五六百張,如何快速篩選、修圖與輸出網頁使用的格式,我主要用以下三種工具根據不同情況交錯使用,可以提高執行效率,之後會再錄製操作影片簡介一下使用方式
大量修圖、製圖、輸出圖片的方式
- Photoshop:動作紀錄、批次處理、多個圖層選取下載
- Figma:尺寸統一設定、快速排序、一次命名、一次選取下載
- Lightroom:星級分類、AI 修圖、一次選取下載
備註:
- 前提是這些攝影圖是專業攝影師拍攝的,畫面都是佈局好的,比較能適用以上方法。若是還要去背、移除不必的畫面物件、細微的修飾等,就還是得用 Photoshop 一張一張修圖。
- 提高效率相對可以加速執行時間,但不表示不費時費工,只是相對較快速。
設計與行銷工具
- 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 簡介,感覺相當易用,所以先收下了
- MotionElements:專業的影片素材、版型、外掛
- MotionVFX:專業的影片素材、版型、外掛
- Payoneer 派安盈:安全、快速,一站式跨境收款
- Wise:跨境帳戶,進行國際付款、收款
- Surfshark:Surfshark VPN 最近開始用,還滿好使用的!原本需求是想要瀏覽某些國外網站卻被強制自動轉址,所以用 VPN 解決此問題
- Firstory:平台上架、贊助訂閱 與廣告盈利 最完整強大的 Podcast Hosting 省去所有繁瑣上架流程,我們將你錄好的音檔自動發佈到 KKBOX、Apple Podcasts、Spotify 和 Google Podcasts 等收聽平台
- Descript:錄製 Podcast 線上工具,包含影音剪輯、Podcast 錄製、螢幕錄影等功能。There are simple podcast & video editors and there are powerful ones. Only Descript is both & it features magical AI, so you can skip the hard part of editing. Get started for free
- Podcastle:錄製 Podcast 的線上工具,包含影片和聲音剪輯、聲音轉文字等功能。Podcastle is the simplest way to create professional-quality podcasts. Record, edit, transcribe, and export your content with the power of AI, in an intuitive web-based platform.
- 陸續蒐藏與研究…
有任何想問的問題,歡迎填寫表單留言或寄信給我 irving@irvinglab.com、FB 粉絲團或直接線上交談,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入台灣的 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理。若想進一步了解服務內容,可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號留下訊息給我們。