Code responsive image

Dẫn nhập

Ở bài học trước chúng ta đã cùng nhau CODE RESPONSIVE CHO TỪNG SECTION.

Trong bài học này chúng ta sẽ cùng nhau Code responsive image.

---

Nội dung

Để tiếp thu tốt bài học này các bạn cần:

• Nắm rõ kiến thức cơ bản về Sass và Css.

Trong bài học này chúng ta sẽ cùng nhau:

• Giới thiệu chung về responsive image
• Responsive Images trong HTML
• Responsive Images trong CSS

---

Giới thiệu chung về responsive image

Trang web của chúng ta đã responsive rồi, nhưng việc biết thêm về repsonsive image sẽ giúp tăng performance của website (tốc độ, …)

Ví dụ khi sử dụng laptop truy cập trang web, bạn load 1 bức ảnh 1mb nhanh hơn nhiều khi bạn sử dụng điện thoại để load bức ảnh đó khi truy cập vào cùng 1 trang web.

Việc của chúng ta sẽ làm thế nào để khi ở các thiết bị (với các size tab-land, tab-port, và phone), các images sẽ được load phù hợp (Vd: Bức ảnh 1mb load ở laptop chỉ còn cần load 200kb khi load nếu truy cập bằng điện thoại).

Chúng ta có 3 cách để giải quyết:

1. Giảm độ phân giải của bức ảnh khi width của website thay đổi. (resolution switching)
2. Giảm mật độ điểm ảnh của bức ảnh khi width của website thay đổi. (density switching)
3. Thay bằng load 1 bức ảnh nhẹ hơn khi width của website thay đổi. (art direction ).

Chúng ta sẽ tìm hiểu cách sử dụng các hướng giải quyết theo các hướng trên ở các phần tiếp theo. Chúng ta sẽ chia ra làm 2 phần, phần 1 đó chính là chỉnh các image trên html ( nằm trong thẻ <img/>). Phần 2 là các image sử dụng css (các background images)

---

Responsive Images in HTML

Trường hợp 1 mình sẽ cùng sử dụng kết hợp art direaction và density switching.

Ở bức ảnh trên ta có thể thấy size thực tế của bức ảnh là 600x400 px nhưng hiển thị trên web chỉ sử dụng có 160 x 107px, nên việc sử dụng 1 bức ảnh có mật độ điểm ảnh lớn như vậy là không cần thiết.

Ta sử dụng attribute srcset trong thẻ img

<div class="footer__logo-box">
    <img srcset="./img/logopng-small.png 1x, ./img/logopng.png 2x" class="footer__logo">
</div>

Ở đây 1x, 2x là descriptor dùng để mô tả density mà bức ảnh sử dụng đại diện, và webbrowser sẽ lựa chọn ảnh để dùng phù hợp với size của screen mà user đang sử dụng (1x là low density, 2x là cho high density) (Cái này thì hơi khó để test nên các bạn hãy cứ tin tưởng là nó sẽ làm được như thế nhé :P )

Tiếp theo chúng ta sẽ đến với bước phức tạp hơn là thay đổi hình ảnh sử dụng dựa vào width của screen

<picture>
    <source media="(max-width: 600px)" srcset="./img/logopng-small.png 1x">
    <img srcset="./img/logopng.png 1x" class="footer__logo">
</picture>

Ở đây ta sử dụng thẻ mới đó chính là picture trong đó có source chứa attribute media, Các bạn có thể dễ dàng hiểu rằng khi điều kiện trong media được đáp ứng thì nó sẽ sử dụng image trong attribute srcset của <source> thay vì của <img/>. Các bạn hoàn toàn có thể viết thêm nhiều thẻ source hơn nữa cho từng width như tab-land, tab-port

Tiếp sau đây chúng ta sẽ cùng tìm hiểu sử dụng resolution switching để tạo responsive image

Ở đây ta sẽ sử dụng thêm những attribute nữa của thẻ <img> ( ta sử dụng các image ở phần section about để làm ví dụ nha)

<img
      srcset="img/humangroups1-small.png 1920w, img/humangroups1-small.png 600w"
      sizes="(max-width: 900px) 13vw, (max-width: 600px) 20vw, 270px"
      src="./img/humangroups1.jpg" alt="photo1"
      class="composition__photo composition__photo--p1">

Ở đây ta không dùng density descriptor (1x 2x ) như phần trên mà ta sử dụng width descriptor (600w tương đương 600px) để giúp browser biết về thông tin width của image mà chưa cần download về. Nhưng thế chưa đủ để giúp browser xác định được đâu là hình ảnh sẽ được load lên để hiển thị. Ta sử dụng thêm attribute size để xác định resolution dựa vào width của screen thiết bị mà user sử dụng

                                                                                                                                      (view tab-port với width là 900px, width image hiển thị là 117px)

                                                                                                                                     (view phone với width là 600px, width image hiển thị là 117px )

còn 270px chính là giá trị mặc định sẽ hiển thị trên browser của image.

Và phần còn lại là dựa vào xử lí của website browser sẽ chọn ra bức ảnh hiển thị phù hợp.

---

Responsive Image trong CSS

 Tiếp theo chúng ta sẽ xử lí tiếp responsive trong css

.header {
    @media (min-resolution: 192dpi) and (max-width: 900px){
        background-image:
        linear-gradient(to right bottom, rgba($color-primary-light, .8), rgba($color-primary-dark, .8)),
        url('../img/background1.jpg');
    }
}

Đơn giản là ta cho thêm điểu kiện về density của screen (đơn vị là dpi), khi resolution nhỏ hơn 192 thì nó sẽ sử dụng background img là background1-small, tương tự kết hợp chung với điều kiện của width. Vậy là chúng ta đã có cách xử lí responsive image trong css.

---

Kết luận

Ở bài học này chúng ta đã cùng nhau TÌM HIỂU VỀ RESPONSIVE IMAGE và cũng là bài cuối trong Project đầu tiên của khóa học. Hẹn gặp lại các bạn trong project 2 và chúng ta sẽ cùng làm quen với flexbox và rất nhiều thuộc tính khác thú vị của CSS và Sass.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: Luyện tập – Thử thách – Không ngại khó.

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.