Tạo Ảnh Responsive Và Mã srcset

Tính năng nổi bật

• Nhận nhiều ảnh một lượt (tối đa 20), kéo thả, chọn file hoặc dán bằng Ctrl+V
• Tự chọn bộ chiều rộng (gõ danh sách hoặc bấm mẫu), cỡ lớn hơn ảnh gốc tự bỏ qua; tùy chọn thêm một bản đúng chiều rộng gốc
• Xuất WebP, AVIF, JPEG; kiểm tra thật trình duyệt có mã hóa được định dạng đó không trước khi cho chọn
• Thu nhỏ từng nửa (4000 → 2000 → 1000 → 500 → 320) với imageSmoothingQuality cao để ảnh nhỏ vẫn mịn
• Đọc hướng xoay EXIF của ảnh chụp điện thoại; ảnh trên khoảng 16 triệu điểm ảnh được thu nhỏ ngay khi đọc để trình duyệt không treo
• Sinh mã <img srcset sizes> và <picture> (AVIF, WebP, JPEG) có width, height, loading, decoding, tùy chọn fetchpriority cho ảnh LCP
• Nhập thuộc tính sizes tự do hoặc chọn mẫu, có cảnh báo lỗi cú pháp hay gặp; nhập thư mục ảnh và mô tả alt cho từng ảnh
• Bảng dung lượng từng cỡ, từng định dạng; tải riêng từng file hoặc tải ZIP gồm toàn bộ ảnh và hai file mã HTML

Vì sao website cần ảnh responsive

Một ảnh 1920 px rộng 400 KB hiển thị đẹp trên laptop, nhưng trên điện thoại khung ảnh chỉ rộng khoảng 390 điểm, trình duyệt vẫn phải tải đủ 400 KB rồi thu nhỏ. Với trang có mười ảnh, người dùng 4G tải thừa vài MB, trang chậm, điểm Core Web Vitals (đặc biệt LCP) kém. Thuộc tính srcset giải quyết việc này: bạn đưa cho trình duyệt một danh sách ảnh cùng nội dung ở nhiều chiều rộng, kèm sizes cho biết ảnh sẽ chiếm bao nhiêu chỗ trên trang, trình duyệt tự chọn file vừa đủ nét cho màn hình đó. Khó khăn là phải tạo tay năm, mười file cho mỗi ảnh rồi gõ đúng mã. Công cụ làm cả hai việc trong một lần, với chất lượng thu nhỏ tốt, tên file gọn và mã có sẵn width, height để chống nhảy bố cục (CLS). Hợp với web viết tay, trang HTML tĩnh, landing page, email template, theme tự làm; nếu bạn dùng WordPress hay next/image thì nền tảng đã tự sinh srcset, công cụ vẫn hữu ích để tạo bản WebP, AVIF tối ưu trước khi tải lên.

Lợi ích khi sử dụng

• •Trang nhẹ hơn trên điện thoại vì không còn tải ảnh desktop rồi thu nhỏ
• •Cải thiện LCP và CLS, hai chỉ số Core Web Vitals Google dùng để đánh giá trải nghiệm trang
• •Không cần cài ImageMagick, Squoosh hay plugin; làm xong ngay trên trình duyệt
• •Ảnh không rời khỏi máy, hợp với ảnh sản phẩm chưa công bố
• •Mã HTML đúng cú pháp, có sẵn width, height, alt, loading, chỉ việc dán
• •Tên file không dấu, gọn, có số chiều rộng, dễ quản lý trên máy chủ

Cách tạo ảnh responsive và mã srcset

1. 1Kéo thả ảnh vào khung, bấm để chọn, hoặc dán bằng Ctrl+V. Mỗi ảnh hiện kích thước gốc và danh sách cỡ sẽ xuất.
2. 2Sửa ô Các chiều rộng cần xuất nếu cần (ví dụ 400, 800, 1200, 1600) hoặc bấm một mẫu. Cỡ lớn hơn ảnh gốc tự bị bỏ.
3. 3Chọn chất lượng (75 đến 85 là hợp cho ảnh chụp) và định dạng. Ô nào bị khóa là trình duyệt bạn đang dùng không xuất được định dạng đó.
4. 4Nhập thuộc tính sizes theo bố cục trang, hoặc chọn mẫu: tràn màn hình, khung bài viết 768 px, lưới 3 cột, nửa màn hình.
5. 5Nhập thư mục ảnh trên website (ví dụ /images/blog/), sửa mô tả alt cho từng ảnh, đánh dấu ảnh ở màn hình đầu tiên nếu đó là ảnh LCP.
6. 6Bấm Tạo các cỡ ảnh. Xem bảng dung lượng, chọn kiểu mã <picture> hoặc <img srcset>, bấm Chép mã.
7. 7Bấm Tải ZIP để có toàn bộ ảnh cùng hai file ma-html-picture.html và ma-html-img-srcset.html, rồi tải ảnh lên đúng thư mục đã nhập.

