Hướng dẫn cho người mới bắt đầu về hình ảnh đáp ứng trong HTML
Hình ảnh đáp ứng là hình ảnh thích ứng với các đặc điểm khác nhau của thiết bị. Khi được thực hiện đúng, hình ảnh đáp ứng có thể cải thiện hiệu suất và trải nghiệm người dùng của trang web.
Bài viết này khám phá cách bạn có thể tạo hình ảnh đáp ứng trong HTML bằng cách sử dụng srcset và yếu tố hình ảnh.
Mục Lục
Tại sao bạn nên sử dụng hình ảnh thích ứng?
Khi các kỹ sư phần mềm tạo web, họ không xem xét cách trình duyệt sẽ xử lý các hình ảnh phản hồi. Rốt cuộc, người dùng chỉ truy cập web từ máy tính để bàn hoặc máy tính xách tay. Tất nhiên, điều đó không đúng ngày nay.
Theo Statista, hơn 90% dân số internet toàn cầu truy cập mạng bằng điện thoại di động của họ. Hầu hết các trang web trên internet đều chứa hình ảnh và những hình ảnh này là một trong những số liệu được sử dụng để đo hiệu suất web. Để cải thiện hiệu suất, bạn cần tối ưu hóa hình ảnh của mình bằng cách làm cho chúng phản hồi nhanh.
Cách tạo hình ảnh đáp ứng trong HTML
Bạn có thể tiếp cận hình ảnh đáp ứng từ hai góc độ — bằng cách phân phát cùng một hình ảnh với các kích thước khác nhau hoặc phân phát các hình ảnh khác nhau tùy theo đặc điểm hiển thị. Bạn đã có thể sử dụng
Sử dụng srcset
Chuẩn mực HTML chỉ cho phép bạn chỉ định một tệp hình ảnh. Nếu bạn muốn hiển thị một hình ảnh khác nhau tùy thuộc vào kích thước của thiết bị, thì bạn nên sử dụng srcset.
Cú pháp:
<img srcset="" src="" alt="">srcset cho phép bạn cung cấp các tệp nguồn bổ sung và trình duyệt sẽ chọn hình ảnh có vẻ tối ưu cho kích thước hình ảnh đó.
<img srcset="cute-cat.jpg 480w,
cute-cat.jpg 800w"
src="cute-cat.jpg"
alt="A cute cat">srcset được làm bằng ba phần: Tên tệp hình ảnh chỉ định đường dẫn đến hình ảnh nguồn, khoảng trắng và chiều rộng nội tại hoặc thực của hình ảnh.
Sử dụng srcset Với các kích thước
Vấn đề với việc sử dụng srcset là bạn không có quyền kiểm soát hình ảnh mà trình duyệt sẽ chọn để hiển thị. Kết hợp srcset với kích thước giải quyết vấn đề này. kích thước xác định một tập hợp các điều kiện phương tiện gợi ý hình ảnh với kích thước tối ưu.
Bây giờ bạn có thể viết lại ở trên như sau.
<img srcset="cute-cat.jpg 480w,
cute-cat.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="cute-cat.jpg"
alt="A cute cat">kích thước được tạo thành từ một điều kiện phương tiện, trong ví dụ này, nó (max-width: 600px) đại diện cho chiều rộng khung nhìn, không gian và chiều rộng vùng (480px) chỉ định không gian mà hình ảnh sẽ lấp đầy nếu điều kiện phương tiện là đúng.
Tại đây, trước tiên trình duyệt sẽ kiểm tra chiều rộng thiết bị và so sánh với điều kiện phương tiện. Nếu điều kiện là đúng, nó sẽ kiểm tra chiều rộng vị trí và tải hình ảnh từ srcset có cùng chiều rộng hoặc lớn hơn tiếp theo.
Lưu ý rằng bạn cũng đang bao gồm src cung cấp hình ảnh trở lại trên các trình duyệt không hỗ trợ srcset và kích thước.
srcset cũng cho phép bạn để cung cấp hình ảnh ở các độ phân giải khác nhau bằng cách sử dụng bộ mô tả x.
<img srcset="cute-cat-high.jpg,
cute-cat-high1.jpg 1.5x,
cute-cat-high2.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">Trong ví dụ này, nếu thiết bị có độ phân giải từ hai pixel thiết bị trên mỗi CSS trở lên, trình duyệt sẽ tải hình ảnh cute-cat-high1.jpg.
Điểm ảnh phần cứng và phần mềm
Vấn đề với giải pháp này là hình ảnh chỉ đáp ứng về mật độ điểm ảnh của thiết bị. Đây là tỷ lệ của pixel phần cứng so với pixel của phần mềm hoặc CSS. Pixel phần cứng là điểm sáng thực tế trên màn hình trong khi pixel phần mềm hoặc pixel CSS là một đơn vị đo lường. Mật độ điểm ảnh quyết định độ phân giải của thiết bị.
Khi hiển thị hình ảnh đáp ứng, không chỉ xem xét độ phân giải; kích thước hiển thị cũng rất quan trọng. Nếu không, bạn có thể tải những hình ảnh lớn một cách không cần thiết hoặc những hình ảnh quá thô.
<img srcset="cute-cat-high1-480w.jpg 1.5x,
cute-cat-high2-640w.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">Sử dụng
yếu tố. Trong khi
làm cho hình ảnh đáp ứng bằng cách cung cấp các kích thước khác nhau của cùng một hình ảnh,
Cú pháp:
<picture>
<source media="" srcset="">
<source media="" srcset="">
<img src="" alt="">
</picture>Hãy xem xét một tình huống mà bạn có một hình ảnh phong cảnh lớn. Hình ảnh hiển thị và trông cân đối trên máy tính để bàn, nhưng nó thu nhỏ đáng kể trên thiết bị di động để các thành phần trên hình ảnh trở nên nhỏ bé. Hình ảnh không phản hồi góp phần tạo ra trải nghiệm người dùng không tốt. Với
<picture>
<source media="(max-width: 639px)" srcset="cute-cat-480w.jpg">
<source media="(min-width: 640px)" srcset="cute-cat-640w.jpg">
<img src="elva-640w.jpg" alt="A cute cat">
</picture>Giống như trong cách tiếp cận đầu tiên,
Dự phòng cho Định dạng Hình ảnh WebP
Một điều khác mà
<picture>
<source type="image/webp" srcset="cute-cat.webp">
<img src="cute-cat.jpg" alt="A cute cat.">
</picture>Tại sao tạo hình ảnh đáp ứng trong HTML và không phải trong CSS?
CSS cung cấp các tùy chọn mạnh mẽ để xử lý hình ảnh đáp ứng. Vậy tại sao không sử dụng nó? Trình duyệt tải trước hình ảnh trước khi phân tích cú pháp CSS. Vì vậy, trước khi JavaScript của trang web của bạn phát hiện ra chiều rộng khung nhìn để thực hiện các thay đổi thích hợp cho hình ảnh, thì hình ảnh gốc đã được tải trước. Do đó, tốt hơn là xử lý các hình ảnh đáp ứng bằng HTML.
Hướng đến chất lượng hình ảnh tốt nhất có thể
Bạn đã thấy cách bạn có thể tạo hình ảnh đáp ứng trong HTML bằng cách sử dụng
Đọc tiếp
Thông tin về các Tác giả
