6.1 Sử dụng thuộc tính srcset và sizes
Màn hình với mật độ pixel cao, như màn hình Retina của Apple, đã trở thành tiêu chuẩn cho nhiều thiết bị hiện đại. Những màn hình này có số lượng pixel trên inch (PPI) lớn hơn nhiều, cung cấp hình ảnh rõ nét và chi tiết hơn. Đối với những ai đang phát triển web, điều quan trọng là tối ưu hóa đồ họa cho các màn hình như vậy để trải nghiệm của người dùng là tốt nhất. Hãy cùng tìm hiểu cách làm điều này nha.
Vấn đề liên quan đến màn hình mật độ cao
Trên các màn hình mật độ cao, hình ảnh tiêu chuẩn có thể trông bị mờ hoặc pixel hóa bởi vì một pixel của hình ảnh bị kéo dài ra thành nhiều pixel của màn hình. Để giải quyết vấn đề này, cần sử dụng hình ảnh với độ phân giải cao hơn, sau đó có thể được trình duyệt phóng to để hiển thị trên màn hình mật độ cao.
Thuộc tính srcset và sizes cho phép xác định các phiên bản khác nhau của hình ảnh cho các mật độ pixel khác nhau. Điều này giúp trình duyệt chọn lựa hình ảnh phù hợp nhất cho thiết bị cụ thể.
Ví dụ về cách sử dụng srcset và sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tối ưu hóa cho màn hình Retina</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Ví dụ hình ảnh cho màn hình Retina">
</body>
</html>
Giải thích mã:
srcset: chỉ định ba phiên bản của hình ảnh cho các mật độ pixel khác nhau (1x,2x,3x)-
sizes: xác định chiều rộng của hình ảnh cho các điều kiện hiển thị khác nhau:- Đến
600px— hình ảnh chiếm100%chiều rộng của viewport - Đến
1200px— hình ảnh chiếm50%chiều rộng của viewport - Trong các trường hợp khác — hình ảnh chiếm
33%chiều rộng của viewport
- Đến
6.2 Sử dụng đồ họa vector (SVG)
Đồ họa vector (SVG) là một giải pháp tuyệt vời cho các màn hình mật độ cao bởi vì các tệp SVG có thể được phóng to mà không mất chất lượng. Chúng cực kỳ phù hợp cho logo, biểu tượng và các yếu tố giao diện khác.
Ví dụ về sử dụng SVG:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sử dụng SVG cho màn hình Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Giải thích mã:
src="images/logo.svg": chỉ định đường dẫn đến tệp SVG, có thể phóng to đến bất kỳ kích thước nào mà không mất chất lượng
6.3 Sử dụng CSS
Đối với hình nền, có thể sử dụng media queries và các thuộc tính CSS để tải các phiên bản hình ảnh khác nhau tùy thuộc vào mật độ pixel của thiết bị.
Ví dụ về sử dụng CSS cho hình nền:
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
Giải thích mã:
.background: xác định hình nền cơ bản@media only screen and (min-resolution: 2dppx): thay thế hình nền bằng phiên bản cho màn hình với mật độ2x@media only screen and (min-resolution: 3dppx): thay thế hình nền bằng phiên bản cho màn hình với mật độ3x
6.4 Phần tử picture
Thẻ <picture> cho phép chỉ định nhiều nguồn hình ảnh với các điều kiện hiển thị khác nhau.
Điều này hữu ích cho các trường hợp phức tạp hơn khi cần thích ứng hình ảnh.
Ví dụ về sử dụng <picture>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sử dụng <picture> cho màn hình Retina</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="Ví dụ hình ảnh cho màn hình Retina">
</picture>
</body>
</html>
Giải thích mã:
<source>: chỉ định các nguồn hình ảnh khác nhau với các điều kiện hiển thị<img>: chỉ định hình ảnh mặc định cho các thiết bị không hỗ trợ<picture>
6.5 Ví dụ về tối ưu hóa hình ảnh
Ví dụ 1: Hình ảnh thích ứng với độ phân giải cao
Tạo ví dụ trong đó hình ảnh được tối ưu hóa cho màn hình mật độ cao bằng cách sử dụng các thuộc tính srcset và sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hình ảnh thích ứng cho màn hình Retina</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Ví dụ hình ảnh cho màn hình Retina">
</body>
</html>
Giải thích mã:
srcset: xác định ba phiên bản của hình ảnh cho các mật độ pixel khác nhau (1x,2x,3x)-
sizes: xác định chiều rộng của hình ảnh cho các điều kiện hiển thị khác nhau:- Đến
600px— hình ảnh chiếm100%chiều rộng của viewport - Đến
1200px— hình ảnh chiếm50%chiều rộng của viewport - Trong các trường hợp khác — hình ảnh chiếm
33%chiều rộng của viewport
- Đến
Ví dụ 2: Sử dụng SVG cho hình ảnh có thể mở rộng
Tạo ví dụ trong đó sử dụng SVG để đảm bảo hiển thị chất lượng trên bất kỳ thiết bị nào:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sử dụng SVG cho màn hình Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Giải thích mã:
src="images/logo.svg": chỉ định đường dẫn đến tệp SVG, có thể phóng to đến bất kỳ kích thước nào mà không mất chất lượng
GO TO FULL VERSION