Thiết kế Responsive Web Design hầu như là yêu cầu bắt buộc trong cả dự án web hiện tại và tương lai. Ngoài việc sử dụng được tốt trên tất cả các thiết bị dựa vào độ rộng của màn hình. Thì có một vấn đề cũng quan trọng ảnh hưởng đến sự trải nghiệp của người dùng không kém đó là hiển thị hình ảnh độ phân giải cao trên các màn hình có độ phẩn giải HD hoặc Retina của apple.

Vì sao phải hiển thị ảnh HD và Retina?

Vấn đề ở đây xuất phát từ việc độ phân giải hiển thị của website khác với độ phân giải vật lý của màn hình. Ví dụ con Iphone 6,7,8 có độ phân giải là 750 x 1.334, Iphone X là 1125×2436. Nhưng độ phân giải hiển thị của những điện thoại này theo chiều ngang cũng chỉ là 375px. Mục đích của việc thu nhỏ lại là để cho người dùng dễ đọc, Vì nó tùy thuộc vào diện tích của màn hình mà người ta thu lại (ratio) theo tỉ lệ nào đó. Ví dụ iphone 6,7,8 là 2. Bạn có thể test thiết bị mình đang sử dụng có kích thước hiển thị là bao nhiêu ở website này: Liên kết

Vì vậy chúng ta hình dung để hiển thị 1 hình có độ rộng 100px trên màn hình retina 2x chúng ta nên sử dụng hình có kích thước gốc là 200px để khi hiển thị trên 100px màn hình retina 2x khi đó sẽ tận dụng tối đa hết được điểm ảnh vật lý của màn hình. Dưới đây là hình ảnh mô tả tỉ lệ scale của các thiết bị của apple với kích thước điểm ảnh vật lý của màn hình.

Sử dụng Media queries

Để kiểm tra và sử dụng css, hình ảnh độ phân giải cao cho màn hình rentia 2x chúng ta có thể dùng quy vấn media query trong css như sau:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Sử dụng css, hình ảnh ở đây cho màn hình retina 2x */
}

Hoặc một số độ phân giải khác dựa vào tỉ lệ ratio:

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Sử dụng css và image ở đây cho màn hình HD */
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Sử dụng css và image ở đây cho màn hình HD */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Sử dụng css và image ở đây cho màn hình HD */
}

Ngoài ra chúng ta có thể kết hợp thêm tham số độ phân giải để kiểm tra và hiển thị tương ứng với kích thước màn hình:

@media only screen and (min-width: 320px) {

  /* Màn hình nhỏ, không retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Màn hình nhỏ, rentia, ghi đè lên code cho màn hình nhỏ khai báo ở phía trên*/

}

@media only screen and (min-width: 700px) {

  /* Màn hình vừa, không retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Màn hình vừa, rentia, ghi đè lên code cho màn hình vừa khai báo ở phía trên */

}

@media only screen and (min-width: 1300px) {

  /* Màn hình lớn, không rentia */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Màn hình lớn, rentia, ghi đè lên code cho màn hình lớn khai báo ở phía trên */

}

Sử dụng srcset, sizes trong thẻ img của HTML

Ngoài việc việc sử dụng media queries để định dạng css và hình ảnh thì ở HTML chúng ta cũng có thể sử dụng srcset để khai báo một danh sách các hình ảnh tương ứng với màn hình mà chúng ta muốn sử dụng nó. Cách sử dụng cụ thể như sau:

Ví dụ Thẻ img cần hiển thị hết chiều chiều rộng trên điện thoại ip 7 có kích thước là: 375 và tỉ lệ ratio là 2.

Trường hợp khai báo tỉ lệ ratio:

<img srcset="/small.png 1x,
 /medium.png 1.5x,
 /large.png 2x" />

Ví dụ 3 hình trên có kích thước lần lượt là:

  • small.jpg: 400px width
  • medium.jpg: 800px width
  • large.jpg: 1600px width

Thì trình duyệt sẽ sử dụng hình ảnh large dù cho nó có kích thước bao nhiêu đi nữa vì nó được khai khai báo 2x ở phía sau nghĩa là sử dụng cho màn hình độ phân giải 2x.

Trường hợp khai báo width:

<img srcset="/small.png 400w, /medium.png 800w, /large.png 1600w" />

Ứng với từng kích thước trình duyệt sẽ tự chia với chiều rộng của màn hình hiển thị Iphone 7 là 375 và có ratio là 2 chúng ta có kết quả như sau:

400/375 ~ 1.07
800/375 ~ 2.13
1600/375 ~ 4.27

Khi đó trình duyệt sẽ nhận biết được hình ảnh 800 có tỉ lệ là 2.13 gần với ratio của thiết bị iphone 7 là 2 nên trình duyệt sẽ tải hình này để hiển thị thay vì dùng 2 hình 400w và 1600w.

Sử dụng thuộc tính sizes:

Khi chúng ta sử dụng css width 500px như thế này thì dù ở bất cứ màn hình nào hình ảnh sẽ dùng là 500px. Nhưng ở màn hình nhỏ hơn 600px chúng ta cần sử dụng 100% chứ không phải cố định là 500px như ở màn hình lớn.

img{
  width: 500px
}

Trong trường hợp này chúng ta sẽ thông báo cho trình duyệt biết nếu kích thước màn hình < 600px thì sử dụng 100vw (100%view width). Còn lại thì sử dụng 500px.

<img 
 src="/small.jpg" srcset="/small.png 400w, /medium.png 800w, /large.png 1600w" alt="NVKSolution.com" sizes="(max-width: 600px) 100vw, 500px" />