srcset và sizes hoạt động thế nào

Thuộc tính srcset liệt kê các file ảnh kèm chiều rộng thật của từng file, viết bằng hậu tố w: hero-640.webp 640w nghĩa là file này rộng 640 điểm ảnh. Thuộc tính sizes cho trình duyệt biết ảnh sẽ chiếm bao nhiêu chỗ trên trang, ví dụ (max-width: 768px) 100vw, 768px nghĩa là trên màn hình hẹp hơn hoặc bằng 768 px thì ảnh rộng bằng màn hình, còn lại ảnh rộng 768 px. Trình duyệt lấy bề rộng đó nhân với mật độ điểm ảnh của màn hình (DPR) để biết cần bao nhiêu điểm ảnh, rồi thường chọn file nhỏ nhất đủ đáp ứng. Ví dụ với bộ 320, 640, 960, 1280, 1920: điện thoại rộng 390 điểm, DPR 3 cần 390 x 3 = 1170 điểm ảnh, thường chọn file 1280; laptop rộng 1440 điểm, DPR 1 cần 768 điểm ảnh, chọn file 960; cùng laptop đó với màn hình DPR 2 cần 1536, chọn file 1920. Trình duyệt có quyền chọn khác (ví dụ đã có file lớn hơn trong bộ nhớ đệm, hoặc người dùng bật tiết kiệm dữ liệu), nên srcset là gợi ý chứ không phải lệnh. Nếu thiếu sizes, trình duyệt mặc định coi ảnh rộng 100vw, tức tải file quá lớn cho ảnh nhỏ trong bài viết; vì vậy hãy luôn nhập sizes đúng với bố cục.

Chọn bộ chiều rộng: vì sao mặc định là 320, 640, 960, 1280, 1920

Bộ mặc định phủ dải phổ biến từ điện thoại nhỏ tới màn hình Full HD, mỗi bậc cách nhau 320 điểm ảnh ở phần dưới và lớn dần ở phần trên. Bậc càng dày thì trình duyệt càng chọn sát nhu cầu, nhưng số file và công tải lên tăng; năm tới bảy bậc là cân bằng tốt. Công cụ không phóng to: ảnh gốc 800 px xuất 320, 640 và thêm 800 khi tùy chọn Thêm một bản đúng chiều rộng gốc đang bật (mặc định bật), tắt đi thì chỉ còn 320 và 640; ảnh gốc 300 px nhỏ hơn mọi bậc thì xuất đúng 300. Khi ảnh gốc nằm giữa hai bậc, ví dụ 1500 px với bộ mặc định, tùy chọn này cho ra 320 x 213, 640 x 427, 960 x 640, 1280 x 853 và 1500 x 1000 (chiều cao tính theo tỉ lệ 3 : 2 rồi làm tròn), để màn hình lớn vẫn có bản nét nhất có thể. Ảnh gốc 4000 x 3000 xuất đủ năm bậc 320 x 240 tới 1920 x 1440. Các mẫu khác trong công cụ: Ảnh bài viết 400, 800, 1200, 1600 cho cột nội dung khoảng 800 px; Thumbnail 160, 320, 480 cho ảnh nhỏ trong lưới; Banner rộng 640, 1024, 1440, 1920, 2560 cho ảnh tràn màn hình trên màn hình lớn. Ô nhập hiểu cả cách gõ 1.920 hay 1,920, bỏ qua số ngoài khoảng 16 tới 8192 và giữ tối đa 12 bậc.

Viết sizes đúng: ví dụ cho các bố cục thường gặp

Ảnh tràn hết bề ngang màn hình (banner đầu trang): sizes="100vw". Ảnh trong cột bài viết rộng tối đa 768 px, trên điện thoại rộng bằng màn hình: sizes="(max-width: 768px) 100vw, 768px". Lưới sản phẩm một cột trên điện thoại, hai cột trên máy tính bảng, ba cột trên máy tính: sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw". Ảnh chiếm nửa màn hình trên máy tính, tràn trên điện thoại: sizes="(max-width: 768px) 100vw, 50vw". Quy tắc cú pháp: các mục cách nhau bằng dấu phẩy, mỗi mục trừ mục cuối có điều kiện media trong ngoặc tròn rồi tới độ rộng; trình duyệt dùng mục đầu tiên có điều kiện đúng, nên mục cuối không có điều kiện là giá trị mặc định. Độ rộng dùng px, vw, em hoặc calc(), không dùng %. Nếu cột có lề, có thể trừ ra bằng calc, ví dụ calc(100vw - 32px). Công cụ cảnh báo ba lỗi hay gặp: mục cuối vẫn có điều kiện, mục giữa thiếu ngoặc điều kiện, và dùng đơn vị phần trăm. Sizes hơi lớn hơn thực tế không sao, chỉ tải thừa chút ít; sizes nhỏ hơn thực tế làm ảnh mờ.

