Thẻ Picture trong HTML: Hướng Dẫn Toàn Tập về Responsive Image

Bạn có bao giờ thấy hình ảnh trên website của mình bị vỡ nét trên màn hình lớn, hoặc tải quá chậm trên điện thoại? Đó là lúc thẻ <img> truyền thống không còn đủ sức. Rất may, thẻ Picture trong HTML ra đời như một giải pháp hoàn hảo cho hình ảnh responsive. Hãy cùng WiWeb tìm hiểu toàn bộ cách sử dụng thẻ này để tối ưu hóa hình ảnh, nâng cao tốc độ và trải nghiệm người dùng trên mọi thiết bị.

Thẻ Picture trong HTML là gì?

Trong thế giới web đa thiết bị ngày nay, một hình ảnh duy nhất không thể đáp ứng tốt cho tất cả màn hình. Đây chính là lúc thẻ Picture trong HTML phát huy sức mạnh của mình.

Tại sao thẻ img truyền thống không còn đủ cho web hiện đại?

Thẻ <img> đã phục vụ chúng ta rất tốt trong nhiều năm. Nó đơn giản và hiệu quả để hiển thị một hình ảnh. Tuy nhiên, khi người dùng truy cập web từ điện thoại, máy tính bảng, laptop, và màn hình 4K, thẻ <img> bắt đầu bộc lộ những hạn chế:

• Lãng phí băng thông: Tải một hình ảnh kích thước lớn cho desktop trên màn hình điện thoại là không cần thiết. Điều này làm chậm tốc độ tải trang và tiêu tốn dữ liệu di động của người dùng.
• Trải nghiệm kém: Một hình ảnh chiều ngang rộng có thể trông tuyệt vời trên máy tính. Nhưng khi xem trên điện thoại, nó bị co lại và trở nên rất khó nhìn.
• Không linh hoạt với định dạng mới: Thẻ <img> không có cơ chế mặc định để ưu tiên các định dạng ảnh hiện đại như WebP hay AVIF, vốn có chất lượng tốt hơn và dung lượng nhỏ hơn.

Giới thiệu thẻ picture: Giải pháp toàn diện cho hình ảnh responsive

Thẻ <picture> trong HTML5 được sinh ra để giải quyết chính xác những vấn đề trên. Nó không phải là một thẻ hiển thị hình ảnh trực tiếp. Thay vào đó, hãy xem nó như một người chỉ dẫn thông minh cho trình duyệt.

Bạn cung cấp cho thẻ <picture> nhiều phiên bản hình ảnh khác nhau thông qua các thẻ <source>. Sau đó, bạn đặt ra các quy tắc (ví dụ: kích thước màn hình, định dạng hỗ trợ). Trình duyệt sẽ tự động xem xét các quy tắc này và chọn ra nguồn ảnh phù hợp nhất để hiển thị. Điều này mang lại sự kiểm soát tuyệt đối cho các nhà phát triển trong việc tạo responsive image với HTML5.

Phân tích Cấu trúc và Cú pháp của Thẻ picture

Để sử dụng thẻ <picture> hiệu quả, bạn cần nắm rõ cấu trúc và các thuộc tính quan trọng của nó. Về cơ bản, nó hoạt động như một container chứa các lựa chọn hình ảnh.

Các thành phần cốt lõi: Thẻ source và thẻ img

Một thẻ <picture> luôn bao gồm hai loại thẻ con:

• Một hoặc nhiều thẻ <source>: Mỗi thẻ <source> đại diện cho một phiên bản hình ảnh. Trình duyệt sẽ duyệt qua các thẻ này từ trên xuống dưới và chọn thẻ <source> đầu tiên đáp ứng điều kiện.
• Một thẻ <img> duy nhất: Đây là thành phần bắt buộc và phải được đặt ở vị trí cuối cùng. Nó có hai vai trò chính:
  1. Là fallback, hiển thị hình ảnh nếu không có thẻ <source> nào phù hợp hoặc trình duyệt quá cũ không hỗ trợ thẻ <picture>.
  2. Là nơi để khai báo các thuộc tính chung như alt (văn bản thay thế cho SEO và trợ năng), class, hoặc id.

