統一產生 3 至 6 種固定尺寸,就能涵蓋各種使用情境了。


企業電商 CMS 的圖片規格,各區塊所需尺寸不同,但不必把流程設計得太複雜。

後端圖片上傳後,除保留原始檔外,統一產生 3 至 6 種固定尺寸。若沒有明確規格,可先採用六種:

xs:160px
sm:320px
md:768px
lg:1280px
xl:1920px
xxl:2560px

系統應依原圖比例縮放,不進行裁切;若原圖寬度小於指定尺寸,也不要向上放大,就直接存原圖即可。

往後系統各處需要圖片時,只要在呼叫元件時傳入 xs、sm、md 等尺寸代碼,即可取得相對應的圖片版本。

由於電商網站重視載入速度,不應一律使用原始圖檔。

這種做法可因應列表頁、商品詳情頁等不同場景,提供工程與設計更大的彈性,同時維持網站效能、加快載入速度並提升 SEO 表現。


⭐️ Shopify 網站開發服務(給品牌)
https://job.turn.tw/shopify-services

⭐️ 川川電商事務所(全客製電商開發服務)
https://chuanchuan.tw

⭐️ 台灣 Shopify 商家交流 LINE 群(非官方)
https://line.me/ti/g2/PZ_1LILWVWWuzZQ50HNpYA-A3k6QXWF6znqoBQ

⭐️ 台灣 Shopify 開發者 LINE 群(非官方)
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA

共有 0 則留言


⭐️ Shopify 網站開發服務(給品牌)
https://job.turn.tw/shopify-services

⭐️ 川川電商事務所(全客製電商開發服務)
https://chuanchuan.tw

⭐️ 台灣 Shopify 商家交流 LINE 群(非官方)
https://line.me/ti/g2/PZ_1LILWVWWuzZQ50HNpYA-A3k6QXWF6znqoBQ

⭐️ 台灣 Shopify 開發者 LINE 群(非官方)
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA
🏆 本月排行榜
🥇
站長阿川
📝45   💬1  
647
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次