Resize ảnh giữ tỷ lệ | Letterbox vs crop trước khi WebP cho landing SME

Landing Shopee-style / agency giao cho freelance VN: hero 16:9, card sản phẩm 1:1, OGP 1.91:1. Designer gửi PNG 3:4 từ điện thoại. Ai đó kéo cả hai cạnh về 1200×630 → mặt người bị dẹt. Sau đó team còn hỏi “WebP quality bao nhiêu?” — sai thứ tự.

Bài này dừng ở crop / resize / letterbox trước bước nén. (Quality WebP đã có bài riêng — không lặp lại ở đây.)

Bài viết này giúp bạn

• Giữ aspect ratio khi đổi kích thước file
• Phân biệt letterbox vs crop cho từng slot
• Batch catalog SME không méo SKU
• Biết object-fit làm gì — và không thay resize
• Checklist trước khi đưa ảnh vào Lighthouse

---

Vì sao tỷ lệ quan trọng hơn “đúng số pixel”

Người dùng không đếm 1080. Họ thấy chai nước kéo ngang, logo oval, nhân viên “mập bất thường”. Trên thị trường VN cạnh tranh visual (Facebook Ads, Zalo OA, landing dịch vụ), một ảnh méo = cảm giác làm ẩu.

Công thức an toàn:

1. Biết slot (CSS width × height hoặc tỷ lệ)
2. Quyết giữ toàn ảnh hay cắt cho đầy
3. Xuất file gần kích thước hiển thị
4. Rồi mới nén / WebP

---

Letterbox vs crop — chọn theo nội dung

.hero-img {
  width: 100%;
  height: 360px;
  object-fit: cover;   /* đầy slot — chấp nhận cắt mép */
  object-position: center top; /* ưu tiên phần trên (mặt người) */
}

.chart-img {
  width: 100%;
  height: 360px;
  object-fit: contain; /* không cắt số liệu */
  background: #f3f4f6; /* “letterbox” có chủ đích */
}

Sai phổ biến: width: 100%; height: 360px không object-fit → trình duyệt stretch → méo. Thêm cover/contain hoặc chỉ set một chiều.

---

Resize file: một cạnh, khóa tỷ lệ

Trong editor hoặc tool resize:

• Gốc 4000×3000 (4:3)
• Cần rộng hiển thị ~800 CSS px → xuất 1600×1200 (2×) hoặc 800×600 (1×)
• Chỉ nhập width 1600, height auto / khóa tỷ lệ

SAI:  ép 1200×630 từ ảnh 3:4  → stretch
ĐÚNG: crop vùng 1.91:1 rồi resize 1200×630
ĐÚNG: contain vào canvas 1200×630 (viền) nếu không được cắt

OGP / Facebook thường ~1200×630. Ảnh dọc sản phẩm: crop hoặc letterbox — đừng kéo giãn.

Tool Kawa: upload (kéo thả nhiều ảnh), chỉ định rộng/cao, giữ tỷ lệ, tải xuống — xử lý trong trình duyệt, phù hợp ảnh catalog chưa muốn đẩy lên CDN lạ.

---

Batch catalog SME — quy trình thực tế

Shop 200–2000 SKU, ảnh từ nhà máy / điện thoại không đồng bộ:

1. Quy tắc một dòng: cạnh dài tối đa 1200px (hoặc 1600 nếu zoom gallery), giữ tỷ lệ
2. Không upscale ảnh gốc 600px lên 1200 — để nguyên hoặc chỉ nhẹ cho đồng bộ thư mục
3. Chạy batch cùng setting trong image-resize
4. Spot-check: 5 SKU có người, 5 SKU chữ trên bao bì, 5 SKU nền trắng
5. Upload CDN / S3; sau đó mới pipeline WebP nếu cần

Mục tiêu	Gợi ý kích thước file	Ghi chú
Thumb grid	cạnh dài 400–600	cover trên CSS vuông
Trang chi tiết	cạnh dài 1200–1600	contain hoặc cover tùy layout
OGP chia sẻ	1200×630 sau crop	tỷ lệ cố định mạng xã hội
Zalo/FB ads	theo spec campaign	crop tay subject

---

Case study

Landing dịch vụ — hero bị “dẹt”

Agency giao PSD hero 1920×800. Dev nhét ảnh chân dung 3:4 vào bằng cách set cả hai chiều. Fix: object-fit: cover + object-position: center 20%, đồng thời export file 1920×800 đã crop từ Lightroom. LCP giảm vì bỏ ảnh 5MB full-body.

Catalog mỹ phẩm SME

80 ảnh JPEG lẫn chiều. Freelance đặt width=1000, lock ratio, batch. Ba ảnh bị khách phàn nàn “cắt mất nắp chai” — vì bước sau dùng cover trên card cao cố định. Đổi card sang tỷ lệ gần ảnh hoặc crop tay trước. Resize không thay được quyết định crop.

---

Checklist trước WebP / trước ship

• Biết kích thước hiển thị (không chỉ “full HD”)
• Đã chọn contain / cover / crop tay
• File không lớn hơn ~2× display width không cần thiết
• Không upscale
• Batch cùng một quy tắc cạnh
• Mobile 4G: mở trang, nhìn hero + 1 card
• Rồi mới chỉnh quality WebP theo loại asset

---

Liên quan

• Thay đổi kích thước ảnh — giữ tỷ lệ, batch local
• Bài WebP quality (đã riêng) — sau khi đúng kích thước
• Nén ảnh khi cần giảm byte sau resize

Bookmark lý do: thứ tự đúng slot → letterbox/crop → resize → WebP, kèm quy tắc batch catalog SME không méo sản phẩm.