Giải thích các thuộc tính quan trọng: srcset, media, và type

Sức mạnh của thẻ <source> nằm ở các thuộc tính của nó. Ba thuộc tính bạn sẽ sử dụng thường xuyên nhất là:

• srcset (bắt buộc): Chứa đường dẫn (URL) đến file hình ảnh bạn muốn hiển thị. Đây là thuộc tính srcset quen thuộc.
• media: Đây là nơi bạn định nghĩa các điều kiện media query của CSS. Ví dụ, media="(min-width: 992px)" có nghĩa là “chỉ sử dụng nguồn ảnh này khi chiều rộng màn hình lớn hơn hoặc bằng 992px”.
• type: Cho phép bạn chỉ định loại MIME của hình ảnh (ví dụ: type="image/webp" hoặc type="image/avif"). Trình duyệt sẽ kiểm tra xem nó có hỗ trợ định dạng này không. Nếu không, nó sẽ bỏ qua và xét thẻ <source> tiếp theo. Điều này cực kỳ hữu ích để ưu tiên các định dạng ảnh thế hệ mới.

3 Trường Hợp Sử Dụng Thực Tế (Kèm Code Mẫu)

Lý thuyết là vậy, nhưng làm thế nào để áp dụng vào thực tế? Dưới đây là 3 kịch bản phổ biến nhất về cách sử dụng thẻ picture mà WiWeb đã tổng hợp cho bạn.

Art Direction: Thay đổi hoàn toàn hình ảnh theo ngữ cảnh (Desktop và Mobile)

Đây là công dụng mạnh mẽ nhất của thẻ <picture>, còn được gọi là art direction html. Bạn có thể hiển thị một hình ảnh hoàn toàn khác nhau tùy thuộc vào không gian hiển thị.

Ví dụ, bạn có một banner quảng cáo rộng cho desktop. Trên mobile, thay vì co nhỏ lại, bạn muốn hiển thị một phiên bản cắt dọc để tập trung vào sản phẩm chính.

<picture>
  <!-- Hiển thị ảnh ngang khi màn hình rộng hơn 600px -->
  <source media="(min-width: 600px)" srcset="/images/banner-ngang.jpg">

  <!-- Mặc định (cho màn hình nhỏ hơn 600px), dùng ảnh dọc -->
  <source srcset="/images/banner-doc.jpg">

  <!-- Fallback cho trình duyệt cũ -->
  <img src="/images/banner-doc.jpg" alt="Banner quảng cáo sản phẩm mới">
</picture>

Hỗ trợ định dạng ảnh hiện đại: Ưu tiên WebP/AVIF, fallback về JPG/PNG

WebP và AVIF là các định dạng ảnh thế hệ mới. Chúng cho chất lượng tương đương JPG/PNG nhưng với dung lượng nhỏ hơn đáng kể. Sử dụng thẻ <picture> là cách hoàn hảo để tận dụng lợi thế này mà không sợ lỗi trên các trình duyệt cũ.

<picture>
  <!-- Trình duyệt sẽ thử tải file AVIF trước -->
  <source srcset="/images/hinh-anh.avif" type="image/avif">

  <!-- Nếu không hỗ trợ AVIF, nó sẽ thử tải file WebP -->
  <source srcset="/images/hinh-anh.webp" type="image/webp">

  <!-- Cuối cùng, nếu cả hai đều không được, nó sẽ dùng file JPG -->
  <img src="/images/hinh-anh.jpg" alt="Mô tả hình ảnh">
</picture>

Resolution Switching: Tối ưu hình ảnh cho màn hình Retina và thông thường

