建立在小顯示器上保持有用的縮圖

卡片圖像可幫助某人快速識別產品、文章或圖庫項目。 它不必顯示大照片中的每個細節。 選擇一個在很小的時候仍然可以理解的構圖：一個完整的房間鏡頭可能比近距離的視圖更有用，而產品縮圖仍然必須顯示正確的項目而不是有吸引力但模棱兩可的細節。

匯出前檢查卡片的形狀。 Fit In In In 保留了完整的來源，但您的網站可能會在以後使用自己的樣式裁剪它。 精確的裁切區域為您提供了該槽的深思熟慮的組合。 使用更大的來源進行擴展的圖庫或產品縮放。 不要將唯一的詳細圖像替換為縮圖，並期望放大器在訪客打開時重新創建其細節。

起始預設適合 800 x 800 像素，選擇 WebP 並套用光銳化。 這是一個為卡片候選者準備的範例，而不是通用的縮圖要求。 測量實際的顯示寬度和響應密度需求，然後選擇適當的出口。 一個寬廣的來源會將其比率保持在盒子內，而不是自動變為正方形。

以真實卡片的大小檢查影像。 臉部、標籤或獨特的產品功能應該仍然可辨識。 微小的嵌入詞可能更好地作為真實的卡片文字提供。 與光銳化進行比較，因為強的邊緣對比度會使小圖像忙碌。 如果 WebP 在您的工作流程中無用，則在相同維度上測試 JPEG。 將 PNG 用於需要現有透明度的資產； 目前的 WebP 匯出是不透明的。

將檔案放在真實網格中並檢查手機、平板寬度佈局和大型顯示器。 確認瀏覽器實際上正在載入縮圖而不是全尺寸圖像。 在站點實施中提供適當的響應源和保留尺寸。 如果頁面仍然為每張卡片要求不同的超大檔案，則小型本地匯出無效。

檢查整個瀏覽互動。 用作連結的縮圖需要透過其圖像或周圍文字進行有意義的可訪問名稱。 保持裁切區域足夠一致，以便在不隱藏相關內容的情況下進行掃描。 對於畫廊，測試打開項目顯示一個適當的更大來源。 僅批次處理相同角色的圖像，並單獨檢查高產品或寬內飾等異常值。 轉換器在本地建立檔案，不會修改您的網站或發布圖庫。 保留原始設定，以便稍後更改縮圖規則。

選擇一個高大的產品和一張寬大的房間照片作為早期的縮圖測試。 將它們放在真實網格中的普通方形友好圖像旁邊。 檢查共享造型是否隱藏產品結束或使房間無法辨認。 異常值可能需要故意裁剪或單獨的候選人，即使大多數圖像使用相同的規則。 查看正常卡片尺寸的標籤和臉部，並確認當圖片不可用時連結仍然有意義。 此測試可協助您判斷縮圖作為瀏覽的一部分，而不是單獨查看的小檔案。