Cách dùng Tạo BlurHash & LQIP
- Chọn một bức ảnh (hoặc thử ảnh mẫu). Mọi thứ đều chạy trên trình duyệt của bạn.
- Điều chỉnh độ chi tiết BlurHash: 4 × 3 phù hợp với hầu hết ảnh phong cảnh; số thành phần càng lớn thì giữ được nhiều hình dạng hơn nhưng chuỗi cũng dài hơn.
- Chọn chiều rộng và định dạng cho LQIP — WebP 16 px thường dưới 1 KB.
- Sao chép chuỗi BlurHash, data URI hoặc mã sẵn dùng cho HTML/CSS, Next.js hoặc React.
Ba loại placeholder
| Placeholder | Kích thước | Phù hợp nhất cho |
|---|---|---|
| Màu chủ đạo | 7 ký tự | Lưới ảnh thu nhỏ; là lựa chọn đơn giản nhất |
| BlurHash | 20–30 ký tự | Lưu trong cơ sở dữ liệu hoặc phản hồi API cùng với URL ảnh; được giải mã thành pixel trong ứng dụng |
| LQIP (ảnh base64) | Dưới 1 KB | Nhúng trực tiếp vào HTML hoặc CSS, blurDataURL của Next.js; hoạt động mà không cần JavaScript |
BlurHash hoạt động như thế nào
BlurHash mô tả một bức ảnh bằng vài sóng cosine — giống như một file JPEG độ phân giải rất thấp. Ảnh được chuyển sang ánh sáng tuyến tính, nhân với các mẫu cosine theo từng hướng, rồi các hệ số thu được được lượng tử hóa và ghi bằng bảng chữ cái 83 ký tự. Khi giải mã, các sóng này được vẽ lại, tạo ra hiệu ứng mờ mượt với màu sắc và bố cục đại khái của ảnh. Hãy giải mã ở kích thước khoảng 32 × 32 pixel rồi kéo giãn bằng CSS — vốn dĩ nó được thiết kế để mờ.
Luôn đặt width và height (hoặc aspect-ratio) cho ảnh để placeholder giữ đúng chỗ, tránh tình trạng giao diện bị giật khi ảnh xuất hiện. Đừng quên nén cả ảnh gốc bằng Image Compressor.
Cũng được tìm dưới tên: tạo blurhash, blurhash generator, tạo lqip, placeholder ảnh mờ, blur placeholder nextjs, blurhash online, low quality image placeholder, progressive image loading.
Các công cụ dùng kèm tốt với Tạo BlurHash & LQIP
- Đổi kích thước ảnh — Đổi ảnh về đúng kích thước pixel hoặc theo phần trăm, cắt ảnh theo kích thước mạng xã hội, hoặc đưa ảnh vừa khung kèm màu nền.
- Ảnh sang Base64 — Chuyển PNG, JPEG, SVG, WebP hoặc GIF thành Base64 data URI với mã CSS và HTML sẵn sàng sao chép, hoặc dán chuỗi Base64 để xem trước và tải ảnh về.
- Chuyển đổi ảnh — Chuyển đổi mọi ảnh mà trình duyệt của bạn mở được — PNG, JPG, WebP, AVIF, GIF, BMP hoặc SVG — sang PNG, JPG, WebP hoặc AVIF, từng file một hoặc hàng trăm file cùng lúc.
- Kiểm tra tốc độ trang — Chạy Google Lighthouse trên bất kỳ URL nào, cho cả di động lẫn máy tính.