Bạn muốn hình ảnh của mình luôn sắc nét trên các màn hình có mật độ điểm ảnh cao (như Retina của Apple)? Thẻ <picture> cũng có thể xử lý việc này.

Bằng cách kết hợp với media query cho mật độ điểm ảnh, bạn có thể cung cấp một ảnh phiên bản 2x hoặc 3x.

<picture>
  <!-- Dành cho màn hình có mật độ điểm ảnh cao -->
  <source media="(min-resolution: 1.5dppx)" srcset="/images/logo-retina-2x.png">

  <!-- Dành cho màn hình thông thường -->
  <source srcset="/images/logo-1x.png">

  <!-- Fallback -->
  <img src="/images/logo-1x.png" alt="Logo công ty">
</picture>

Lợi Ích Vượt Trội Khi Sử Dụng Thẻ Picture

Việc dành thời gian để triển khai thẻ <picture> sẽ mang lại những lợi ích to lớn cho website của bạn, cả về kỹ thuật lẫn trải nghiệm người dùng.

Cải thiện tốc độ tải trang và tiết kiệm băng thông

Đây là lợi ích rõ ràng nhất. Bằng cách chỉ tải hình ảnh có kích thước và định dạng phù hợp nhất với thiết bị của người dùng, bạn đã giảm đáng kể dung lượng cần tải về. Điều này trực tiếp giúp trang web của bạn tải nhanh hơn, một yếu tố xếp hạng quan trọng của Google.

Nâng cao trải nghiệm người dùng

Không ai thích chờ đợi một trang web tải chậm hoặc xem những hình ảnh bị méo, mờ. Việc sử dụng thẻ <picture> đảm bảo rằng hình ảnh luôn hiển thị sắc nét và phù hợp với ngữ cảnh. Điều này tạo ra một trải nghiệm mượt mà, chuyên nghiệp, giữ chân người dùng ở lại lâu hơn.

Tối ưu hóa SEO hình ảnh hiệu quả hơn

Google yêu thích các trang web nhanh và thân thiện với người dùng. Tốc độ tải trang nhanh hơn và tỷ lệ thoát trang thấp hơn là những tín hiệu tích cực cho SEO. Hơn nữa, bạn vẫn có thể sử dụng thuộc tính alt quan trọng trong thẻ <img> fallback để cung cấp mô tả cho công cụ tìm kiếm, đảm bảo khả năng tiếp cận và tối ưu hóa hình ảnh.

Câu Hỏi Thường Gặp (FAQ) về Thẻ Picture

Khi tìm hiểu về thẻ <picture>, có thể bạn sẽ gặp một vài thắc mắc. WiWeb đã tổng hợp và giải đáp những câu hỏi phổ biến nhất ở đây.

.anh-ben-trai {
  float: left;
  margin-right: 15px; /* Tạo khoảng cách với chữ */
}

.anh-ben-phai {
  float: right;
  margin-left: 15px; /* Tạo khoảng cách với chữ */
}

Lời kết

Thẻ <picture> không còn là một kỹ thuật xa lạ. Nó đã trở thành một công cụ thiết yếu cho các nhà phát triển web hiện đại. Việc nắm vững cách sử dụng thẻ picture không chỉ giúp website của bạn nhanh hơn, đẹp hơn mà còn mang lại trải nghiệm tốt nhất cho người dùng trên mọi thiết bị.

Bắt đầu từ những ví dụ nhỏ, bạn sẽ nhanh chóng thấy được sức mạnh mà nó mang lại. Đừng ngần ngại áp dụng ngay vào dự án tiếp theo của mình.

Bạn đã áp dụng thẻ <picture> vào dự án của mình chưa? Hãy chia sẻ kinh nghiệm hoặc bất kỳ câu hỏi nào ở phần bình luận bên dưới nhé!

Nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp, tối ưu hóa từ hình ảnh đến tốc độ, WiWeb luôn sẵn sàng đồng hành. Liên hệ với chúng tôi để được tư vấn chi tiết!