Ảnh responsive: srcset, sizes và thẻ picture giải thích dễ hiểu

Nếu bạn phát một ảnh 2000 pixel cho mọi người xem, một chiếc điện thoại có màn hình rộng 390 pixel sẽ phải tải nhiều gấp mấy lần lượng dữ liệu nó hiển thị được. Trên mạng di động, điều đó tốn thời gian lẫn tiền, và làm trang chậm đi đúng với những người ít có điều kiện chịu đựng nhất.

Phát một file nhỏ cho tất cả mọi người cũng không phải câu trả lời, vì các màn hình lớn và màn hình độ phân giải cao sẽ thấy ảnh bị mềm và nhòe. Ảnh responsive giải quyết việc này bằng cách cung cấp nhiều phiên bản của cùng một bức ảnh để trình duyệt tự chọn phiên bản phù hợp.

Một ví dụ cơ bản trông như sau: <img src="photo-800.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" alt="...">.

src là phương án dự phòng cho trình duyệt cũ. Trình duyệt kết hợp bề rộng bố cục, mật độ màn hình và đánh giá của riêng nó, nên bạn chỉ mô tả các lựa chọn chứ không ép buộc một lựa chọn nào.

Ưu điểm

• Tải về nhẹ hơn trên điện thoại và mạng chậm, thường tiết kiệm được rất nhiều.
• Ảnh sắc nét trên màn hình độ phân giải cao mà không làm thiệt người khác.
• Cải thiện các chỉ số tốc độ như Largest Contentful Paint.
• Dùng HTML chuẩn, không cần JavaScript.

Nhược điểm

• Phải tạo, đặt tên và quản lý nhiều file hơn cho mỗi ảnh.
• Thêm mã HTML, và giá trị sizes phải khớp tương đối với bố cục thì mới hiệu quả.
• Nếu sizes sai, trình duyệt có thể chọn file lớn hơn mức cần thiết.
• Việc cắt ảnh khác nhau bằng picture làm số phiên bản tăng lên nhiều, nên chỉ dùng ở nơi thật sự cần.

Phần lớn hệ thống quản trị nội dung và CDN ảnh tự tạo các phiên bản và mã HTML giúp bạn, nhờ đó nhược điểm chính biến mất.

Để cung cấp định dạng hiện đại kèm phương án dự phòng an toàn, hãy bọc các nguồn trong thẻ picture: <picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"><img src="photo.jpg" alt="..."></picture>. Trình duyệt dùng nguồn đầu tiên nó hỗ trợ, nên không ai thấy ảnh bị lỗi.

Tạo phiên bản WebP bằng JPG sang WebP. Bài về các định dạng giải thích khi nào AVIF đáng để bỏ thêm công sức.

Chính thẻ này cũng có thể hiển thị một kiểu cắt khác trên màn hình nhỏ nhờ thuộc tính media, ví dụ cắt vuông sát hơn trên điện thoại. Cắt ảnh giúp chuẩn bị từng phiên bản. Hãy dành cách này cho những trường hợp chủ thể thật sự cần, vì mỗi phiên bản đều thêm việc.

• Viết giá trị sizes không khớp với bố cục. Khi đó trình duyệt chọn sai file.
• Tạo các phiên bản bằng cách đổi kích thước một bản sao của bản sao, làm mất chất lượng.
• Tải trễ ảnh đầu tiên. Xem hướng dẫn tải trễ ảnh.
• Quên width và height, gây xê dịch bố cục.
• Tự viết tay mọi thứ trong khi CMS đã tạo sẵn srcset. Hãy xem HTML trước.