Ảnh placeholder đúng size trước khi có asset | Wireframe & landing【2026】

Designer gửi khung xám trong Figma. Dev nhúng tạm 800×200. Ảnh thật đến là 4:5 hoặc 16:9 — trang nhảy, Lighthouse báo CLS, PM hỏi vì sao hero bị méo. Lỗi không nằm ở “chưa có asset”; lỗi nằm ở placeholder nói dối về kích thước.

Bài này dành cho frontend, freelancer làm landing, và team outsourcing ở Việt Nam: cách dùng dummy image đúng size trước khi có ảnh thật, checklist bàn giao CMS, và khi nào nên sinh local thay vì CDN ngoài.

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

• Hiểu dummy image / ảnh placeholder khác skeleton CSS thế nào
• Khóa hợp đồng kích thước (aspect + pixel) cho wireframe và landing
• Chọn size phổ biến: hero, OGP, Instagram, banner ads
• Tránh CLS bằng width/height + aspect-ratio
• So sánh placehold.co / picsum / file local / tool trình duyệt
• Checklist thay dummy → asset production

---

Dummy image là gì — và khi nào cần

Dummy image (ảnh giữ chỗ, placeholder image) là file ảnh tạm với kích thước cố định, thường nền đơn sắc hoặc có chữ ghi 1920×1080. Mục đích: giữ đúng footprint của media sẽ ship, để layout, crop và QA không phụ thuộc vào “ảnh đẹp đã sẵn”.

Không nhầm với skeleton / background xám

Kiểu	Là gì	Kiểm tra được gì
Skeleton / bg-gray	CSS tô khung	Spacing, typography — không kiểm tra crop
LQIP / blur-up	Ảnh nhỏ mờ	Cảm giác load — vẫn cần box tỷ lệ đúng
Dummy image có size	File PNG/JPEG thật	Intrinsic size, object-fit, nhãn QA trên screenshot

Wireframe HTML/CSS và landing “chờ brand kit” cần dummy có số đo. Chỉ nền xám thì đến lúc thay ảnh 3:2 vào slot 16:9 mới phát hiện — thường là ngay trước launch.

Ai hay cần trong thực tế Việt Nam

• Freelance landing: khách chưa gửi ảnh sản phẩm, nhưng cần demo responsive tuần này
• Outsourcing / agency: Figma có khung, asset đang duyệt pháp lý — sprint không dừng
• Storybook / Chromatic: cần pixel ổn định; CDN ngẫu nhiên phá regression
• OGP / share card: test layout Meta/Zalo trước khi có ảnh marketing

---

Hợp đồng kích thước trước khi có art

Trước khi sinh file, chốt 4 mục với designer hoặc PM:

1. Tỷ lệ khung hình (16:9, 3:2, 1:1, 9:16…)
2. Kích thước hiển thị (CSS: full-bleed hero vs max-width 1200px)
3. Kích thước file tối thiểu upload (ví dụ avatar hiển thị 128px → upload ≥ 256px)
4. Focal point (object-position: center top cho mặt người)

Ghi vào ticket. Editor CMS upload 3000×3000 vào slot 64×64 nếu không có hợp đồng — dummy đúng size là cách rẻ nhất để “dạy” layout trước khi họ upload.

Size thường dùng trên landing & wireframe

Công cụ dummy image Kawa có sẵn các preset: 800×600, OGP 1200×630, Instagram 1080×1080, FHD 1920×1080, Story 1080×1920, Banner 300×250. Chỉnh width/height tới 4096px, màu nền, màu chữ; để trống nhãn thì tự hiện {w}×{h}.

---

HTML/CSS: reserve chỗ để CLS ≈ 0

Sinh file đúng size chưa đủ — trình duyệt cần biết hình học trước khi ảnh paint xong.

<img
  src="/placeholders/hero-1920x1080.png"
  width="1920"
  height="1080"
  alt=""
  class="hero-media"
/>

.hero-media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #e5e7eb;
}

• width/height attributes: giúp browser tính ratio sớm, kể cả khi CSS chưa load
• aspect-ratio: bảo vệ layout fluid khi width: 100%
• alt="": đúng cho stub trang trí; nếu dummy đứng chỗ ảnh sản phẩm có nghĩa, viết alt ngắn khớp ý định cuối
• object-fit: cover: nhớ ghi focal point — nếu không, mặt người có thể bị cắt khi asset thật vào

Nhãn chữ trên chính file PNG (1920×1080 hoặc Hero 16:9) giúp QA nhìn screenshot mà biết slot nào sai — xám trơn không làm được việc đó.

---

Quy trình 5 phút với Kawa Dev Tools

