Srcset là gì? Hướng dẫn chi tiết về thuộc tính srcset trong HTML để tối ưu hình ảnh responsive - Taphoammo - Bán theme plugin mẫu thiết kế web sẵn Thegioitinhoc.com.vn

Trong thời đại đa thiết bị, việc hiển thị hình ảnh sắc nét trên mọi kích thước màn hình là thách thức lớn với nhà phát triển web. Srcset là gì? Đây là thuộc tính HTML cho phép trình duyệt chọn đúng kích thước hình ảnh phù hợp với độ phân giải màn hình và kích thước viewport. Hiểu và ứng dụng srcset là gì giúp giảm dung lượng tải trang, cải thiện tốc độ và trải nghiệm người dùng, đồng thời góp phần nâng cao điểm số Core Web Vitals.

Định nghĩa srcset – Bản chất và cách thức hoạt động

Srcset (viết tắt của source set) là thuộc tính HTML đi kèm thẻ <img>, cho phép khai báo nhiều tệp hình ảnh với các kích thước hoặc tỉ lệ pixel khác nhau. Thay vì phải chỉ định một ảnh duy nhất, developer cung cấp một danh sách các nguồn ảnh, kèm theo thông tin về chiều rộng (width) hoặc mật độ pixel (density). Trình duyệt sẽ tự động chọn tệp tối ưu dựa trên điều kiện thiết bị của người dùng.

Cú pháp cơ bản:

<img src="fallback.jpg" srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="Mô tả hình ảnh">

Trong đó:

src: ảnh dự phòng khi trình duyệt không hỗ trợ srcset.
srcset: danh sách các tệp ảnh, mỗi tệp kèm một descriptor (300w, 600w, 1200w).
sizes: mô tả kích thước hiển thị thực tế của ảnh tại các breakpoint khác nhau (tùy chọn, nhưng cần thiết khi dùng width descriptor).

Hai loại descriptor trong srcset

Loại descriptor	Ký hiệu	Ý nghĩa
Width descriptor	w	Chiều rộng thực tế của ảnh (ví dụ: 300w, 800w). Trình duyệt dùng kết hợp với `sizes` để tính toán.
Pixel density descriptor	x	Tỉ lệ pixel (1x, 2x, 3x). Trình duyệt chọn ảnh dựa trên mật độ pixel của màn hình (ví dụ: Retina cần 2x).

Vì sao srcset lại quan trọng trong thiết kế web hiện đại?

Việc sử dụng srcset mang lại nhiều lợi ích vượt trội so với cách dùng một ảnh duy nhất:

Lợi ích chính của srcset

Tối ưu tốc độ tải trang: Trình duyệt chỉ tải ảnh có kích thước phù hợp, tránh lãng phí băng thông. Ví dụ, thiết bị di động sẽ nhận ảnh 300px thay vì ảnh 2000px.
Cải thiện trải nghiệm người dùng: Ảnh hiển thị sắc nét trên mọi thiết bị, giảm thời gian chờ đợi, tăng tỷ lệ giữ chân khách hàng.
SEO thân thiện: Google ưu tiên các trang có tốc độ tải nhanh và tối ưu cho di động. Srcset giúp giảm Cumulative Layout Shift (CLS) và Largest Contentful Paint (LCP).
Tiết kiệm chi phí băng thông: Đặc biệt hữu ích cho các trang có lưu lượng lớn, giảm tải cho máy chủ.

Hạn chế và lưu ý khi sử dụng srcset

Yêu cầu chuẩn bị nhiều phiên bản ảnh: Cần có các tệp ảnh với kích thước khác nhau, làm tăng công sức sản xuất nội dung.
Không hỗ trợ tự động thay đổi ảnh theo định dạng (WebP, AVIF): Để kết hợp định dạng ảnh hiện đại, cần dùng thêm thẻ <picture>.
Trình duyệt quyết định cuối cùng: Nhà phát triển chỉ gợi ý, không ép buộc. Trình duyệt có thể chọn ảnh nhỏ hơn nếu kết nối chậm.

