06/12/2018, 16:01

Responsive Images trên 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 ...

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.

Thuộc tính CSS về hình nền

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ụ:

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ụ:

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 HTML5

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ụ:

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ụ:

Ở 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ụ:

Ở 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ụ:

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!

Techtalk via Viblo

Bài liên quan

Responsive Images trên 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 ...

Hoàng Hải Đăng viết 4 ngày trước

Hỏi tại sao không cho bôi đen, không cho chuột phải trên Web WordPress?

Trả lời câu hỏi tuần 3 tháng 5/2015 của bạn Hà Anh Dũng hỏi tại sao không cho bôi đen, không cho chuột phải trên Web WordPress. Bạn Hà Anh Dũng hỏi: http://suamaytinh123.com/mot-so-loi-ram-thuong-gap/ web này ko cho bôi đen ko cho chuột phải. Làm sao đc vậy máy bác,có cách nào phá đc ko ...

Vũ Văn Thanh viết 17:42 ngày 04/09/2018

Hỏi tại sao tắt hết Comment nhưng nó vẫn hiện trên Web?

Trả lời câu hỏi tuần 1 tháng 5/2015 của bạn Trần Minh Trí hỏi tại sao tắt hết Comment nhưng nó vẫn hiện trên Web. Bạn Trần Minh Trí hỏi: sao mình tắt hết comment nhưng nó vẫn hiện trên web vậy các thánh Ảnh. Hỏi tại sao tắt hết Comment nhưng nó vẫn hiện trên Web? Trả lời câu ...

Hoàng Hải Đăng viết 17:30 ngày 04/09/2018

SALT: Ngôn ngữ hỗ trợ tiếng nói trên web

Việc sử dụng điện thoại để truy cập các dịch vụ tự động như kiểm tra tài khoản ngân hàng hay lịch bay không phải là điều mới mẻ. Những hệ thống như vậy cho phép người gọi trả lời các câu hỏi hay chọn các tùy chọn, và hệ thống sẽ đáp trả bằng các câu nói thâu âm ...

Hoàng Hải Đăng viết 10:47 ngày 22/08/2018

Cách gắn nhiều ghim tùy chỉnh và thông tin popup trong Google Maps trên Web.

Trong bài viết này, tôi sẽ chia sẻ về một phương pháp gắn nhiều ghim tùy chỉnh và thông tin popup trong Google Maps trên Web. Mục lục Các trang web được xây dựng sử dụng phương thức này Chuẩn bị data Xây dựng map 3.1. Xây dựng map thông thường 3.2. Thiết đặt ghim 3.3. Gắn sự kiện click ...

Trịnh Tiến Mạnh viết 17:25 ngày 12/08/2018
0