Công cụ tạo ảnh giữ chỗ

Tạo ảnh placeholder ở mọi kích thước đến 4000×4000 với màu sắc và nhãn của bạn. Tải về PNG, JPEG, WebP hoặc SVG, hoặc sao chép data URI — không cần dịch vụ ngoài.

Chiều rộng (px)

Chiều cao (px)

Màu nền

Màu chữ

Nhãn

Để trống để hiển thị kích thước.

Định dạng

Tạo ảnh giữ chỗ là gì?

Tạo ảnh giữ chỗ đơn giản hiển thị kích thước của chính nó (như 640×360) hoặc nhãn của bạn, ở mọi kích thước từ 1 đến 4000 pixel. Chọn màu nền và màu chữ rồi xuất dạng PNG, JPEG, WebP hoặc SVG. Ảnh được vẽ cục bộ, nên bạn không phụ thuộc vào dịch vụ placeholder trên web.

Cách sử dụng Tạo ảnh giữ chỗ

Nhập Chiều rộng và Chiều cao tính bằng pixel.
Chọn Màu nền và Màu chữ, rồi gõ Nhãn hoặc để trống để hiển thị kích thước.
Chọn Định dạng.
Tải ảnh xuống hoặc sao chép mã SVG / data URI.

Ví dụ

Đầu vào

Width 300, Height 150, Background #cccccc, Text color #555555, Format SVG

Đầu ra

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150"><rect width="100%" height="100%" fill="#cccccc"/><text x="50%" y="50%" fill="#555555" font-family="Arial, Helvetica, sans-serif" font-size="30" text-anchor="middle" dominant-baseline="central">300×150</text></svg>

Khi nào nên dùng Tạo ảnh giữ chỗ

Dùng cho wireframe, mockup thiết kế, kiểm thử bố cục responsive và component ảnh, hoặc tạo dữ liệu demo cho CMS hay thương mại điện tử. Để xem trước chân thực, hãy dùng ảnh thật hoặc ảnh stock; với placeholder mờ khi đang tải, hãy dùng bản độ phân giải thấp của chính ảnh thật.

Tạo ảnh giữ chỗ hoạt động như thế nào

Với PNG, JPEG và WebP, ảnh được vẽ trên một canvas HTML đúng kích thước yêu cầu: một hình chữ nhật tô màu cùng nhãn căn giữa bằng font Arial, cỡ chữ bằng một phần năm cạnh ngắn hơn (giảm xuống với nhãn dài cho vừa), rồi xuất bằng canvas.toDataURL. Với SVG, công cụ viết một file vector nhỏ gồm phần tử <rect> và <text> căn giữa, luôn sắc nét ở mọi mức thu phóng và thường dưới 400 byte.

Các Trường Hợp Sử Dụng Phổ Biến

Lấp chỗ ảnh trong wireframe và bản mẫu
Kiểm tra tỷ lệ khung hình và CSS ảnh responsive
Tạo sản phẩm demo cho cửa hàng trực tuyến
Nhúng placeholder SVG nhỏ dưới dạng data URI

Câu Hỏi Thường Gặp

Nên chọn định dạng nào?

SVG nhỏ nhất và sắc nét nhất cho placeholder màu phẳng; PNG phù hợp khi bắt buộc dùng file raster; JPEG và WebP hữu ích để kiểm thử quy trình xử lý ảnh chụp.