1. Mở Tạo ảnh giữ chỗ — không cần đăng ký, chạy trên trình duyệt
2. Chọn preset (OGP / FHD / Story…) hoặc nhập width × height
3. Tuỳ chỉnh màu nền / màu chữ; nhãn trống = tự hiện kích thước
4. Tải PNG (nền phẳng, nhỏ) hoặc JPEG nếu cần mock nén
5. Đặt vào repo: public/placeholders/hero-1920x1080.png — tên file mang số đo
6. Gắn width/height + aspect-ratio; khi có asset thật chỉ đổi src (và đường dẫn CDN), giữ nguyên attributes

Công cụ vẽ bằng Canvas local — không upload ảnh lên server lạ. Phù hợp demo khách, repo private, và máy không muốn phụ thuộc CDN nước ngoài lúc offline.

---

So sánh cách lấy placeholder

Quy tắc team: local hoặc tool trình duyệt cho dev; staging có thể dùng asset gần production; production chỉ asset đã tối ưu. Hotlink random photo CDN = fragile + privacy review khó qua.

---

Case study

Case 1: Freelancer — landing chờ ảnh sản phẩm

Tình huống: Khách SME chưa chụp sản phẩm; cần demo mobile/desktop tuần này để chốt scope.

Cách làm: Sinh 3 dummy — hero 1920×1080, card 1200×800, OGP 1200×630 — nhãn rõ size. CSS khóa aspect-ratio. Demo trên điện thoại khách không nhảy layout.

Tránh: Một ảnh 400×300 stretch full-bleed rồi “sẽ thay”. Khi ảnh 16:9 vào, header và CTA lệch hết.

Case 2: Team outsourcing — Storybook + Chromatic

Tình huống: Mỗi lần CI, picsum trả ảnh khác → fail visual diff giả.

Cách làm: Commit dummy xám có nhãn vào /static/placeholders/. Stories pin URL local. Designer review crop trên nhãn 1080×1080 thay vì đoán.

Kết quả: Diff chỉ đỏ khi code đổi — không phải khi CDN đổi ảnh mèo.

Case 3: OGP trước khi có ảnh marketing

Tình huống: Cần test share Zalo/Facebook trước campaign.

Cách làm: Preset 1200×630, nền brand tạm, chữ OGP 1200×630. Kiểm tra crop title/description không đè lên vùng quan trọng. Khi có ảnh marketing, giữ đúng 1200×630 — không đổi tỷ lệ giữa lúc test và lúc launch.

---

6 lỗi thường gặp

1. Stretch ảnh nhỏ thành hero

40×40 + width: 100% “chạy được” đến khi object-fit và focal point vào — mọi thứ méo. Dummy phải gần display slot.

2. Dummy 16:9, asset thật 4:5

Layout đã học 16:9; ảnh dọc vào → letterbox hoặc crop mặt. Khóa tỷ lệ trong ticket trước khi chụp ảnh.

3. Quên width/height trên <img>

CSS aspect-ratio tốt, nhưng attributes giúp trước khi stylesheet tới. Dùng cả hai.

4. Dummy JPEG 2MB màu xám

Placeholder nặng vẫn tốn bandwidth. Dùng PNG phẳng hoặc JPEG nén mạnh — mục tiêu là layout fidelity, không phải ảnh đẹp.

5. Hotlink placehold trên production

Demo khách offline chết; Referer lộ; CDN đổi policy. Thay bằng file trên cùng origin hoặc CDN của bạn.

6. Nhét tiêu đề section chỉ trong pixel PNG

Screen reader không đọc chữ vẽ trên ảnh. Tiêu đề thật vẫn phải là HTML; nhãn trên dummy chỉ phục vụ dev/QA.

---

Checklist trước launch

• Mỗi slot media có tỷ lệ và size ghi trong ticket
• Dummy khớp tỷ lệ đó; tên file có số đo
• width/height + aspect-ratio đã gắn
• Focal point / object-position đã ghi chú
• Storybook không phụ thuộc CDN placeholder ngoài
• OGP đúng 1200×630 (hoặc chuẩn bạn chọn) trước khi đổi ảnh marketing
• Production: mọi /placeholders/ đã thay bằng URL asset thật
• Trạng thái ảnh 404 vẫn giữ chiều cao card (không collapse)

Placeholder nói dối về size dạy layout phải nhảy. Placeholder nói thật về kích thước khiến việc thay asset nhàm chán — đúng thứ bạn muốn ngày launch.

---

Tóm tắt

• Dummy image khóa hình học; art đến sau
• Wireframe / landing: khớp hero, card, OGP từ đầu
• Reserve chỗ bằng attributes + aspect-ratio
• Sinh nhanh bằng dummy image Kawa (Canvas local, preset OGP/FHD/Story…)
• Không dùng picsum/placehold làm dependency runtime

---

Bài liên quan