統一產生 3 至 6 種固定尺寸,就能涵蓋各種使用情境了。
企業電商 CMS 的圖片規格,各區塊所需尺寸不同,但不必把流程設計得太複雜。
後端圖片上傳後,除保留原始檔外,統一產生 3 至 6 種固定尺寸。若沒有明確規格,可先採用六種:
xs:160px
sm:320px
md:768px
lg:1280px
xl:1920px
xxl:2560px
系統應依原圖比例縮放,不進行裁切;若原圖寬度小於指定尺寸,也不要向上放大,就直接存原圖即可。
往後系統各處需要圖片時,只要在呼叫元件時傳入 xs、sm、md 等尺寸代碼,即可取得相對應的圖片版本。
由於電商網站重視載入速度,不應一律使用原始圖檔。
這種做法可因應列表頁、商品詳情頁等不同場景,提供工程與設計更大的彈性,同時維持網站效能、加快載入速度並提升 SEO 表現。