客戶在進行上稿時，經常會詢問我們網頁中圖片裁切相關事項，例如：要給多大的尺寸比較適當？畫面中的哪些部分有可能被裁掉？手機版要不要另外上圖？
其實，隨著使用圖片的情境不同，要配合各種設計及功能，就會導致適合的解法有所不同。根據我們的經驗，網站圖片在上稿時通常有以下幾種情境：
- 需要符合整體網頁視覺排版的圖片，這會強迫圖片必須被裁切至符合版面的大小。
- 有滾動視差動態的圖片，需要預留彈性空間來做裁切
- 有文字資訊的圖片：EDM、商業 BANNER、重要公告等，不可以被裁切，需要完整的呈現
根據以上幾種情境可能會產生不同的解決方案，我們先來認識一下網頁中經常使用的幾種 CSS 裁切方式：fill, contain, 跟 cover，這幾種都能使用 Figma 先模擬出來。
📌fill
fill是最基本的屬性，圖片會完整填滿容器。無論容器的比例如何，圖片都會被拉伸或壓縮以適應容器的大小，然而圖片可能會變形，導致看起來失真、不專業，因此通常不會使用。
📌contain
contain 會保持圖片比例與完整性。圖片會被完整縮放以適應容器，但不會超過容器的範圍。這樣圖片不會變形，但可能會留下一些空白區域，一般來說不會在容器長寬都有指定的設計排版中使用。
📌cover
當我們使用 cover 屬性時，圖片會被縮放和裁切，以確保它完全覆蓋容器，並保持圖片的原始比例。這表示無論容器的比例如何，圖片都會填滿容器的整個空間。基本上兼具美觀與實用，是設計中最常使用的屬性。
認識完技術層面的原理，現在讓我們回到上稿時可能會遇到的幾種情境：
1.需要符合整體網頁視覺排版的圖片，這會強迫圖片必須被裁切至符合版面的大小。
例如恆隆行網站中大量使用的正方形圖片，可能是經過裁切後才上傳，這個方式可以一開始就確保想要保留的部位。也可能是上傳其他比例的圖片，再使用 css object-fit:cover 語法，讓圖片自動等比符合正方形容器大小，由於圖片需要填滿容器且保持比例，當圖片的長寬比與容器的長寬比不一致時，圖片的上下或左右會被裁切，建議設計圖片時將重要內容放在圖片的中間部分，或者採用較不怕被裁切的排版設計。
2.有滾動視差動態的圖片，需要預留彈性空間來做裁切
滾動視差是網站中經常使用到的效果，利用圖片容器與內容的移動速度差來營造細膩的動態層次。有使用此一特效的圖片，要特別注意預留上下或是左右（視滾動方向而訂）約20%的尺寸，才有空間可以滾動。
上下滾動範例：ES Design 作品集列表
左右滾動範例：Holo+face 服務流程輪播圖
3.有文字資訊的圖片：EDM、商業 BANNER、重要公告等，不可以被裁切，需要完整的呈現
這一情況通常會出現在商品詳細內頁的編輯器， contain 在文章編輯器中是默認常用的模式，因為編輯器中的圖片容器通常不會刻意指定高度，而是當圖片寬度拉伸至容器寬度時，高度自動等比縮放，這樣不同比例的圖片都能在文章中完整顯示，也避免變形，看起來更加自然和美觀。
有資訊的圖片範例：龜記最新消息公告內頁
在手機等小螢幕裝置上，我們經常建議客戶另外提供直式圖片素材，因為在不特別指定圖片高度，高度等比縮放的情況下 （contain 屬性），寬度為了符合手機較窄的螢幕，經常連帶導致圖片高度太扁，而顯得圖片太小。
圖片的建議尺寸
那具體來說，圖片素材的尺寸要怎麼抓呢？通常我們會以顯示大小的兩倍長寬來做估算。 例如：設計稿中有一張 800px 乘 600px 的圖片，就會建議客戶在準備素材時，寬度高度分別至少要有 1600px 和 1200px，確保有足夠的解析度，保持網頁質感。然而，圖片清晰固然重要，也不推薦使用尺寸過大的圖片，太大的圖片讀取速度很慢，也會大大影響客戶端的感受，建議還是先將圖片壓縮成適當大小再上傳網頁！
總結
- 需要符合整體網頁視覺排版的圖片，會讓圖片等比填滿容器，導致上下或左右部分需要裁切，建議將重要內容放在圖片中間，或上稿前先準備好裁切成容器相同比例的圖片。
- 有滾動視差效果的圖片，需要視滾動方向（上下或左右）預留更多彈性功能做特效。
- 不能被裁切的重要資訊圖，通常會固定寬度，讓高度自動符合。手機版建議另外準備直式圖片。
- 圖片長寬建議以顯示大小的兩倍來估算，也要注意壓縮成適當的檔案尺寸。
