進行網頁設計時，網頁所使用的圖片尺寸應該如何設定？網頁圖片要如何優化 SEO 且不會破壞畫質？網路上國內外有很多篇文章在講解網頁圖片該如何製作、應該注意哪些事項等，數年來我自己也迭代過很多作法，不斷優化自己如何進行高效率製作大量的網頁圖片（更新時間： 2023.09.19）
「實戰經驗分享，非只是網路資料整理」
嗨！我是爾文（Irving Chen），資深網頁設計師，先快速介紹一下自己的架站經驗，本人有多年使用 WordPress 架站與網頁設計的經驗，近年則專注 Shopify 電商網站設計與建置。對於這類架站平台的限制與可塑性有一定的了解，例如 Squarespace、Wix 後台真的限制超多，大部分的情況只能按照其版型去做編排，要做其他設定會相當困難而痛苦；WordPress 則是彈性度超高，可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力。若有網站相關問題，可以前往填寫表單留下訊息或需求給我，我會盡快回覆！
我製作網頁圖片的方法主要有兩大目標：超高效率，能大量製作
影片講解
說明：因為事情真的太多了！需要相當非常非常「有效率」去製作「大量」網頁圖片，而且還要優化過，免得增加網站主機的負擔、拖累使用者的瀏覽速度。於是我快速錄製了一支 26 分鐘的影片盡可能說明我常使用的製作圖片的方式，但沒上字幕喔！所以需要開聲音。若你也是網頁設計苦手或周遭設計師也有類似的需求，也可以分享給他們！
影片內容
1. 如何設定網頁圖片尺寸？
因為為了保持高速執行，所以網頁圖片尺寸的設定我大概只分成兩種：若在網頁設計中，圖片寬度若大於 600px 我ㄧ律輸出寬度為 1920px，高度自動等比例 auto；若圖片寬度小於等於 600px，我全部輸出寬度 1200px。
備註：圖片無論是寬度還是高度，務必將小數點後的數字移除成為「整數」，這樣才不會在網頁中產生不必要的破版、模糊等問題。
2. 如何超快速大量輸出網頁圖片（而不是用 Photoshop 一張一張輸出）
在 Figma 中可以一次大量選取數十張圖片，設定好格式後一次輸出，完全省時省力，真可謂兵貴神速！只是有一點要注意的是，將圖片丟到 Figma 時，要確認是否有變色，若有，則需要經過 Photoshop 檢查與重新設定該圖，通常都是正常顯示。🍉 若你還沒有 Figma 帳號，可以前往註冊免費帳號，免費版就很好用了！
3. 如何優化網頁圖片？
以往我在優化圖片時跟大部分的網頁設計師差不多，都是先將圖片輸出後，再整包丟到 TinyPng 壓縮優化後下載使用。但發現在 Figma 中，可以安裝外掛 TinyImage Compressor，直接從 Figma 輸出「優化過的圖片」，確確實實省了至少兩個動作與時間，提高效率！
備註：平面設計師和網頁設計師真的還是屬於不同領域，有很多網站執行細節需要注意！
使用工具
高效率小訣竅
在 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」即可。
想要更全面學習強大的線上 UI 協作設計軟體 Figma？可以上這堂課：產品設計實戰：用 Figma 打造絕佳 UI/UX。除此之外，我自己有搭配 UX 使用者經驗設計和數位產品開發相關的精選課程推薦，例如 UX 新手入門：UX 設計/研究全攻略: 給新手的職場通識課、UX 扎實的學術研究理論：用戶x商業x數據 | UX‧三刀流產品體驗設計、產品數據分析：產品數據分析 – 打造網路產品的決策引擎、產品創新：產品 x 創新：從需求洞察到產品策略、產品經理 PM：產品經理職場學：PM 必修的職涯指南！，全部上完之後讓我大開眼界、豁然開朗，提升思考層次與思維方式，有興趣的人可以參考並選幾堂符合目前需求來學習與充實自己。
更多補充說明
有些客戶的產品圖和情境圖真的是多到爆，攝影師拍攝的圖片傳來應該有五六百張，如何快速篩選、修圖與輸出網頁使用的格式，我主要用以下三種工具根據不同情況交錯使用，可以提高執行效率，之後會再錄製操作影片簡介一下使用方式
大量修圖、製圖、輸出圖片的方式
- Photoshop：動作紀錄、批次處理、多個圖層選取下載
- Figma：尺寸統一設定、快速排序、一次命名、一次選取下載
- Lightroom：星級分類、AI 修圖、一次選取下載
備註：
- 前提是這些攝影圖是專業攝影師拍攝的，畫面都是佈局好的，比較能適用以上方法。若是還要去背、移除不必的畫面物件、細微的修飾等，就還是得用 Photoshop 一張一張修圖。
- 提高效率相對可以加速執行時間，但不表示不費時費工，只是相對較快速。
針對 SEO 初學者、初入門的人，可參考 Hahow 的線上課程：SEO 白話文：不懂程式也能學會的 SEO 秘密，上完後在知識與觀念上扎實打下基礎，接著進階的是了解整合 SEO 搜尋引擎優化和 Google Ads 關鍵字廣告的行銷策略：客戶主動找上門！全面佈局的搜尋引擎行銷策略，然後學習網站分析工具 Google Analytics 課程：GA4 新手完全攻略！用數據分析下商業決策，從做中學優化網站 SEO，學習效率倍增！有興趣的話再加入 Line 社群一起討論：SEO 資源彙整 / 學習，歡迎蒐藏並分享給你的同事們我持續更新的「SEO 學習資源」。閱讀書籍的部分則超級推薦：SEO超入門：教你免費又有效的網站行銷好點子
Shopify SEO 友善
有使用 Shopify 建立電商網站的使用者，所謂 Shopify SEO 友善，很多我們不會特別注意到是指什麼，但其實都藏在細節裡，只要稍微了解基本 SEO 網頁架構的人可以在 Google 官方 SEO 文件中找到相對應的實現方式，例如：
- 只要上傳到 Shopify 的圖片無論是內建透過 App 上傳的圖片都直上 CDN 了，在 Shopify 建立的網站圖片上按右鍵「在新分頁開啟圖片」，就可以看到該圖片網址
- img 標籤也都提供回應式圖片設定 img srcset，亦即根據不同螢幕尺寸提供不同大小的圖片，在圖片上按右鍵「檢查」可以看到 有使用 srcset 屬性，而且也有指定 src 當作備用網址
以上用網頁圖片為例，因為通常大部分的使用者很容易忽略「優化網頁圖片」這件事，可能是產品圖片太大量所以「懶得優化」，也可能是輕忽了圖片未優化所帶來的影響，影響所及包含 SEO、網頁速度、瀏覽體驗、行動版網頁體驗等，層面滿廣的
想了解優化 Shopify SEO 的實用 App，可瀏覽這篇文章：Shopify SEO 推薦 APP：Yoast SEO 實戰教學
第一次聽到 Shopify？前往了解如何用 Shopify 與開放式生態系打造國際級的跨境電商網站：用兩個月打造 Shopify 客製化網站設計
Using a CDN is a cost-effective and efficient method to greatly enhance your website’s loading speed, while also providing added security against potential attacks and hacks.
Google 搜尋中心官方說明優化網頁圖片的最佳實踐
替代文字可以滿足無障礙設計，用 <img> 元素新增元素的 alt 屬性，而內嵌 <svg> 元素，則可以插入元素
- img alt text
- svg title
網頁可使用 <picture> 元素或 img 元素的 srcset 屬性來指定回應式圖片，只是部分瀏覽器和檢索器無法解讀這類屬性，一律使用 src 屬性來指定備用網址
- picture 內含 source 和 img src
- img srcset
- background-image: image-set
了解更多：Google 圖片搜尋引擎最佳化 (SEO) 的最佳做法 – Google 搜尋中心，如果你是開發者，那真的可以好好翔度這篇回應式圖片 Responsive images 最佳做法
記得以往在純寫整個網頁 code 的時期，使用是優雅降級的好方式，又或是使用 media query 針對不同解析度切換圖片，但這作法比較麻煩些；而若使用 CSS 背景圖片寫法，則可以透過 image-set 指定各種圖片尺寸，只是 Google 不會為其建立索引，但又不得不用且經常使用 ^^，所以可以透過「提交圖片的網站地圖」讓 Google 收錄
其他參考資料，這篇文章也乾淨俐落地整理了圖片 SEO 優化的各項要點：What Are Some Best Practices For Optimizing Images For Image Recognition And SEO? 另外，我這幾年黎彙整並持續更新的 SEO 學習資源大全，歡迎前往蒐藏與瀏覽
Google Web Dev 建立適用於任何瀏覽器的現代網頁體驗的指導原則
Google 的 web.dev 網站是專門分享如何善用現代科技打造令人驚豔的網站體驗，其中有關「網頁圖片」的內容非常值得學習
- Learn HTML – Images：概要了解 HTML 中圖片語法的使用方式
- Learn Images：對於圖片格式透徹解析，適用於初學者和有經驗的網頁開發者，內容包括從確保圖片來源有效請求和呈現的基礎知識，到常見圖片格式如何從伺服器傳遞到客戶端的詳細資訊。在整個課程中，您將學習如何實現圖片的最小傳輸大小，而不會影響它們的質量，至少在任何人看得見的情況下是如此。
若你是平面設計想轉職網頁設計師或從未熟悉網站開發程式的行銷人員，想了解網頁程式開發是怎麼一回事，極度推薦六角學院的線上課程：使用 HTML、CSS 開發一個網站，上完之後會有初步的概念，不僅可以開始看懂網頁的基本語法，有助於執行網頁設計介面時的實際作法，更能提升與工程師的溝通效率，而不致於完全雞同鴨講。若是完整的基礎學習則可以再修此兩門課：一變應萬變：RWD 響應式網頁設計、使用 jQuery 打造互動性網頁動畫效果
加入 Line 的學習社群
- 成為網頁設計師 | Irvinglab 爾文實驗室
- 簡介：邁向網頁設計師之路，了解網頁設計的基本概念與實作經驗交流與分享，無論是行銷人、工程師、平面設計師等想要了解更多「網頁設計」都歡迎加入討論。
- 網址：https://share.irvinglab.com/be-a-web-designer
- Shopify 網站設計與架站學習交流 | Irvinglab 爾文實驗室
- 簡介：分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。
- 網址：https://share.irvinglab.com/shopify-line-group
- WordPress 網站設計與架站學習｜Irvinglab 爾文實驗室
- 簡介：學習 WordPress 網站設計與架站，分享實作經驗與交流。
- 品牌網址：https://share.irvinglab.com/wordpress-line-group
- SEO 資源彙整與學習｜Irvinglab 爾文實驗室
- 簡介：閱讀 SEO 就像喝水一樣，習慣建立與自然地吸收。
- 網址：https://share.irvinglab.com/seo-line-group
AI、設計與行銷工具
- Figma：UIUX 設計師和網頁設計師首選必用的線上設計協作軟體，若你是行銷人、專案管理、團隊主管、遠端協作等也都非常適用！大幅提升執行效率、降低溝通成本。
- Framer AI：輸入文字，數秒內即可生成網站的 AI 工具！這對設計師來說值得研究研究！
- Relume：若是 Figma 設計師和 Webflow 架站的愛好者，可以玩玩看！Access the world’s largest library of Figma & Webflow components and build better websites in hours, not days.
- Siter.io：又一款免程式碼的網頁編輯器，介面有點類似 Figma，Online design tool with no coding to think about
- Untitled UI：The world’s largest and most popular Figma UI kit. Kickstart any project, save thousands of hours, and level up as a designer.
- Shulex：電商網站的競品分析工具很多，這款我試用了一下分析 Amazon 產品頁可以自動分析評論、產出該產品的人物誌、正面和負面評論的項目與比例等，讓我可以快速了解產品的使用者輪廓與痛點，滿推薦使用看看。
- PPSPY：Shopify Store Spy & Shopify Dropshipping Monitor Tool 發現這工具真是大開眼界，可以用 AI 尋找 10 倍利潤的熱賣產品，主要針對 Shopify 商店，包含快速監控對手、進行市場研究、熱銷產品研究找到利基市場、進行大量店舖主題設計參考等
- Rask.ai：領先的AI視頻本地化和配音工具，告別昂貴的翻譯員。我們的目標是用人工智能提供不亞於人類的配音和翻譯體驗
- Wincher：一款追蹤 SEO 成效的工具：算是超級簡易版的 Ahrefs，可以直接連接 Google Search Console 簡約地呈現數據，用一用也是清爽的，等未來功能越來越豐富時，或許可以考慮付費版
- Writesonic：快速創作部落格、廣告、電子郵件和網站所需的內容，並進行SEO優化，這是最令人期待的 AI 內容產生軟體！其中可以安裝 Chrome extension，然後快捷鍵可以直接呼叫輸入視窗，超級方便。即將推出 ChatSonic AI Bot for Businesses: Customer Support AI Chatbot，類似 Chatbase，這類線上客服 AI Chat 比以往的 Bot 還更人性化且反應不會過於機器人。
- CopyAI：行銷文案 AI 自動產生器 CopyAI is an AI-powered copywriter that generates high-quality copy for your business.
- Chatbase：利用您擁有的知識庫，打造一個AI聊天機器人，並輕鬆將其添加至您的網站中
- 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：質感優雅的線上表單
- NoteForms：專門整合 Notion 的表單建立，其官方網站首頁揭示使用者包含哈佛大學、耶魯大學、現代汽車等都有在用。因為我本身主要使用 Notion 管理專案，這大大方便多了，快速建立表單、蒐集回饋直接存到 Notion，節省不少切換軟體與資料轉移的人力
- UXPressia：快速創建專業的顧客旅程地圖 Customer Journey Map、人物誌 Persona 和影響地圖 Impact Map，還有各種模板可以直接套用。
- AlsoAsked：People Also Ask keyword research tool 若要撰寫 SEO 文章，這是一款可以考慮使用的工具，輸入關鍵字後會自動產生樹狀圖表呈現內容延伸標題
- Beehiiv：滿新穎的電子報訂閱工具，相當輕巧。時常被拿來跟 Substack 相比
- Surfer：SEO 工具，主要可用做 SEO 內容編輯者使用， AI 產生 SEO 文案、關鍵字推薦、SEO Audit 等功能，介面設計滿新穎的，賞心悅目！可以玩玩看，七天內可以退款。
- Plerdy：全方位的網站優化分析工具，目標為提供網站優化與轉換率，擁有如此多的功能費用也算平易近人，包含 Heatmap、Session Replay、NPS、Ecommerce Analytics、Event Tracking Tools、Funnel Analysis、SEO Checker、UX assistant、Ecommerce Analytics 等（但沒有 AB Testing）
- VWO：這款是我夢寐以求的 AB Testing 軟體，其功能的專業程度與順暢度相當高！可以先用免費試用三十天，有提供免費版和付費版，免費版可以當作小試身手，若專注在網站轉換率搭配大量測試各種設計與文案版本測試則可以考慮升級為付費版本。
- ABtesting AI：有用過 AB Testing 在優化網站嗎？來試試 AI 的 Testing，有免費方案可以測試
- ClickMagick：在找 AB Testing 工具時發現 ClickMagick，也看了其他 YouTuber 簡介，感覺相當易用，找時間實測
- Frase：彈指之間用 AI 協助搜尋、撰寫與優化 SEO 文章
- AppSumo：限時優惠的一次性付費數位軟體販售平台（大幅降低成本）
- Tidio：設計優質的線上交談工具 Online Chat
- Help Scout：線上客服（Zendesk 的替代方案）
- HeySummit：舉辦線上虛擬研討會
- SimplyBook：線上預約排程系統 及 App 預約軟體
- Liinks：一頁式多連結網頁，整合多個社群、官網的一頁式網站
- LearnWorlds：創建與銷售線上課程網站平台
- Teachable：創建與銷售線上課程網站平台
- Make：視覺化自動化工作流程，將數據串接等在各種軟體來回穿梭，提升工作效率
- Bardeen AI：結合 AI 的自動化工作流程，整合各種常見 App
- Piktochart：資訊圖表設計工具
- 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.
- CSS Scan 3.0：在進行網站開發時，檢查、複製和編輯 CSS 的最快速、最簡單的方式，跟「檢查元素」說再見——透過滑鼠懸停於任何元素上，即可立即檢查其 CSS，並透過一個點擊複製其所有規則。
- 陸續蒐藏與研究…
有任何想問的問題，歡迎填寫表單留言或寄信給我 irving@irvinglab.com、FB 粉絲團或直接線上交談，我們一起交流、成長！附上我的網頁設計作品，可以來逛逛喔！歡迎加入 Shopify 網站設計與架站學習交流：Line 社群 一起交流與學習！但在美國的用戶無法加入台灣的 Line 社群，所以我也另外建立了 Telegram 社群，兩邊珍貴的經驗會同步分享與整理。若想進一步了解服務內容，可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號留下訊息給我們。
