Phát triển Web
Placeholder Image Generator
Tạo hình ảnh giữ chỗ (placeholder) với kích thước xác định cho bố cục và thiết kế.
A placeholder of the right size lets you check a layout before real images are ready — with correct proportions and dimensions labeled right on the image, so you can orient yourself in the mockup.
How to use it
- Enter a width and height in pixels and a placeholder image is generated instantly with its dimensions labeled.
- Optionally set the background and text color to match the mockup's theme.
- Download the finished image or copy a link to use directly in a src attribute.
Common uses
- Laying out a page before real photos or illustrations arrive from a designer.
- Testing a responsive image grid with various aspect ratios and sizes.
- Demoing a prototype to a client with clear dimensions instead of empty boxes.
Things to keep in mind
SVG placeholders weigh just a handful of bytes regardless of the size you set — the format choice affects how much real weight they add to a page during development.
A placeholder is meant purely for temporary use in development — it must be swapped for a real image before launch.
Bài viết về công cụ này: Ảnh placeholder: vì sao ảnh giả lại quan trọng trong quá trình phát triển
Câu hỏi thường gặp
Làm sao để kiểm soát kích thước và giao diện của hình ảnh?
Bạn đặt chiều rộng và chiều cao theo pixel cùng với màu nền và màu chữ; nếu bạn không nhập văn bản tùy chỉnh, công cụ mặc định hiển thị chính các kích thước đó, như 600x400.
Công cụ này hữu ích để làm gì?
Nó dùng cho việc dựng mockup và tạo mẫu bố cục — chèn một hình ảnh giữ chỗ cho phép bạn kiểm tra khoảng cách, tỷ lệ khung hình và thiết kế trước khi ảnh thật sẵn sàng.
Tôi có thể dùng hình ảnh mà không cần tải tệp xuống không?
Có, ngoài việc tải xuống bạn có thể sao chép hình ảnh dưới dạng Data URI và dán trực tiếp vào HTML hoặc CSS của mình.
Sự khác biệt giữa placeholder định dạng SVG và PNG là gì?
Placeholder SVG là dạng vector nên co giãn được mà không mất chất lượng và thường chỉ nặng vài kilobyte bất kể kích thước, còn PNG là định dạng raster có trọng lượng tăng theo kích thước ảnh, giúp mô phỏng sát hơn hành vi của một bức ảnh thật khi kiểm tra hiệu suất trang.
Kích thước placeholder có thực sự ảnh hưởng đến tốc độ tải trang trong quá trình phát triển không?
Placeholder SVG hầu như không ảnh hưởng đến tốc độ, vì chúng chỉ nặng vài byte bất kể kích thước được đặt, trong khi placeholder raster có kích thước lớn có thể làm tăng đáng kể trọng lượng trang — vì vậy để kiểm tra hiệu suất, nên chọn định dạng gần với ảnh thật sẽ dùng sau này.