Về công cụ này
Placeholder là thứ mà trang web hiển thị trong khoảnh khắc trước khi ảnh thật tải xong — một vệt mờ của bức ảnh sắp hiện ra, hoặc đơn giản là một khối màu đặc — để bố cục không bị giật và trang cảm giác như đã đang tải nội dung thật. Kiểu "ảnh mờ" này thường được gọi là LQIP (Low-Quality Image Placeholder): thu nhỏ ảnh gốc xuống chỉ còn vài chục pixel — 20 đến 40px ở cạnh dài là đủ — tùy chọn làm mềm bằng một chút làm mờ, rồi mã hóa lại kết quả siêu nhỏ đó. Vì có quá ít pixel nên gần như không có gì để mã hóa, kết quả thường chỉ vài trăm byte đến vài KB, đủ nhỏ để nhúng trực tiếp dưới dạng data URI base64 thay vì phải tải như một file riêng.
Nhúng placeholder dưới dạng data URI nghĩa là nó đi kèm luôn trong HTML hoặc CSS của trang — không cần thêm một lượt request mạng chỉ để hiển thị thứ gì đó trước khi ảnh thật tới. Kéo giãn kết quả siêu nhỏ, hơi mờ đó bằng CSS lên đúng kích thước hiển thị của ảnh thật, nó sẽ trông như một bản xem trước mềm mại của bức ảnh sắp đến; đó chính xác là thủ thuật đứng sau hiệu ứng tải mờ-dần trên các trang như Medium và nhiều gallery ảnh sản phẩm. Khi chưa có ảnh gốc — làm skeleton screen, phác thảo bố cục, hoặc giữ chỗ cho nội dung người dùng chưa tải lên — hãy chuyển sang chế độ thứ hai để tạo placeholder màu đơn, gradient hoặc sọc ở bất kỳ kích thước pixel nào, với cùng cách tải về tức thì và data URI có thể sao chép. Mọi thứ chạy cục bộ ngay trong trình duyệt của bạn; không có gì được tải lên bao giờ.
Câu hỏi thường gặp
"Nhỏ" đối với URI dữ liệu LQIP nhỏ như thế nào?
Đầu ra điển hình ở kích thước nhỏ mặc định (chưa đến 50px ở cạnh dài hơn) rơi vào khoảng vài trăm byte đến khoảng 1-2KB dưới dạng chuỗi base64 — đủ nhỏ để nhúng trực tiếp trong dòng vào HTML/CSS/JS của bạn mà không thêm bất kỳ trọng lượng đáng kể nào vào trang của bạn, đó chính là toàn bộ mục đích của kỹ thuật LQIP: hiển thị MỘT THỨ GÌ ĐÓ ngay lập tức trong khi ảnh thật, kích thước đầy đủ tải trong nền.
Tôi nên dùng chế độ "Từ ảnh" hay chế độ "Màu đặc/Gradient"?
Dùng "Từ ảnh" khi bạn đã có ảnh thật và muốn một ảnh giữ chỗ gợi ý trực quan về những gì sắp đến (bản xem trước mờ của nội dung thực) — điều này mang lại cho người dùng trải nghiệm tải mượt mà, nhiều thông tin hơn. Dùng "Màu đặc/Gradient" khi bạn cần một ảnh giữ chỗ chung TRƯỚC KHI ảnh thật được biết đến hoặc sẵn sàng (ví dụ trạng thái tải khung xương cho một thư viện ảnh chưa chọn ảnh), hoặc đơn giản là muốn thứ gì đó đơn giản hơn và nhỏ hơn cả LQIP.