So sánh dịch vụ placeholder image 2026 | placehold.co, Picsum, Kawa, local

(Cập nhật: 19 tháng 7, 2026 ) dummy image placeholder placehold.co picsum so sánh frontend mockup
Kết luận

Chọn dịch vụ placeholder theo mục đích, không theo thói quen copy URL. Moodboard tạm: Picsum có seed. Wireframe / đo layout: nền đơn sắc + nhãn kích thước. Storybook, CI, demo khách offline: file local hoặc Canvas trên trình duyệt — không hotlink placehold/picsum trên production. Tạo ảnh giữ chỗ Kawa sinh PNG/JPEG local (preset OGP, Instagram, FHD…), không đăng ký.

Team frontend Việt Nam hay dán https://placehold.co/800x400 vào HTML “cho có ảnh”, rồi một tuần sau CDN chậm, Storybook đỏ, hoặc khách mở laptop không mạng thấy ô vỡ. Vấn đề không phải “thiếu ảnh đẹp” — mà là chọn sai loại dịch vụ placeholder.

Bài này so sánh các dịch vụ dummy image phổ biến năm 2026 theo tiêu chí thực tế: ổn định, offline, regression, nhãn tùy chỉnh, và khi nào nên bỏ CDN để dùng tool local.

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

  • Phân loại 5 kiểu nguồn placeholder (CDN size, CDN ảnh thật, thú cưng, SVG/data URI, Canvas local)
  • So sánh placehold.co, via.placeholder, Lorem Picsum, placekitten, Kawa Dev Tools
  • Checklist chọn theo mục đích: wireframe, landing demo, Storybook, OGP
  • Tránh lỗi phổ biến: hotlink production, ảnh ngẫu nhiên phá CI, quên alt
  • Quy trình đưa file vào repo thay vì phụ thuộc URL ngoài

Dummy image / placeholder image dùng để làm gì?

Dummy image (ảnh giữ chỗ) là file hoặc URL tạm có width×height xác định, giúp layout không “xẹp” khi chưa có asset brand. Khác skeleton CSS: skeleton tô khung, còn dummy là ảnh thật — kiểm tra được object-fit, intrinsic size và crop.

Với freelancer và team outsourcing ở Việt Nam, nhu cầu thường là:

  • Demo landing tuần này trong khi khách chưa gửi ảnh sản phẩm
  • Storybook / Chromatic cần pixel ổn định
  • Kiểm tra OGP 1200×630 trước khi marketing có file cuối
  • Gửi mock cho PM trên máy không luôn có mạng ổn định

Mỗi nhu cầu đó không dùng chung một dịch vụ.

5 kiểu nguồn placeholder

5 kiểu dịch vụ / nguồn placeholder
Kiểu Ví dụ Phù hợp
① CDN size đơn sắc placehold.co, via.placeholder Wireframe nhanh trong HTML; cần mạng
② CDN ảnh thật Lorem Picsum Moodboard, pitch tạm; rủi ro đổi ảnh
③ Ảnh theme placekitten, placebear… Demo vui nội bộ; tránh khách enterprise
④ SVG / data URI SVG inline, data:image/svg+xml Zero dependency, nhẹ, kiểm soát hoàn toàn
⑤ Canvas local Kawa Dev Tools, script Node Offline, nhãn tùy chỉnh, commit vào repo

① CDN size đơn sắc

URL kiểu https://placehold.co/800x600 hoặc /800x600/cccccc/666666?text=Hero. Ưu: một dòng HTML là có ảnh. Nhược: phụ thuộc DNS/CDN; không mở được offline; Referer có thể lộ domain staging.

② CDN ảnh thật

Lorem Picsum (picsum.photos) trả ảnh đẹp. Ưu: khách “cảm thấy” gần production. Nhược: seed/ID sai → ảnh đổi; visual regression fail; đôi khi nội dung không phù hợp brand.

③ Ảnh theme

placekitten và các biến thể — dễ nhớ, vui. Không nên dùng trong pitch B2B hoặc tài liệu bàn giao CMS.

④ SVG / data URI

Tự viết SVG xám + chữ 800×600, nhúng inline hoặc file .svg trong repo. Ưu: không CDN, diff Git rõ. Nhược: phải tự quản kích thước; JPEG/PNG lớn hơn thì Canvas tiện hơn.

⑤ Canvas local

Vẽ trên trình duyệt, tải PNG/JPEG. Dummy image Kawa thuộc nhóm này: preset OGP 1200×630, Instagram 1080×1080, FHD 1920×1080, Story, Banner; chỉnh màu nền/chữ; nhãn trống thì hiện {w}×{h}. Không upload server, không cần tài khoản.

Bảng so sánh dịch vụ cụ thể

So sánh dịch vụ placeholder (2026)
Dịch vụ Cách dùng Điểm mạnh / rủi ro
placehold.co Hotlink URL size + màu + text Nhanh; phụ thuộc mạng; không offline
via.placeholder Hotlink tương tự Từng phổ biến; availability kém ổn hơn placehold
Lorem Picsum URL + id/seed Đẹp; ảnh đổi / NSFW / phá Chromatic nếu không khóa seed
placekitten Hotlink mèo Vui; không professional; không đo layout rõ
SVG trong repo File hoặc data URI Ổn định CI; tự maintain
Kawa (Canvas) Sinh + tải PNG/JPEG Offline sau khi mở trang; preset; nhãn VI tùy ý

Cách đọc nhanh

Mục đíchChọn
Prototype HTML 5 phútplacehold.co
Moodboard đẹpPicsum có seed cố định
Storybook / CISVG hoặc PNG local
Demo khách / cafe Wi-Fi yếuFile trong /public hoặc sinh trước bằng Kawa
OGP / hero có nhãn QACanvas local + chữ OGP 1200×630

7 tiêu chí chọn dịch vụ placeholder

1. Offline và mạng Việt Nam

Cafe, coworking, VPN — CDN ngoài đôi khi chậm hoặc bị chặn tạm. Nếu demo khách trên máy không mạng → file local. Tool trình duyệt chỉ cần load trang một lần rồi tải ảnh về.

2. Ổn định visual regression

Picsum không seed → mỗi lần build ảnh khác → Chromatic/ Percy báo diff giả. placehold ổn định hơn về pixel đơn sắc, nhưng vẫn fail khi CDN down. Commit file là cách chắc nhất.

3. Nhãn kích thước và tiếng Việt

QA nhìn screenshot cần thấy 1920×1080 hoặc Hero 16:9. placehold hỗ trợ ?text=; Kawa cho nhãn tùy chỉnh (kể cả tiếng Việt không dấu hoặc có dấu tùy font Canvas). Picsum không in size lên ảnh — khó debug crop.

4. Kiểm soát nội dung

Ảnh thật ngẫu nhiên có thể lệch văn hóa hoặc brand guidelines khách. Agency / outsourcing nên mặc định nền xám + chữ, trừ khi khách yêu cầu “look & feel gần thật”.

5. Production vs dev

Cấm hotlink placeholder trên production. Bot index, CDN chết = trang vỡ, và lộ dependency ngoài. Pipeline: dummy → asset tối ưu (WebP) trong cùng path hoặc đổi URL có kiểm soát.

6. Kích thước file và format

PNG nhãn rõ cho UI; JPEG nhẹ hơn cho mock lớn. Kawa hỗ trợ cả hai. SVG cực nhẹ cho khung đơn sắc.

7. Ma sát đăng ký / API key

Hầu hết CDN placeholder không cần key — tốt. Tránh dịch vụ bắt OAuth chỉ để lấy ảnh xám 800×600.

Case study 1: Landing freelance — placehold vs local

Tình huống: Freelancer Hà Nội demo shop cho khách. Dùng picsum.photos/1200/600 trên Vercel preview. Khách mở buổi họp: ảnh hoa thay bằng ảnh phố — “sao design đổi?”. Chromatic cũng đỏ vì seed không cố định.

Sửa: Sinh hero-1920x1080.png bằng công cụ dummy image, commit /public/placeholders/, img gắn width/height và alt mô tả sản phẩm sẽ vào. Preview ổn định; khách chỉ comment layout, không comment “ảnh lạ”.

Case study 2: Storybook team outsourcing

Hotlink placehold trong 40 story. CI runner không mạng ra ngoài → toàn bộ story broken. Đổi sang SVG xám trong src/assets/placeholders/ — build xanh, review PR không phụ thuộc DNS.

Checklist trước khi chọn URL placeholder

  • Mục đích là đo size hay đẹp tạm?
  • Có chạy offline / CI không?
  • Ảnh có seed/ID cố định nếu dùng Picsum?
  • Production đã cấm hotlink CDN placeholder chưa?
  • File tên có số đo (card-3x2-900x600.png)?
  • alt đã viết nội dung thật sẽ thay chưa?
  • OGP dùng 1200×630 riêng, không reuse hero méo?

Cách dùng nhanh trên Kawa Dev Tools

  1. Mở Tạo ảnh giữ chỗ
  2. Chọn preset (OGP, Instagram, FHD, Story, Banner) hoặc kéo width/height (1–4096)
  3. Chỉnh màu nền / màu chữ; để trống nhãn để hiện kích thước, hoặc gõ Hero 16:9
  4. Tải PNG hoặc JPEG → đưa vào repo

Công cụ chạy Canvas trên trình duyệt — phù hợp khi bạn không muốn phụ thuộc placehold/picsum và cần nhãn rõ cho QA.

Ví dụ HTML sau khi có file local

<img
  src="/placeholders/ogp-1200x630.png"
  width="1200"
  height="630"
  alt="Ảnh chia sẻ bài viết blog (sẽ thay bằng cover marketing)"
/>

So với hotlink:

<!-- Dev tạm OK; đừng ship production -->
<img src="https://placehold.co/1200x630" width="1200" height="630" alt="" />

Lỗi thường gặp khi so sánh / dùng dịch vụ

  1. Coi mọi CDN như nhau — Picsum ≠ placehold về ổn định pixel
  2. Quên alt lúc đặt dummy → bàn giao thiếu a11y
  3. Stretch 40×40 thành hero bằng CSS — placeholder nói dối tỷ lệ
  4. Dùng placekitten trong deck khách — mất uy tín không cần thiết
  5. Giữ URL placeholder trên production hàng tháng sau launch

FAQ ngắn trong bài

Có cần đăng ký không? Hầu hết CDN placeholder và Kawa đều không cần.

Miễn phí? Các lựa chọn phổ biến ở trên đều dùng được miễn phí cho dev; vẫn ưu tiên local khi scale team.

SVG có đủ không? Đủ cho khung đơn sắc; cần JPEG lớn hoặc preset nhanh thì Canvas tiện hơn.

Liên kết liên quan

Chọn đúng dịch vụ placeholder một lần — wireframe, CI và buổi demo với khách sẽ đỡ “ảnh biến mất” hơn việc chỉ nhớ một URL duy nhất.