Tạo ảnh placeholder
Tạo một ảnh giữ chỗ đơn giản đúng kích thước bạn cần, có ghi kích thước trên ảnh, dùng cho mockup, bố cục và kiểm thử.
Chạy hoàn toàn trong trình duyệt của bạn
Để trống để hiện kích thước.
Chiều rộng và chiều cao từ 1 đến 8000 pixel, tổng cộng tối đa 100 megapixel. Chữ nằm trên một dòng, tự điều chỉnh cỡ cho vừa.
Cách tạo ảnh placeholder
- Nhập chiều rộng và chiều cao, hoặc nhấn một cỡ có sẵn như 1200 × 630 cho thẻ mạng xã hội hay 300 × 250 cho quảng cáo.
- Chọn màu nền và màu chữ. Để trống chữ để hiện kích thước, hoặc viết nhãn của riêng bạn.
- Chọn PNG, JPEG, WebP hoặc SVG rồi nhấn Tải xuống, hoặc sao chép ảnh dưới dạng data URI.
Chọn kích thước cho ảnh placeholder
Ảnh placeholder đứng thay một bức ảnh thật trong lúc bạn dựng trang, nên điều hữu ích là nó có đúng hình dạng. Bố cục hỏng vì tỷ lệ khung hình nhiều hơn vì độ phân giải: ảnh hero 16:9 hoạt động khác với ảnh đại diện vuông dù cả hai đều nhỏ. Ghi kích thước lên ảnh giúp bất kỳ ai xem mockup cũng biết vị trí nào cần kích thước nào.
Các cỡ có sẵn bao gồm những kích thước hay gặp: 1200 × 630 là hình dạng hầu hết mạng xã hội dùng cho bản xem trước liên kết, 1080 × 1080 là bài đăng vuông, 1920 × 1080 và 1280 × 720 là các khung video phổ biến, 300 × 250 và 728 × 90 là hai vị trí quảng cáo chuẩn, còn 150 × 150 là ảnh đại diện thông thường.
Khi dùng thực tế, hãy nhớ rằng placeholder là màu phẳng. PNG và SVG lưu kiểu này gần như miễn phí, còn JPEG ở kích thước lớn làm mờ quanh chữ. Nếu bạn dán ảnh vào mã dưới dạng data URI, hãy giữ nó nhỏ: từng byte của ảnh đều lặp lại trong trang của bạn.
Mẹo
- Cần ảnh thật ở kích thước đó? Đổi kích thước ảnh và Cắt ảnh đưa một bức ảnh về đúng vị trí.
- Để nhúng một ảnh hoàn chỉnh dưới dạng văn bản, hãy dùng Ảnh sang Base64.
- Chọn các màu phù hợp với nhau bằng Chuyển đổi màu và kiểm tra độ tương phản.
Câu hỏi thường gặp
Có gì rời khỏi thiết bị của tôi không?
Không. Những gì bạn nhập không được gửi đi đâu cả. Ảnh được trình duyệt của bạn vẽ ra, và bản tải xuống được tạo ngay trên thiết bị của bạn.
Tôi nên chọn định dạng nào?
SVG chỉ vài trăm byte và sắc nét ở mọi kích thước, nên phù hợp với bố cục web. PNG chính xác và không mất chất lượng cho các mảng màu phẳng. JPEG và WebP tạo tệp nhỏ hơn ở kích thước lớn, và JPEG hơi mờ quanh chữ. Một số nơi nhận tải lên, như nhiều trường trong CMS, chỉ nhận ảnh raster, hãy dùng PNG ở đó.
Cỡ chữ được chọn thế nào?
Tự động. Chữ được làm lớn nhất có thể mà vẫn nằm trên một dòng trong khoảng 80 phần trăm chiều rộng và 40 phần trăm chiều cao, nên một banner rộng như 728 × 90 và một banner cao như 160 × 600 đều trông đúng.
Data URI dùng để làm gì?
Data URI là ảnh được viết ra dưới dạng văn bản, để bạn dán thẳng vào thẻ img của HTML hoặc nền CSS mà không cần tệp riêng. Cách này hợp với ảnh nhỏ. Một ảnh PNG lớn sẽ thành chuỗi rất dài làm phình trang của bạn, nên công cụ cảnh báo khi kết quả lớn hơn mức thực tế và từ chối sao chép bất kỳ thứ gì trên 1 MB.
SVG có cần phông chữ đặc biệt không?
Không. Nó dùng phông sans-serif của hệ thống, nên trông hơi khác nhau trên các thiết bị nhưng luôn vừa khít, và chữ được thoát ký tự để các ký tự như & và < an toàn.
Giới hạn kích thước là bao nhiêu?
Mỗi cạnh từ 1 đến 8000 pixel và tổng có thể lên đến 100 megapixel. Ảnh lớn hơn vẽ lâu hơn và có thể không mở được trong một số chương trình.