So sánh srcset với thẻ <picture> và thuộc tính media

Tiêu chí	Srcset trên <img>	Thẻ <picture>
Mục đích	Chọn ảnh dựa trên kích thước hoặc mật độ pixel	Chọn ảnh dựa trên media query, hỗ trợ định dạng ảnh khác nhau
Định dạng ảnh	Chỉ thay đổi kích thước, không thay đổi định dạng	Có thể cung cấp WebP, AVIF, JPEG khác nhau cho từng điều kiện
Độ phức tạp	Đơn giản, chỉ cần một thẻ <img>	Phức tạp hơn, cần cấu trúc <picture> với nhiều thẻ <source>
Trường hợp dùng	Phần lớn ảnh responsive	Khi cần art direction (cắt ảnh khác nhau) hoặc hỗ trợ định dạng nâng cao

Trên thực tế, srcset và thường được kết hợp để đạt hiệu quả tối đa. Ví dụ, dùng để cung cấp WebP, và bên trong thẻ dùng srcset để chọn kích thước phù hợp.

Hướng dẫn chi tiết cách sử dụng srcset đúng chuẩn

1. Sử dụng width descriptor (w) kèm sizes

Đây là phương pháp linh hoạt nhất. Cần khai báo sizes để trình duyệt biết ảnh chiếm bao nhiêu phần trăm chiều rộng viewport tại mỗi breakpoint.

<img src="default-800.jpg" srcset="img-300.jpg 300w, img-600.jpg 600w, img-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1000px" alt="Ảnh responsive">

Giải thích: Nếu màn hình rộng dưới 600px, ảnh chiếm 100% viewport → trình duyệt sẽ chọn ảnh có width gần với viewport. Nếu màn hình 600-1200px, ảnh chiếm 50% viewport, nên ảnh cỡ 600w là phù hợp.

2. Sử dụng pixel density descriptor (x)

Thường dùng khi ảnh hiển thị cùng kích thước trên mọi thiết bị, nhưng cần phiên bản độ phân giải cao cho màn hình Retina.

<img src="photo-1x.jpg" srcset="photo-2x.jpg 2x, photo-3x.jpg 3x" alt="Ảnh Retina">

Lưu ý: Không cần sizes vì kích thước hiển thị cố định.

3. Kết hợp srcset với thẻ <picture> để tối ưu định dạng

<picture> <source type="image/webp" srcset="photo-300.webp 300w, photo-600.webp 600w"> <source type="image/avif" srcset="photo-300.avif 300w, photo-600.avif 600w"> <img src="photo-600.jpg" srcset="photo-300.jpg 300w, photo-600.jpg 600w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="Ảnh Responsive với WebP">
</picture>

Cách này đảm bảo trình duyệt ưu tiên định dạng hiện đại, đồng thời chọn đúng kích thước.

Sai lầm thường gặp khi dùng srcset và cách tránh

Không khai báo thuộc tính sizes khi dùng width descriptor: Trình duyệt sẽ mặc định sizes là 100vw, dẫn đến chọn ảnh quá lớn hoặc quá nhỏ. Luôn khai báo sizes chính xác.
Chỉ dùng srcset với ảnh nhỏ: Cần cung cấp nhiều mức kích thước từ nhỏ đến lớn để trình duyệt có đủ lựa chọn.
Quên ảnh dự phòng src: Trình duyệt cũ có thể không hỗ trợ srcset, src đảm bảo ảnh vẫn hiển thị.
Dùng quá nhiều phiên bản không cần thiết: Từ 3 đến 5 phiên bản thường đủ: 320w, 640w, 1024w, 1920w.
Không tối ưu dung lượng từng phiên bản: Ảnh nhỏ cũng nén và chỉnh kích thước tương ứng, tránh lãng phí.

Ứng dụng thực tế – Tối ưu srcset cho các nền tảng phổ biến

WordPress

WordPress đã tích hợp sẵn cơ chế tạo nhiều kích thước ảnh và tự động thêm srcset vào thẻ khi upload. Tuy nhiên, cần kiểm tra file functions.php để đảm bảo các breakpoint phù hợp với chủ đề. Có thể dùng plugin như Smush, ShortPixel để tối ưu thêm.

