Responsive Images in Web

Cách thông thường chúng ta vẫn sử dụng hình ảnh lớn phù hợp với màn hình lớn và sẽ được co lại khi xem trên màn hình nhỏ, đây là giải pháp đơn giản nhưng có 2 vấn đề lớn, thứ nhất là chúng ta xem hình kích thước nhỏ nhưng kích thước thật lại là một hình lớn vậy là lãng phí băng thông và làm tăng thời gian tải trang, thứ hai là vì nó không là kích thước thật của hình ảnh nên đương nhiên trông sẽ mờ hơn và các chi tiết bị nhỏ đi. Trong bài viết này chúng ta sẽ bàn đến những giải pháp cho vấn đề này.

Ví dụ nếu chúng ta chọn giải pháp là sử dụng 2 thẻ html hình ảnh một cho màn hình lớn và một cho màn hình nhỏ thì sẽ đạt được yêu cầu về chất lượng hình ảnh. Ví dụ:

img.smallscreen { display: none; }
@media only screen and (max-awidth: 320px) {
   img {
     display: none;
   }
   img.smallscreen {
     display: inline;
   }
}

<img src="largeimage.jpg">
<img class="smallscreen" src="smallimage.jpg>

Giải pháp này sẽ dùng css ẩn hình ảnh không phù hợp và hiển thị hình ảnh phù hợp với kích thước màn hình. Thực tế nhược điểm lớn của phương pháp này là trình duyệt của bạn vẫn trả về nhiều hình ảnh và nó chỉ ẩn đi những hình không cần thiết như vậy phương pháp này không tiết kiệm được lưu lượng trang web mà còn bị tăng lên.

Thay vì sử dụng giải pháp trên chúng ta có thể sử dụng hình nền cho một phần tử rổng nào đó như div hay span. Ví dụ:

#image {
  background-image: url(largeimage.jpg);
}
@media only screen and (max-awidth: 320px) {
  #image {
    background-image: url(smallimage.jpg);
  }
}

<div id="image"></div>

Tuy nhiên giải pháp đơn giản này vẫn còn những hạn chế lớn đó là chúng ta chưa có được nguồn hình ảnh được trả về trong tài liệu HTML điều này có nghĩa hình ảnh chưa mang tính chất động, giải pháp này chỉ hổ trợ cho phần cải thiện giao diện để có được những hình ảnh tốt nhất với những độ phân giải màn hình khác nhau.

Sử dụng thẻ <picture> kết hợp với thẻ <source>

Điều này cũng tương tự như thẻ <video> hay <audio>. Phần tử <source> có thẻ chứa các thuộc tính tùy chọn như type và media. Ví dụ:

<picture>
   <source src=image800.png media="min-awidth:800px">
   <source src=image480.png media="min-awidth:480px">
   <source src=image320.png>
       
      <img src=image800.png alt="angry pirate">
</picture>

Giải pháp này thực sự rõ ràng và có khả năng tùy biến mạnh mẽ nhưng một điều không hay là với mỗi hình ảnh chúng ta lại có vô số các phần tử <source> với các media khác nhau nếu trang web của bạn nhiều hình ảnh thì rõ ràng lượng code HTML sẽ khá nhiều điều này làm tăng dung lượng của tài liệu HTML.

Sử dụng thuộc tính srcset

W3C hiện đã có bản phác thảo về thuộc tính này điều này thực sự hữu ích bởi thuộc tính src hiện đã không đáp ứng đủ yêu cầu, với srcset chúng ta có thể đơn giản hơn việc viết css media query, những đường dẫn ảnh có sự ràng buộc với bối cảnh sẽ được tải tùy theo kích thước màn hình. Ví dụ:

<img src="image300.png" srcset="image150.png 600w, image100.png 480w" alt="">

Ở trên hình ảnh image300 bình thường sẽ được tải nhưng nếu màn hình nhỏ hơn hoặc bằng 600px thì hình image150 sẽ được tải, 600w ở đây cũng đồng nghĩa như media query là max-awidth: 600px, tương tự với 480w. Trong responsive web chúng ta thường để viewpost là device-awidth nhưng chúng ta cũng biết rằng đơn vị pixel của CSS trên trình duyệt có một tỉ lệ nào đó với pixel của thiết bị. Ví dụ thông thường các màn hình desktop hay các thiết bị của apple chưa có retina sẽ có tỉ lệ là 1, với các thiết bị của apple có retina sẽ có tỉ lệ là 2 tức là độ phân giải của thiết bị sẽ bằng 2 lần độ phân giải trên trình duyệt. Trong trường hợp để xác định thiết bị là desktop không có một chiều rộng rõ ràng thì việc dựa vào tỉ lệ độ phân giải giữa thiết bị và trình duyệt là hữu ích. Ví dụ:

<img src="image.jpg" srcset="image0.jpg 720w, image721.jpeg 1280w, image1281.jpg 1x" alt="">

Ở trên hình image0 được tải khi chiều rộng trình duyệt là nhỏ hơn hoặc bằng 720px, tương tự cho 1280w, và với trường hợp kích thước lớn hơn 1280px nếu trình duyệt và độ phân giải thiết bị có tỉ lệ là 1 thì hình sẽ tải là image1281, điều này sẽ phù hợp với các màn hình desktop, còn image.jpg cho trường hợp trình duyệt chưa hỗ trợ thuộc tính srcset.

Như vậy ta có thể thấy giải pháp dùng <picture> và giải pháp dùng thuộc tính srcset đều có cùng mục đích và có thể dùng độc lập, đã có nhiều bàn luận về giải pháp nào tốt hơn nhưng bạn có thể kết hợp cả 2 giải pháp. Ví dụ:

<picture>
   <source media="(min-awidth: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-awidth: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
   <img src="fallback.jpg" alt="" />
</picture>

Hãy cùng chờ đợi W3C công bố chính thức, các trình duyệt bắt đầu hỗ trợ để bạn và tôi có thể sử dụng những giải pháp cần thiết này. Trong thời gian này chúng ta vẫn đang rất cần một giải pháp thay thế và các nhà phát triển đã nhanh tróng có những giải pháp bằng các plugin javaScript, trong bài viết tiếp chúng ta sẽ cùng tìm hiểu các giải pháp sử dụng javaScript.

Bài viết tham khảo ở trang: (https://css-tricks.com/responsive-images-css/)

Cảm ơn các bạn đã theo dõi!