Tạo ảnh placeholder

Cách sử dụng

1. Đặt kích thước, hoặc chạm vào một kích thước thông dụng.
2. Đổi màu và nhãn nếu màu xám mặc định không phù hợp.
3. Sao chép SVG để dùng làm tệp, hoặc thẻ img để dán data URI thẳng vào mã.
4. Tải tệp .svg khi bản mẫu cần một tệp thật.

Tính năng

• Dạng SVG, nên sắc nét ở mọi kích thước và chỉ nặng vài trăm byte.
• Xuất data URI — không cần request mạng, chạy được cả khi offline và khi in.
• Dùng kích thước làm nhãn nếu bạn không nhập nhãn riêng.
• Có sẵn kích thước 16:9, vuông, avatar, banner và ảnh Open Graph.
• Chạy hoàn toàn trong trình duyệt.

Câu hỏi thường gặp

Sao không dùng dịch vụ ảnh placeholder có sẵn?

Vì làm vậy là nhét một request tới bên thứ ba vào mọi bản mẫu. Điều đó nghĩa là tải chậm, không có gì khi offline, tên miền của người khác nằm trong log mạng của người dùng, và — điều sớm muộn cũng xảy ra — mọi bản mẫu cũ hỏng khi dịch vụ ngừng hoạt động. Một SVG nhúng thẳng không có nhược điểm nào trong số đó.

Vì sao dùng SVG thay vì PNG?

Một ảnh placeholder chỉ là hình chữ nhật và một dòng chữ, tức vài trăm byte nếu là SVG và vài chục kilobyte nếu là PNG ở độ phân giải retina. SVG còn co giãn được: cùng một data URI vẫn sắc nét ở 128 pixel lẫn 1.280 pixel.

Vì sao data URI không dùng base64?

Vì SVG là văn bản. Mã hóa phần trăm giúp mã nguồn vẫn đọc được và thường ngắn hơn base64 của cùng dữ liệu — base64 làm phình thêm khoảng một phần ba trước khi nén.

Công cụ liên quan