WebP, AVIF hay JPEG: và vì sao công cụ phải kiểm tra trình duyệt

WebP thường nhỏ hơn JPEG đáng kể ở cùng độ nét và được mọi trình duyệt phổ biến hiện nay hiển thị. AVIF thường nhỏ hơn WebP nữa, nhất là với ảnh chụp, và cũng được các trình duyệt lớn đời mới hiển thị. JPEG là định dạng dự phòng ai cũng đọc được. Có một điểm cần phân biệt: trình duyệt hiển thị được một định dạng không có nghĩa là nó mã hóa (tạo ra) được định dạng đó qua canvas. Khi canvas không mã hóa được, lệnh toBlob không báo lỗi mà âm thầm trả về file PNG. Nếu chỉ đổi đuôi file, bạn sẽ nhận file tên .avif nhưng nội dung là PNG nặng gấp nhiều lần. Vì vậy khi mở trang, công cụ thử mã hóa một ảnh 4 x 4 điểm ảnh sang từng định dạng và chỉ bật ô khi file trả về đúng loại. Ở thời điểm viết, nhiều trình duyệt chưa mã hóa AVIF qua canvas, nên ô AVIF thường bị khóa; khi đó bạn vẫn có bộ WebP và JPEG đầy đủ. Mỗi lần xuất, công cụ cũng kiểm lại loại file, không bao giờ ghi file sai định dạng.

<img srcset> hay <picture>: dùng cái nào

Thẻ <img srcset sizes> dùng một định dạng duy nhất và để trình duyệt chọn cỡ. Công cụ dùng WebP cho thẻ này khi có, vì WebP đã được hỗ trợ rộng rãi; src dự phòng là bản gần 1000 px nhất không vượt 1024, ví dụ bản 960 với bộ mặc định. Thẻ <picture> thêm một tầng chọn định dạng: các thẻ <source type="image/avif"> và <source type="image/webp"> đặt trước, trình duyệt lấy nguồn đầu tiên có type mà nó hiểu, trình duyệt cũ bỏ qua tất cả <source> và dùng thẻ <img> JPEG ở cuối. Mỗi <source> có srcset và sizes riêng, nên vẫn chọn cỡ như thường. Nên dùng <picture> khi có AVIF, hoặc khi website còn nhiều người dùng trình duyệt cũ; dùng <img srcset> khi muốn mã gọn và chỉ có WebP. Thuộc tính alt, width, height, loading và class đặt trên thẻ <img> bên trong <picture>, không đặt trên <source>. Công cụ sinh cả hai kiểu, nút Kiểu mã chuyển qua lại, file ZIP chứa cả hai.

width, height, loading, decoding, fetchpriority để làm gì

width và height trong thẻ không quyết định kích thước hiển thị nếu CSS đã đặt chiều rộng; chúng cho trình duyệt biết tỉ lệ ảnh để giữ đúng một khoảng trống trước khi ảnh tải xong. Thiếu hai thuộc tính này, chữ bên dưới bị đẩy xuống khi ảnh hiện ra, gây điểm CLS (dịch chuyển bố cục) xấu. Công cụ ghi width, height bằng bản lớn nhất đã xuất, ví dụ 1500 và 1000 cho ảnh 1500 x 1000. Hãy kèm CSS img { max-width: 100%; height: auto; } để ảnh co theo khung mà vẫn giữ tỉ lệ. loading="lazy" hoãn tải ảnh nằm dưới màn hình đầu tiên tới khi người dùng cuộn gần, tiết kiệm băng thông. Không đặt lazy cho ảnh lớn nhất ở màn hình đầu (thường là ảnh LCP), vì sẽ làm ảnh đó tải muộn; với ảnh này, đánh dấu ô Ảnh ở màn hình đầu tiên, công cụ đổi sang loading="eager" và thêm fetchpriority="high" để trình duyệt ưu tiên tải. decoding="async" cho phép giải mã ảnh không chặn việc vẽ phần còn lại của trang.