Shopify

Nền tảng Shopify cũng tự động tạo srcset cho ảnh sản phẩm. Khi tùy chỉnh theme, có thể can thiệp vào liquid template để điều chỉnh srcset

Framework JavaScript (React, Vue, Angular)

Các thư viện quản lý hình ảnh như next/image (Next.js) sử dụng srcset mặc định. Với React thuần, có thể viết component tự sinh srcset từ danh sách ảnh.

Kiểm tra hiệu suất với Chrome DevTools

Mở tab Network, lọc theo Images.
Tải lại trang và quan sát kích thước ảnh được tải (cột Size).
Thay đổi kích thước trình duyệt (responsive mode) và kiểm tra xem có tải ảnh nhỏ hơn không.
Nếu thấy ảnh lớn vẫn được tải trên màn hình nhỏ, cần kiểm tra lại sizes.

Lưu ý quan trọng khi triển khai srcset

Kiểm tra hỗ trợ trình duyệt: Tất cả trình duyệt hiện đại đều hỗ trợ srcset. Với IE 11, srcset không được hỗ trợ, nhưng sẽ dùng ảnh dự phòng src.
Sử dụng đúng định dạng tên file: Đặt tên theo quy tắc rõ ràng: iamge-320.jpg, image-640.jpg.
Tối ưu file ảnh trước khi đưa lên web: Nén không mất chất lượng bằng công cụ như TinyPNG, Squoosh.
Không lạm dụng quá nhiều breakpoint: Chỉ cần 3-4 mức là đủ cho đa số thiết bị.
Kết hợp với lazy loading: Dùng loading=”lazy” kết hợp srcset để giảm tải ban đầu.

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

Srcset có ảnh hưởng đến SEO không?

Có, srcset gián tiếp tác động SEO thông qua tốc độ tải và trải nghiệm người dùng. Google đánh giá cao các trang có hình ảnh tối ưu cho di động, giảm dung lượng và CLS.

Nên dùng srcset hay thẻ <picture>?

Nếu chỉ đơn giản là thay đổi kích thước ảnh theo viewport, dùng srcset là đủ. Nếu cần thay đổi bố cục ảnh (art direction) hoặc hỗ trợ định dạng hiện đại, dùng hoặc kết hợp cả hai.

Làm thế nào để tạo srcset tự động?

Sử dụng các công cụ như Gulp, Webpack plugin, hoặc dịch vụ CDN hình ảnh (Cloudinary, Imgix) có khả năng tự động sinh srcset từ ảnh gốc.

Thuộc tính sizes có bắt buộc không?

Khi dùng width descriptor (w), sizes là bắt buộc để trình duyệt tính toán chính xác. Khi dùng pixel density descriptor (x), không cần sizes.

Trình duyệt chọn ảnh như thế nào nếu có nhiều lựa chọn?

Trình duyệt dựa trên thuật toán nội bộ: thường ưu tiên ảnh có kích thước gần nhất với kích thước hiển thị, nhưng có thể chọn ảnh nhỏ hơn nếu kết nối chậm (dựa trên dự đoán bandwidth).

Kết luận

Srcset là công cụ không thể thiếu để xây dựng website responsive, thân thiện với người dùng và tối ưu hiệu suất. Việc hiểu rõ srcset là gì và cách triển khai đúng sẽ giúp cải thiện đáng kể điểm Lighthouse, giảm băng thông và mang lại trải nghiệm mượt mà trên mọi thiết bị. Để đạt hiệu quả cao nhất, hãy kết hợp srcset với thẻ cho định dạng ảnh hiện đại, luôn xác định sizes chính xác và chuẩn bị nhiều phiên bản ảnh có chất lượng tương ứng. Với sự phát triển không ngừng của công nghệ web, tối ưu hình ảnh là bước đầu tiên và quan trọng nhất để giữ chân người dùng và leo top kết quả tìm kiếm.

Xem thêm: