Cách dùng Tạo Ảnh Placeholder
- Nhập chiều rộng và chiều cao, hoặc nhấn chọn một kích thước có sẵn.
- Chọn nền (màu đơn hoặc gradient), màu chữ và nội dung nhãn —
{w}và{h}sẽ được thay bằng kích thước thực tế. - Chọn PNG, JPG, WebP hoặc SVG rồi tải về — hoặc sao chép data URI hay thẻ
<img>để dán vào HTML. - Cần nhiều kích thước? Mở Tạo nhiều kích thước cùng lúc, nhập mỗi kích thước một dòng rồi tải file ZIP.
Khi nào nên dùng ảnh placeholder
Ảnh placeholder lấp đầy các vị trí ảnh khi tác phẩm thật chưa sẵn sàng: wireframe và mockup, template CMS, design system, dữ liệu test và seed data. Ghi kích thước lên mỗi ảnh giúp lỗi bố cục lộ ra ngay: bạn thấy rõ liệu một ô 1200 × 630 có thực sự nhận ảnh 1200 × 630 hay không.
Nên chọn định dạng nào?
- SVG — chỉ vài trăm byte ở mọi kích thước, rất phù hợp để nhúng trực tiếp trong HTML hoặc dùng làm data URI.
- PNG — giữ màu chính xác và chữ sắc nét, phù hợp với các nơi yêu cầu file raster.
- JPG / WebP — khi hệ thống chỉ chấp nhận ảnh chụp hoặc bạn cần dung lượng file thực tế để test hiệu năng.
Các kích thước phổ biến
| Kích thước | Mục đích |
|---|---|
| 1200 × 630 | Open Graph / ảnh xem trước liên kết |
| 1920 × 1080 | Hero Full-HD, thumbnail video 16:9 |
| 1080 × 1080 | Bài đăng mạng xã hội vuông |
| 300 × 250, 728 × 90, 160 × 600 | Các khung quảng cáo IAB |
Tạo ảnh xem trước thật bằng công cụ tạo OG image, chuyển file bằng ảnh sang Base64, và điền nội dung mẫu vào bố cục bằng công cụ tạo lorem ipsum.
Cũng được tìm dưới tên: ảnh placeholder, tạo ảnh giả, placeholder image generator, ảnh dummy, placeholder svg, tạo ảnh placeholder online, ảnh giả để test.
Các công cụ dùng kèm tốt với Tạo Ảnh Placeholder
- Tạo dữ liệu giả — Tạo tới 10.000 dòng dữ liệu test chân thực — người dùng, sản phẩm, đơn hàng, địa chỉ, công ty hoặc bản ghi API lồng nhau — hoặc tự xây dựng schema riêng.
- Đổi kích thước ảnh — Đổi ảnh về đúng kích thước pixel hoặc theo phần trăm, cắt ảnh theo kích thước mạng xã hội, hoặc đưa ảnh vừa khung kèm màu nền.
- Tạo mã vạch — Tạo mã vạch quét được cho sản phẩm, kho hàng, vận chuyển và thư viện.
- Quét mã QR — Hướng camera vào mã QR, hoặc thả một ảnh hay ảnh chụp màn hình có chứa mã QR.
Câu hỏi thường gặp
Tôi có thể dùng các ảnh này cho mục đích thương mại không?
Có. Ảnh được tạo ngay trên thiết bị của bạn và chỉ chứa chữ và màu do bạn nhập — không cần giấy phép hay ghi nguồn.
Làm thế nào để dùng data URI?
Dán nó làm
src của một <img> hoặc trong url() của CSS. Nó nhúng ảnh trực tiếp vào mã, nên không cần lưu trữ file nào.Kích thước tối đa là bao nhiêu?
Tối đa 8000 × 8000 pixel; vượt mức này trình duyệt sẽ giới hạn bộ nhớ canvas. Với đầu ra SVG thì không có giới hạn thực tế.
Tôi có thể cài Tạo Ảnh Placeholder như một ứng dụng web và dùng khi không có mạng không?
Có. Tạo Ảnh Placeholder là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.