Tạo Ảnh Responsive
Tải lên một ảnh và xuất nó ở nhiều kích thước dùng ngay (Icon, XS, Thumbnail, Mobile, Tablet, Desktop) ở định dạng WebP, JPEG hoặc PNG — rồi sao chép đoạn mã <img srcset>, <picture> hoặc CSS image-set() được tạo từ đúng tên các tệp đó. Mọi thứ chạy ngay trong trình duyệt nên ảnh không bao giờ rời khỏi máy bạn.
Các bước sử dụng
- Kéo & thả hoặc bấm để tải ảnh lên (JPG, PNG, WebP...). Công cụ hiển thị tên file và kích thước gốc theo pixel.
- Chọn Tỉ lệ cắt: giữ nguyên bản gốc, hoặc ép về một tỷ lệ như 16:9, 4:3, 1:1 (vuông), 9:16, 21:9... Ảnh sẽ được cắt phủ (cover) và căn giữa theo tỷ lệ đó.
- Trong mục Kích thước cần tạo, tích chọn các chiều rộng bạn cần (Thumbnail, Mobile và Tablet được chọn sẵn; mỗi mục hiển thị chiều rộng pixel như 320px, 640px, 1024px).
- Trong Định dạng xuất, chọn WebP / JPEG / PNG, kéo thanh Chất lượng cho WebP/JPEG, và bật Cho phép phóng to nếu muốn tạo kích thước lớn hơn ảnh gốc. Khi chọn WebP, bật Tạo thêm bản JPEG để có bộ ảnh dự phòng cho trình duyệt cũ.
- Bấm Tạo size. Mỗi kết quả hiện trong bảng gồm ảnh xem trước, thẻ loại/tỷ lệ/định dạng, kích thước chính xác và dung lượng file.
- Dùng các nút trên từng dòng để sao chép data URL, tải một file, hoặc bấm Tải tất cả (zip) để tải toàn bộ kích thước một lần.
- Trong Mã HTML & CSS, chọn
<picture>,<img srcset>hoặcCSS image-set(), điền Thư mục / tiền tố URL nơi bạn sẽ tải tệp lên, Thuộc tính sizes và Văn bản thay thế (alt), rồi bấm Sao chép mã. - Trong Ảnh giữ chỗ (placeholder), bấm Tạo ảnh giữ chỗ. Bạn sẽ có BlurHash (chỉnh Số thành phần X và Số thành phần Y), ThumbHash, LQIP (chọn Chiều rộng và WebP hoặc JPEG), ảnh SVG làm mờ và Màu chủ đạo gồm giá trị Trung bình và Phổ biến nhất, mỗi loại đều có ảnh xem trước và nút sao chép.
- Ở mục Ảnh giữ chỗ dùng trong mã, chọn loại ảnh giữ chỗ muốn nhúng, chuyển giữa
Next.js <Image>,<img>vàCSS, rồi bấm Sao chép mã.
Mẹo
- Tắt Cho phép phóng to để bỏ qua mọi kích thước lớn hơn ảnh gốc — công cụ sẽ báo số kích thước bị bỏ qua thay vì phóng to gây mờ.
- Chọn tỷ lệ cắt 1:1 khi cần ảnh đại diện hoặc thumbnail vuông đồng nhất ở mọi kích thước.
- WebP cho file nhẹ nhất ở cùng chất lượng; chỉ dùng PNG khi cần đầu ra không mất dữ liệu (thanh Chất lượng bị ẩn với PNG vì đây là định dạng lossless).
- Thuộc tính
sizescho trình duyệt biết ảnh được vẽ rộng bao nhiêu trên màn hình, không phải tệp rộng bao nhiêu:100vwcho ảnh tràn màn hình, hoặc kiểu(max-width: 768px) 100vw, 50vwcho bố cục hai cột. <picture>đặt WebP vào<source>và giữ JPEG (hoặc PNG) trong<img>dự phòng; nếu chỉ có một định dạng, nó chỉ bọc một thẻ<img>.image-set()chọn ảnh theo mật độ điểm ảnh chứ không theo chiều rộng, nên tệp hẹp nhất là1xvà các tệp rộng hơn được ghi thành bội số của nó.- Đoạn mã đi theo bảng kết quả: xoá một dòng thì tệp đó cũng biến mất khỏi mã. Thẻ
<img>có sẵnwidth,heightvàloading="lazy"để bố cục không bị giật khi ảnh tải. - Ảnh giữ chỗ theo tỉ lệ cắt đang chọn và tự cập nhật khi bạn đổi tỉ lệ. BlurHash càng nhiều thành phần thì càng giữ nhiều chi tiết nhưng chuỗi càng dài (4 × 3 là mức mặc định phổ biến).
- ThumbHash lưu cả tỉ lệ khung hình và độ trong suốt trong khoảng 25 byte, nên hợp với logo PNG và ảnh tách nền hơn BlurHash.
- LQIP là một ảnh thật nhưng rất nhỏ; đoạn CSS đặt nó trên lớp
::befoređược làm mờ để hiệu ứng mờ không ảnh hưởng đến ảnh hoàn chỉnh.
Câu hỏi thường gặp
Tên file sẽ như thế nào?
Mỗi file được đặt tên <tênfile>_<size>_<rộng>x<cao>.<ext>, ví dụ photo_mobile_640x360.webp, để dễ nhận biết chiều rộng và breakpoint ngay lập tức. Đoạn mã tạo ra dùng đúng các tên này; dấu cách và dấu phẩy được mã hoá phần trăm vì chúng làm hỏng srcset.
JPEG có giữ được nền trong suốt không?
Không. JPEG không có kênh alpha nên vùng trong suốt sẽ được tô nền trắng. Hãy chọn WebP hoặc PNG nếu bạn cần giữ độ trong suốt.
Công cụ có tạo được AVIF không?
Chưa — trình duyệt không mã hoá được AVIF từ canvas. Nếu bạn tự thêm tệp AVIF, hãy khai báo chúng bằng <source type="image/avif"> đặt trước dòng WebP.
Nên dùng loại ảnh giữ chỗ nào?
Với Next.js, placeholder="blur" cùng ảnh SVG làm mờ hoặc ảnh BlurHash chạy được mà không cần cài thêm gói nào. Hãy lưu chuỗi BlurHash hoặc ThumbHash vào cơ sở dữ liệu nếu ứng dụng của bạn tự giải mã khi chạy; dùng màu chủ đạo khi bạn chỉ cần một nền phẳng hợp tông với ảnh.
Ảnh của tôi có bị tải lên máy chủ không?
Không. Toàn bộ việc cắt, thay đổi kích thước và mã hóa diễn ra cục bộ trong trình duyệt bằng canvas — không có gì được gửi đi, nên công cụ chạy được ngoại tuyến và bảo mật ảnh của bạn.