Thu nhỏ ảnh chất lượng cao: giảm từng nửa

Khi canvas vẽ một ảnh 4000 px xuống 320 px trong một bước, mỗi điểm ảnh mới chỉ được tính từ vài điểm ảnh lân cận của ảnh gốc, các chi tiết nhỏ như đường kẻ, chữ, lá cây bị răng cưa hoặc nhấp nháy. Cách khắc phục cổ điển là thu nhỏ nhiều bước, mỗi bước một nửa: 4000 → 2000 → 1000 → 500 → 320. Ở mỗi bước một nửa, một điểm ảnh mới là trung bình của bốn điểm ảnh cũ, kết quả cuối mịn gần như bộ lọc chuyên dụng. Ảnh 3024 px xuống 1280 px đi qua bước 1512 rồi tới 1280. Công cụ kết hợp cách này với imageSmoothingQuality = "high" của canvas, chế độ làm mịn tốt nhất mà trình duyệt cung cấp. Ảnh quá lớn (trên khoảng 16 triệu điểm ảnh, như ảnh 12000 x 9000) được thu nhỏ ngay khi đọc, khoảng 0,385 lần theo mỗi cạnh trong ví dụ này, vì trình duyệt trên điện thoại thường không cấp canvas lớn hơn mức đó; công cụ ghi chú khi điều này xảy ra. Ảnh PNG có nền trong suốt giữ trong suốt ở WebP; riêng JPEG không có kênh trong suốt nên được phủ màu nền bạn chọn (mặc định trắng).

Ảnh chụp điện thoại bị xoay ngang và cách công cụ xử lý

Điện thoại thường lưu ảnh theo chiều cảm biến rồi ghi thêm thẻ EXIF Orientation cho biết cần xoay bao nhiêu độ khi hiển thị. Phần mềm không đọc thẻ này sẽ hiện ảnh dọc thành ảnh nằm ngang, và nếu thu nhỏ bằng phần mềm đó thì ảnh xuất ra bị xoay sai vĩnh viễn. Công cụ đọc ảnh bằng createImageBitmap với tùy chọn imageOrientation from-image, tức áp dụng hướng xoay EXIF trước khi xử lý, nên ảnh xuất ra luôn đúng chiều và kích thước gốc ghi trên giao diện là kích thước sau khi xoay (ví dụ 3000 x 4000 chứ không phải 4000 x 3000). Trình duyệt quá cũ không có hàm này thì công cụ dùng thẻ ảnh thông thường, cũng tự áp dụng hướng xoay ở các trình duyệt hiện nay. Ảnh xuất ra không mang theo dữ liệu EXIF (vị trí GPS, đời máy), điều này có lợi cho quyền riêng tư khi đăng ảnh lên web.

Đặt tên file và đưa ảnh lên website

Tên file được tạo từ tên ảnh gốc: bỏ dấu tiếng Việt, chuyển chữ thường, thay khoảng trắng và ký tự lạ bằng gạch nối, thêm số chiều rộng và đuôi định dạng. Ảnh Ảnh Bìa Đẹp (1).JPG cho ra anh-bia-dep-1-320.webp, anh-bia-dep-1-640.webp và tiếp tục như vậy. Hai ảnh trùng tên gốc được thêm hậu tố -2, -3 để không ghi đè nhau. Ô Thư mục ảnh trên website được ghép vào trước tên file trong mã HTML: nhập /images/blog/ thì mã có src="/images/blog/anh-bia-dep-1-960.jpg"; nhập địa chỉ CDN đầy đủ cũng được. Sau khi tải ZIP, giải nén và tải toàn bộ ảnh lên đúng thư mục đó, không cần đổi tên. Hãy viết lại alt mô tả đúng nội dung ảnh thay vì để tên file, vì alt giúp người dùng trình đọc màn hình và giúp Google hiểu ảnh. Nếu ảnh thuần trang trí, để alt rỗng.

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

Từ khóa liên quan

• srcset
• img srcset sizes
• tạo srcset
• srcset generator
• responsive image
• ảnh responsive
• thẻ picture html
• picture source webp
• chuyển ảnh sang webp nhiều kích thước
• resize ảnh nhiều kích thước
• tạo ảnh webp cho website
• chuyển ảnh sang avif
• tối ưu ảnh responsive
• tối ưu ảnh core web vitals
• giảm lcp ảnh
• chống cls ảnh
• thuộc tính sizes là gì
• srcset là gì
• lazy load ảnh
• fetchpriority high
• tối ưu hình ảnh seo
• ảnh nhiều kích thước zip