Hướng dẫn resize image javascript w3schools - thay đổi kích thước hình ảnh javascript w3schools

Chương 1 - Hình ảnh phản hồi là gì?

Trong hướng dẫn này, chúng tôi sẽ tìm hiểu mọi thứ liên quan đến hình ảnh phản hồi cùng với mã mẫu. Kiến thức cơ bản về HTML và CSS là cần thiết để hiểu các khái niệm được thảo luận ở đây. Sau khi đọc xong, bạn sẽ biết các công cụ & kỹ thuật mới nhất để thực hiện chính xác các hình ảnh đáp ứng.

Hình ảnh phản hồi là tập hợp các kỹ thuật được sử dụng để tải đúng hình ảnh dựa trên độ phân giải thiết bị, định hướng, kích thước màn hình, kết nối mạng và bố cục trang. Trình duyệt không nên kéo dài hình ảnh để phù hợp với bố cục trang và tải nó không nên dẫn đến lãng phí thời gian & băng thông. Nó cải thiện trải nghiệm người dùng khi hình ảnh tải nhanh và trông sắc nét cho mắt người.

Ví dụ nhanh về các hình ảnh phản hồi trong HTML

Cách tốt nhất để hiểu hình ảnh đáp ứng là với một ví dụ nhanh chóng. Để đơn giản, chúng tôi sẽ tải hình ảnh rộng 2200px trên các thiết bị khác nhau. Mọi thứ khác vẫn giữ nguyên ngoại trừ kích thước chế độ xem.

Đánh dấu sẽ là:

<img srx="image.jpg" />

Đối với máy tính để bàn (IMAC), hình ảnh là tối ưu vì chiều rộng của chế độ xem và hình ảnh khớp.

Tuy nhiên, trong thiết bị di động, như chúng ta có thể thấy, Viewport chỉ rộng 375 pixel CSS. Điều tương tự là hợp lệ cho máy tính bảng. Viewport chỉ rộng 1024 pixel CSS. Chúng tôi đang lãng phí thời gian và băng thông tải xuống tệp quá lớn này.

Điều gì xảy ra?

Đây là một phiên bản đơn giản hóa của hình ảnh đáp ứng trong hành động. 🙌

Chúng tôi đã sử dụng

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Lưu ý rằng chúng tôi vẫn đang sử dụng thuộc tính

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

8 cũ như một dự phòng nếu trình duyệt không hỗ trợ thuộc tính

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

6. Kể từ tháng 10 năm 2020, tất cả các trình duyệt hỗ trợ

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

6 ngoại trừ Opera Mini và IE.

Chương 2 - Tại sao chúng ta cần hình ảnh đáp ứng?

Như bạn đã thấy trong ví dụ trên, một kích thước không phù hợp với tất cả. Một thiết kế đáp ứng nên thích ứng dựa trên kích thước màn hình người dùng, mật độ pixel và định hướng thiết bị để đảm bảo trải nghiệm người dùng tuyệt vời.

Dưới đây là ba lý do chính tại sao chúng ta cần thực hiện các hình ảnh đáp ứng:

• Hiển thị hình ảnh chất lượng cao trên các thiết bị khác nhau
• Đang tải đúng hình ảnh - hướng nghệ thuật
• Tải các trang web nhanh hơn

1. hiển thị hình ảnh chất lượng cao trên các thiết bị khác nhau

Một hình ảnh không có tạo tác có thể cảm nhận được trông sắc nét và đóng góp cho trải nghiệm người dùng tuyệt vời. Điều này đặc biệt quan trọng trên các trang web bán lẻ, nơi người dùng mong đợi xem các hình ảnh sản phẩm có độ phân giải cao để xem xét tốt hơn về kết cấu & chi tiết.

Để một hình ảnh trông đẹp, nó phải thích nghi dựa trên chiều rộng chế độ xem và mật độ pixel màn hình. Hãy để hiểu những điều này:

Trường hợp chiều rộng chế độ xem khác nhau

Nếu bố cục của bạn thay đổi dựa trên chế độ xem thiết bị, kích thước hình ảnh được tải sẽ khớp với chiều rộng CSS/HTML của container. Nếu trình duyệt kéo dài một hình ảnh nhỏ hơn để phù hợp với thiết kế, hình ảnh được hiển thị sẽ trông mờ và nếu bạn tải một hình ảnh lớn hơn trên một thiết bị có chiều rộng chế độ xem nhỏ, nó sẽ dẫn đến sự lãng phí băng thông và thời gian.

Trường hợp mật độ pixel khác nhau

Màn hình có độ phân giải cao có mật độ pixel cao hơn. Điều này có nghĩa là nhiều pixel hơn trong cùng một lượng không gian vật lý. Do đó, độ phân giải cao hiển thị hình ảnh nhu cầu với nhiều pixel hơn. Nói một cách đơn giản, một hình ảnh lớn được yêu cầu để phù hợp với cùng một hình ảnh vật lý.

Hãy xem xét iPhone8:

• Kích thước chế độ xem CSS: 375px bằng 667px
• Mật độ pixel: 2
• Độ phân giải thiết bị hiệu quả: 750px bằng 1334px

Điều đó có nghĩa là nếu chúng ta muốn hiển thị hình ảnh rộng 100 pixel CSS, chúng ta sẽ phải tải một hình ảnh rộng 200px để nó trông sắc nét.

Đối với một thiết bị có mật độ pixel 3, chúng ta sẽ phải tải hình ảnh rộng 300px.

Tuy nhiên, lưu ý rằng điều đó không phải lúc nào cũng có nghĩa là chúng ta phải tải kích thước tệp lớn. Trên một thiết bị, với DPR (tỷ lệ pixel thiết bị) 2, hình ảnh rộng 2x với chất lượng thấp (50) sẽ trông đẹp hơn hình ảnh rộng 1x với chất lượng cao (90). Mặc dù tương tự về kích thước tệp, hình ảnh 2x sẽ cho diện mạo sắc nét hơn. Bạn có thể tìm hiểu thêm về kỹ thuật này.

2. Tải đúng hình ảnh - Hướng nghệ thuật

Khi một hình ảnh lớn được thay đổi kích thước để phù hợp với một khu vực nhỏ, nó có thể mất đi sự liên quan, tính hữu dụng và tính dễ đọc của nó. Phần quan trọng nhất có thể bị cắt.

Ví dụ, hãy xem xét ảnh chụp màn hình này của bảng điều khiển trên trang đích sản phẩm. Nó đang làm nổi bật các yếu tố khác nhau của giao diện người dùng cho người dùng tiềm năng.

Trên máy tính để bàn, hình ảnh trên là hoàn hảo. Tuy nhiên, nếu chúng ta hạ thấp hình ảnh tương tự để phù hợp với chế độ xem di động, chúng ta sẽ mất nhiều yếu tố thiết yếu của trang.

Trong trường hợp này, một hình ảnh hoàn toàn khác nhau có thể phù hợp hơn, ví dụ:

Nó được gọi là định hướng nghệ thuật. Bằng "chỉ đạo nghệ thuật", bạn có thể quyết định rõ ràng hình ảnh nào sẽ được hiển thị dựa trên kích thước của hình ảnh trên trang. Chúng tôi sẽ bao gồm kỹ thuật này một cách chi tiết hơn sớm.art direction. By "art directing", you can explicitly decide which image should be shown based on the image's size on the page. We will cover this technique in more detail soon.

Bạn cũng có thể sử dụng điều này để hiển thị các hình ảnh khác nhau trong thiết bị di động dựa trên định hướng - Chế độ cảnh quan so với chân dung.

3. Các trang web đang tải nhanh hơn

Theo dữ liệu lưu trữ HTTP, trung bình, 64% trọng lượng trang của trang web, được tạo thành từ hình ảnh. Với lưu lượng truy cập di động vượt qua lưu lượng máy tính để bàn, nó thậm chí còn trở nên quan trọng hơn để tối ưu hóa hình ảnh cho các kích thước thiết bị khác nhau.

Lý tưởng nhất, bạn muốn phục vụ các hình ảnh được thay đổi kích thước để phù hợp với kích thước chế độ xem của người dùng. Không có phương tiện để làm điều này, bạn sẽ phải gửi một hình ảnh quá lớn cho tất cả người dùng. Điều này có nghĩa là người dùng trên thiết bị di động có chiều rộng chế độ xem nhỏ phải tải xuống dữ liệu bổ sung đó, làm chậm tải trang. Đây là một sự lãng phí thời gian, băng thông, và tiền và làm suy giảm trải nghiệm người dùng tổng thể.

Chương 3 - Làm thế nào để làm cho hình ảnh đáp ứng?

Có nhiều phương pháp để thực hiện hình ảnh đáp ứng. Chúng tôi đã đi một chặng đường dài từ việc sử dụng các giải pháp dựa trên JavaScript Hacky để có sự hỗ trợ bản địa trong các trình duyệt hiện đại.

Trong chương này, chúng tôi sẽ đề cập đến các phương pháp mới nhất để thực hiện hình ảnh phản hồi.

Hãy để một so sánh nhanh trước khi thảo luận về từng kỹ thuật này một cách chi tiết hơn:

• Srcset
• Srcset với kích thước
• Yếu tố hình ảnh
• Client-hints
• Hình ảnh đáp ứng trong CSS

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

Sử dụng kích thước SRXSET +

Cho hình ảnh linh hoạt. Khi bố cục & kích thước hình ảnh thay đổi dựa trên chiều rộng chế độ xem. Ví dụ, bố cục ba cột trên máy tính để bàn so với bố cục hai cột trên thiết bị di động.

Hơi phức tạp

Sử dụng phần tử hình ảnh

Khi bạn muốn tải một hình ảnh hoàn toàn khác dựa trên kích thước màn hình, tức là hướng nghệ thuật. Hoặc bạn muốn sử dụng các định dạng hình ảnh mới nhất như

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

1. Rất phức tạp.
2. Sử dụng các máy khách
3. Khi bạn không muốn thực hiện những thay đổi lớn trong đánh dấu HTML.
   • Không thay đổi mã chính
   • Hình ảnh đáp ứng trong CSS

Khi bạn đang tải hình ảnh qua các kiểu CSS làm hình ảnh nền.

Chương 4 - SRCSET

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Nếu một mô tả mật độ hiển thị được cung cấp, nó được cho là

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

Bản demo - SRXSET với bộ mô tả mật độ

Hãy cùng xem điều này trong hành động với bản demo trực tiếp-https://imagekitio.github.io/responsive-images-guide/srxset-ondy.html.

Sử dụng Trình giả lập thiết bị trong Chrome, tại DPR 1, dòng hình ảnh là

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

Tương tự, nếu chúng ta xem xét các giá trị DPR khác nhau:

Khi nào nên sử dụng các mô tả mật độ hiển thị

Sử dụng mô tả mật độ hiển thị nếu hình ảnh của bạn có chiều rộng cố định và điều duy nhất thay đổi là mật độ hiển thị. Nó không bao giờ đơn giản mặc dù 😉

Những thách thức trong việc sử dụng bộ mô tả mật độ hiển thị

Theo pixiade.com, có hơn 300 loại điện thoại, máy tính bảng, máy tính xách tay và thiết bị máy tính để bàn với kích thước màn hình và mật độ hiển thị khác nhau.

Câu hỏi quan trọng trở thành, bạn có muốn theo dõi mật độ hiển thị khác nhau có sẵn không, ví dụ: 1x, 1,5x, 2x, 2,5x, 3x 4x, v.v. Phương pháp sẽ không đủ.

Sử dụng mô tả chiều rộng

Cú pháp tương tự như bộ mô tả mật độ hiển thị, nhưng thay vì các giá trị mật độ hiển thị, chúng tôi cung cấp độ rộng thực tế của hình ảnh.

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Điều này cho phép trình duyệt chọn hình ảnh tốt nhất

Sử dụng bộ mô tả chiều rộng cho phép trình duyệt chọn ứng viên tốt nhất từ ​​

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Lưu ý rằng mật độ pixel hiển thị cũng được trình duyệt tính đến trong khi tính toán chiều rộng cần thiết. 😎

Ví dụ: giả sử một hình ảnh chiếm toàn bộ chiều rộng chế độ xem - trên màn hình rộng 300px với DPR 2, trình duyệt sẽ chọn

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

Bản demo - SRXSET với bộ mô tả chiều rộng

Hãy xem điều này trong hành động với bản demo trực tiếp-https://imagekitio.github.io/responsive-images-guide/srxset-width.html.

Sử dụng trình giả lập thiết bị, hãy để thay đổi kích thước màn hình thành 250px và đặt DPR ở 1. Hình ảnh được tải trong trường hợp này là

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

Tương tự, nếu chúng ta xem xét các kết hợp với các giá trị chiều rộng khung nhìn và DPR khác nhau:

Khi nào nên sử dụng các mô tả mật độ hiển thị

Sử dụng mô tả mật độ hiển thị nếu hình ảnh của bạn có chiều rộng cố định và điều duy nhất thay đổi là mật độ hiển thị. Nó không bao giờ đơn giản mặc dù 😉

Những thách thức trong việc sử dụng bộ mô tả mật độ hiển thị

Theo pixiade.com, có hơn 300 loại điện thoại, máy tính bảng, máy tính xách tay và thiết bị máy tính để bàn với kích thước màn hình và mật độ hiển thị khác nhau.

• Câu hỏi quan trọng trở thành, bạn có muốn theo dõi mật độ hiển thị khác nhau có sẵn không, ví dụ: 1x, 1,5x, 2x, 2,5x, 3x 4x, v.v. Phương pháp sẽ không đủ.
• Sử dụng mô tả chiều rộng

Cú pháp tương tự như bộ mô tả mật độ hiển thị, nhưng thay vì các giá trị mật độ hiển thị, chúng tôi cung cấp độ rộng thực tế của hình ảnh.

Điều này cho phép trình duyệt chọn hình ảnh tốt nhất

Sử dụng bộ mô tả chiều rộng cho phép trình duyệt chọn ứng viên tốt nhất từ ​​

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Lưu ý rằng mật độ pixel hiển thị cũng được trình duyệt tính đến trong khi tính toán chiều rộng cần thiết. 😎

Ví dụ: giả sử một hình ảnh chiếm toàn bộ chiều rộng chế độ xem - trên màn hình rộng 300px với DPR 2, trình duyệt sẽ chọn

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

• Bản demo - SRXSET với bộ mô tả chiều rộng
• Hãy xem điều này trong hành động với bản demo trực tiếp-https://imagekitio.github.io/responsive-images-guide/srxset-width.html.
• Nếu nó xuất hiện một thẻ

  <img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
       srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
       sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

  2 (một thuộc tính không có

  <img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
       srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
       sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

  4 hoặc

  <img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
       srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
       sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

  5) chỉ vào URL bên ngoài, nó sẽ tạm dừng phân tích cú pháp HTML và tải xuống đầu tiên và thực thi tài nguyên JavaScript đó.
• Nếu nó xuất hiện một thẻ

  <script srx="vendor.js">script>
  <script srx="app.js">script>
  <script srx="zoom.js">script>
  <img srx="image1.png">
  <img srx="image2.jpg">

  3, nó bắt đầu tải xuống tài nguyên hình ảnh song song và tiếp tục phân tích cú pháp HTML.
• Khi tất cả chặn các bảng kiểu bên ngoài và JavaScript được tải xuống, phân tích cú pháp và thực hiện, trang được hiển thị.

Ví dụ: nếu chúng ta có HTML như thế này:

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

- Trình duyệt tải tài nguyên như thế này:

Tạm dừng trình phân tích cú pháp bất cứ khi nào một tập lệnh gặp phải kết quả trong việc sử dụng dưới mức tối ưu của trình duyệt Khả năng của Trình duyệt để tải xuống nhiều tài nguyên bên ngoài qua mạng song song. Phương pháp này đang trì hoãn việc tải xuống các tài nguyên cần thiết để hiển thị trang.

Người tải trước hoặc phân tích cú pháp đầu cơ để giải cứu - cách mới

Internet Explorer, WebKit và Mozilla đều triển khai các trình tải trước vào năm 2008 để cải thiện vấn đề sử dụng mạng thấp mà chúng tôi vừa thảo luận.

Về cơ bản, ý tưởng là trình duyệt không thể xây dựng DOM trong khi thực hiện tập lệnh nhưng vẫn có thể phân tích phần còn lại của đánh dấu tìm kiếm các tài nguyên khác, ví dụ, bảng kiểu, tệp javascript hoặc hình ảnh được liên kết. Các tệp này được thêm vào một danh sách và bắt đầu tải xuống trong nền. Vào thời điểm đó, tất cả các tập lệnh thực thi và kết thúc phân tích cú pháp HTML, hy vọng, trình duyệt đã tải xuống các tài nguyên này và đã giành được sự chậm trễ nữa.

Biểu đồ thác nước cho ví dụ trên bây giờ trông như thế này:

Bây giờ chúng tôi hiểu tại sao

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

Chương 5 - SRCSET với kích thước

Thuộc tính

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

Sử dụng thuộc tính

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

Tại sao chúng ta cần kích thước? Nếu bạn cuộn trực tiếp ở đây và tự hỏi tại sao trình duyệt không biết hình ảnh sẽ hiển thị lớn như thế nào, hãy kiểm tra cách trình duyệt tải một trang web. If you scrolled here directly and wondering why the browser is not aware of how big the image will render, checkout how the browser loads a web page.

Cú pháp:

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

Mỗi mục được phân tách bằng dấu phẩy trong

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

1. Ví dụ, điều kiện phương tiện truyền thông

   sizes="(min-width 1024px) 33vw, 95vw)"

   4 - nó mô tả một trạng thái có thể rằng màn hình có thể ở. Nó tương tự như các truy vấn truyền thông nhưng với một số hạn chế. Bạn không thể sử dụng

   sizes="(min-width 1024px) 33vw, 95vw)"

   6 hoặc

   sizes="(min-width 1024px) 33vw, 95vw)"

   7.
2. Một không gian trống.
3. Chiều rộng của phần tử hình ảnh khi điều kiện phương tiện là đúng. Bạn có thể cung cấp một độ dài tuyệt đối (PX, EM) hoặc độ dài so với chế độ xem (VW), nhưng không phải là tỷ lệ phần trăm.

Bản demo - SRXSET với kích thước

Hãy cùng xem điều này trong hành động với bản demo trực tiếp-https://imagekitio.github.io/responsive-images-guide/srxset-zes.html

Bố cục là như vậy:

• Nếu chiều rộng chế độ xem trên 900px, mỗi hình ảnh có chiều rộng sửa chữa 225px.
• Lên đến 900px, mỗi hình ảnh chiếm 33VW, tức là chiều rộng 33% của tổng chiều rộng chế độ xem.
• Lên đến 700px, mỗi hình ảnh chiếm 50VW, tức là chiều rộng 50% của tổng chiều rộng chế độ xem.
• Lên đến 400px, mỗi hình ảnh chiếm 100VW, tức là toàn bộ chiều rộng chế độ xem.

Đánh dấu HTML của một phần tử hình ảnh trông giống như thế này:

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

Hãy để xem những gì xảy ra ở các giá trị DPR và kích thước màn hình khác nhau -

225 × 1 = 225px

https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=W-225

• 225 × 2 = 450px
• Ứng cử viên gần nhất là https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=W-350

Trước khi bạn cung cấp các nguồn hình ảnh khác nhau trong

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Đây là một cách tiếp cận đơn giản cho vấn đề này.

Trong khi tính toán kích thước, hãy suy nghĩ về chiều rộng hình ảnh so với chế độ xem. Ví dụ: Bố cục của tôi là hình ảnh của tôi sẽ là khoảng x phần trăm của chế độ xem nếu kích thước màn hình ở trên y px.

Hãy để hiểu điều này với một vài ví dụ.

sizes="(min-width 1024px) 33vw, 95vw)"

Nó có nghĩa là - hình ảnh nằm trong bố cục ba cột trên màn hình lớn hơn 1024px. Nếu không, nó gần với chiều rộng chế độ xem đầy đủ để lại một số khoảng trống xung quanh nó.

Bây giờ, hãy để Lừa chọn

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px"

Nó có nghĩa là -

• Nếu chiều rộng chế độ xem lên đến 400px, mỗi hình ảnh chiếm 100VW, tức là toàn bộ chiều rộng chế độ xem.
• Lên đến 700px, mỗi hình ảnh chiếm 50VW, tức là chiều rộng 50% của tổng chiều rộng chế độ xem.
• Lên đến 900px, mỗi hình ảnh chiếm 33VW, tức là chiều rộng 33% của tổng chiều rộng chế độ xem.
• Trên 900px, mỗi hình ảnh có chiều rộng sửa chữa 225px.

Xác định chiều rộng hình ảnh so với chế độ xem không phải lúc nào cũng cung cấp hình ảnh tối ưu nhất khi xem xét nhiều thiết bị và các giá trị DPR Width & DPR tương ứng. Tuy nhiên, nó là một giải pháp thực tế.

Khi chúng ta biết giá trị của

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px"

sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px"

sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px"

sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px"

sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px"

Nếu bạn sắp xếp các kích thước hiệu quả, đây là những gì bạn sẽ nhận được -

sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px"

srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"

srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"

srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"

srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"

srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"

srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"

srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"

srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

Nếu bạn đang sử dụng hình ảnh CDN như ImageKit.io, thật dễ dàng để cung cấp hình ảnh theo chiều khác nhau bằng các tham số URL Addign, ví dụ:

• sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px"

  2 Hình ảnh rộng-https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=W-225

• srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
          https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
          https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
          https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"
  

  2 Hình ảnh rộng-https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=W-300

• srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
          https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
          https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
          https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"
  

  6 Hình ảnh rộng-https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=W-600

Tuy nhiên, bạn không phải cung cấp hình ảnh ở tất cả các kích thước cần thiết trong

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

• Bạn không cần phải tạo và lưu trữ nhiều biến thể của cùng một hình ảnh.
• Nếu bạn đang sử dụng CDN để phân phối và lưu trữ nhanh hơn, thì có một vài biến thể sẽ cải thiện tỷ lệ hit bộ đệm của bạn vì yêu cầu lặp lại sẽ tăng lên.

Vì vậy, bạn có thể chọn ba hoặc bốn ứng cử viên và viết

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
        https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"

Mẹo để chọn điểm dừng trong khi viết srxset

• Bạn có thể xem báo cáo thiết bị Google Analytics của mình để xem những độ phân giải màn hình nào bạn nên quan tâm nhất. Theo đó, bạn sẽ biết bố cục nào cần tối ưu hóa nhất. Ví dụ: giả sử rằng 60% người dùng trên trang web của bạn thấy bố cục ba cột và 20% thấy một bố cục cột duy nhất. Sau đó, bạn có thể xem xét tất cả các biến thể kích thước bạn cần cho hai bố cục này ở nhiều giá trị DPR và viết

  <img srx="image.jpg" 
       srxset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
  />

  6.
• Để tăng tỷ lệ hit bộ đệm trên CDN, hãy thử và cung cấp

  <img srx="image.jpg" 
       srxset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
  />

  6 cho tất cả các điểm dừng và kích thước có thể. CDN không thể lưu trữ tất cả các tài nguyên của bạn. Một số tài nguyên phải đuổi để tạo không gian cho người khác. Điều này sẽ gây ra nhiều tắc nghẽn hiệu suất hơn lợi nhuận.
• Khi nghi ngờ - Đầu tiên hãy nghĩ về bố cục của bạn, tức là CSS, sau đó viết

  <img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
       srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
       sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

  8 và cuối cùng chọn các điểm dừng cho

  <img srx="image.jpg" 
       srxset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
  />

  6 xem xét các giá trị DPR khác nhau và kích thước hình ảnh hiệu quả mà bạn cần.

Chương 6 - Sử dụng phần tử hình ảnh

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

<img srx="image.jpg" />

Khi nào nên sử dụng phần tử hình ảnh

Yếu tố hình ảnh nên được sử dụng để đạt được:

• Định hướng nghệ thuật
• Hỗ trợ định dạng khác nhau
• Ví dụ chủ đề màu sắc

Cú pháp:

<img srx="image.jpg" />

Phần tử

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

Mỗi

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

Thuộc tính phương tiện

Thuộc tính

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

Ví dụ - tải khác nhau dựa trên kích thước màn hình

<img srx="image.jpg" />

Trình duyệt sẽ chọn một trong các phần tử nguồn dựa trên điều kiện

<img srx="image.jpg" />

Thuộc tính SRCSET

Thuộc tính

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Mỗi mục được phân tách bằng dấu phẩy trong

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

1. URL hình ảnh, ví dụ:

   <script srx="vendor.js">script>
   <script srx="app.js">script>
   <script srx="zoom.js">script>
   <img srx="image1.png">
   <img srx="image2.jpg">

   6 hoặc đường dẫn tương đối

   <script srx="vendor.js">script>
   <script srx="app.js">script>
   <script srx="zoom.js">script>
   <img srx="image1.png">
   <img srx="image2.jpg">

   7
2. Một không gian trống
3. Chiều rộng thực của hình ảnh:
   • Hoặc sử dụng mô tả mật độ hiển thị, ví dụ:

     <script srx="vendor.js">script>
     <script srx="app.js">script>
     <script srx="zoom.js">script>
     <img srx="image1.png">
     <img srx="image2.jpg">

     8,

     <script srx="vendor.js">script>
     <script srx="app.js">script>
     <script srx="zoom.js">script>
     <img srx="image1.png">
     <img srx="image2.jpg">

     9, v.v.
   • Hoặc, sử dụng mô tả chiều rộng, ví dụ:

     <img srx="image.jpg" 
          srxset="small.jpg 300w,
                  medium.jpg 600w,
                  large.jpg 900w"
          sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
     />

     0. Đây là chiều rộng của hình ảnh trong pixel.

Ví dụ - tải khác nhau dựa trên tỷ lệ pixel của thiết bị

<img srx="image.jpg" />

Loại thuộc tính

Thuộc tính

<img srx="image.jpg" />

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="image.jpg" />

Ví dụ - Tải định dạng hình ảnh khác nhau dựa trên hỗ trợ trình duyệt

<img srx="image.jpg" />

Bản demo trực tiếp sử dụng phần tử hình ảnh

Hãy cùng xem điều này trong hành động với bản demo trực tiếp-https://imagekitio.github.io/responsive-images-guide/picture.html

Có hai yếu tố

<img srx="image.jpg" />

• Ví dụ đầu tiên chứa ảnh chụp màn hình của Thư viện Media ImageKit để hiển thị các yếu tố giao diện người dùng khác nhau. Giao diện thay đổi dựa trên kích thước màn hình. Vì vậy, để mô tả giống nhau, chúng tôi đang tải một ảnh chụp màn hình khác nhau dựa trên kích thước màn hình. Đối với kích thước màn hình lớn hơn hoặc bằng

  srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
          https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
          https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-700 700w,
          https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-900 900w"
  

  9, bạn sẽ thấy phiên bản máy tính để bàn của giao diện người dùng, tức là https://ik.imgkit.net/ikmedia/dashboard.png. Nếu không, bạn sẽ thấy một phiên bản thân thiện với thiết bị di động, tức là https://ik.imgkit.net/ikmedia/dashboard-mobile.png.
• Ví dụ thứ hai cho thấy việc tải hình ảnh định dạng trang web nếu trình duyệt có hỗ trợ cho nó. Nếu không, một hình ảnh JPG được tải.

Tải hình ảnh khác nhau ở chế độ tối so với chế độ ánh sáng

Chế độ tối cho phép bạn thay đổi màu nền của cửa sổ ứng dụng thành màu đen. Là nhà phát triển web, bạn có thể chọn tải một hình ảnh khác nếu người dùng đã bật chế độ tối.

<img srx="image.jpg" />

Trình duyệt sẽ đánh giá điều kiện phương tiện

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

Dưới đây là cách nó trông, chuyển đổi cài đặt chế độ tối và làm mới trang để xem trình duyệt tải một hình ảnh khác như thế nào.

Bản demo trực tiếp-https://imagekitio.github.io/responsive-images-guide/dark-vs-light-mode.html

Chương 7 - Sử dụng gợi ý của khách hàng

Gợi ý của khách hàng là gì?

Như tên cho thấy, gợi ý của máy khách là những gợi ý được cung cấp bởi thiết bị máy khách cho máy chủ cùng với chính yêu cầu. Những gợi ý này cho phép máy chủ thực hiện một yêu cầu cụ thể với tài nguyên tối ưu nhất. Sau này được gọi là đàm phán nội dung.

Gợi ý của khách hàng cung cấp thông tin này thông qua các tiêu đề yêu cầu HTTP. Ví dụ -

Làm thế nào để kích hoạt gợi ý của khách hàng?

Không phải mọi yêu cầu đều có các tiêu đề HTTP này. Bạn sẽ phải nói rõ ràng cho trình duyệt bao gồm các gợi ý của máy khách này bằng thẻ

<img srx="image.jpg" />

<img srx="image.jpg" />

Điều này cho phép trình duyệt gửi giá trị

<img srx="image.jpg" />

<img srx="image.jpg" />

Thật tuyệt. Nhưng tại sao chúng ta cần gợi ý của khách hàng trong việc thực hiện các hình ảnh phản hồi khi chúng ta đã có

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="image.jpg" />

Tại sao chúng ta cần gợi ý của khách hàng?

Để hiểu được nhu cầu về gợi ý của khách hàng, hãy xem xét kỹ hơn những gì chúng ta đã học được cho đến nay -

• <img srx="image.jpg" 
       srxset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
  />

  6 và

  <img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
       srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
               https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
       sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

  8 để xác định các URL của các biến thể hình ảnh khác nhau và chỉ định kích thước hình ảnh được hiển thị để trình duyệt có thể tải xuống hình ảnh phù hợp nhất dựa trên kích thước của chế độ xem.
• Phần tử

  
  <img srx="image.jpg" />

  48 để dành cách trình duyệt nên tải một hình ảnh khác nhau hoặc hoàn toàn khác, phù hợp hơn cho một màn hình nhỏ hơn.

Mặc dù

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="image.jpg" />

Tất cả các phương thức trên yêu cầu bạn sửa đổi đánh dấu để với tư cách là nhà phát triển web, bạn có thể chuyển phần thông tin còn thiếu thiết yếu mà trình duyệt cần trong thời gian chạy để có thể tải xuống đúng hình ảnh. Chà, các máy khách cũng làm như vậy nhưng không có sự đánh dấu phức tạp-chúng cung cấp liên kết bị thiếu giữa trình duyệt và máy chủ khi nói đến thông tin bố cục và khả năng thiết bị.

Hãy để hiểu với một ví dụ

Giả sử bạn có một trường hợp sử dụng chuyển đổi độ phân giải đơn giản trong đó bạn muốn tải một biến thể kích thước khác của cùng một hình ảnh dựa trên chiều rộng chế độ xem. Cú pháp sẽ là -

<img srx="image.jpg" />

Tuy nhiên, nếu bạn muốn tải một hình ảnh trang web trong trình duyệt được hỗ trợ, cú pháp của bạn sẽ trở thành -

<img srx="image.jpg" />

Đúng! Nó nhanh chóng trở nên phức tạp.

Nếu chúng ta sử dụng gợi ý của khách hàng, cú pháp trên có thể được giảm xuống

<img srx="image.jpg" />

Khá tuyệt vời, đúng! Không

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Chúng tôi sẽ thảo luận chi tiết về cách điều này là có thể, nhưng điểm mấu chốt là - khi có thể, bạn nên nhằm mục đích tập trung thay đổi kích thước hình ảnh & xử lý và tự động hóa càng nhiều càng tốt. Đây chính xác là những gì khách hàng tin. ImageKit hỗ trợ khách hàng gợi ý ra khỏi hộp.

Gợi ý của khách hàng cho hình ảnh phản hồi

Trong số những người khác, một trong những cách sử dụng chính của các gợi ý của khách hàng là gửi thông tin về kích thước cần thiết của hình ảnh trong bố cục trang hiện tại. Điều này đơn giản hóa việc đánh dấu và tự động hóa nhiều thông tin chuyển từ trình duyệt đến máy chủ web khi thực hiện các hình ảnh đáp ứng.

Hãy để Lừa đặt điều đó trong quan điểm bằng cách xem xét kỹ hơn những gì tất cả thông tin mà trình duyệt cần trong thời gian chạy để có thể tải một hình ảnh thích hợp -

• Chiều rộng chế độ xem.
• Hình ảnh sẽ lớn như thế nào? Nó phụ thuộc vào bố cục của bạn, có thể thích nghi dựa trên chiều rộng của chế độ xem.
• Tỷ lệ pixel thiết bị, tức là

  <img srx="image.jpg" 
       srxset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
       sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
  />

  2,

  <script srx="vendor.js">script>
  <script srx="app.js">script>
  <script srx="zoom.js">script>
  <img srx="image1.png">
  <img srx="image2.jpg">

  9,

  
  <img srx="image.jpg" />

  57 hoặc

  
  <img srx="image.jpg" />

  58.
• URL của tài nguyên hình ảnh cho các kích thước khác nhau.

Bạn có thể chọn tham gia vào các gợi ý của máy khách sau đây, sẽ được gửi dưới dạng tiêu đề yêu cầu cùng với yêu cầu HTTP -

• 
  <img srx="image.jpg" />

  59 - Kích thước cuối cùng của hình ảnh cần thiết trong bố cục trang xem xét tỷ lệ pixel thiết bị

• 
  <img srx="image.jpg" />

  45 - Tỷ lệ pixel thiết bị

• 
  <img srx="image.jpg" />

  46 - Chiều rộng chế độ xem trong các pixel CSS.

• 
  <img srx="image.jpg" />

  62 - Tiêu đề này luôn được gửi với mọi yêu cầu theo mặc định.

• 
  <img srx="image.jpg" />

  63 -

  
  <img srx="image.jpg" />

  64 hoặc

  
  <img srx="image.jpg" />

  65 để chỉ ra sở thích của người dùng để nhận ít dữ liệu hơn.

• 
  <img srx="image.jpg" />

  66 - Loại kết nối hiệu quả, ví dụ: ** ________ 167,

  
  <img srx="image.jpg" />

  68,

  
  <img srx="image.jpg" />

  69 và

  
  <img srx="image.jpg" />

  70.

• 
  <img srx="image.jpg" />

  71 - Thời gian chuyến đi khứ hồi, tính bằng mili giây, trên lớp ứng dụng.

• 
  <img srx="image.jpg" />

  72 - Tốc độ hạ nguồn gần đúng của kết nối người dùng trong megabits mỗi giây (Mbps).

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

Máy chủ có thể sử dụng các gợi ý mạng như

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

Bề rộng

Nó cung cấp kích thước cuối cùng của hình ảnh được yêu cầu theo bố cục trang sau khi bao thanh toán theo tỷ lệ pixel của thiết bị.

<img srx="image.jpg" />

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

<img srx="image.jpg" />

Đây là gợi ý khách hàng hữu ích nhất liên quan đến việc thực hiện hình ảnh phản hồi.

Ví dụ: Hãy nói rằng một trang có phần tử

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

<img srx="image.jpg" />

<img srx="image.jpg" />

Bây giờ trình duyệt có 300 và nhân nó với tỷ lệ pixel của thiết bị. Giả sử tỷ lệ pixel của thiết bị (DPR) là 2, trình duyệt đặt

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Điều này cho phép máy chủ phản hồi với một hình ảnh, là tối ưu cho thiết bị này và bố cục hiện tại của trang.

DPR

Gợi ý này cung cấp tỷ lệ pixel thiết bị. Nó tương đương với

<img srx="image.jpg" />

Ví dụ - khi được chọn vào

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Giả sử, tỷ lệ pixel thiết bị là 2, trình duyệt sẽ đặt gợi ý

<img srx="image.jpg" />

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Bạn có thể sử dụng tiêu đề này trên máy chủ để gửi đúng biến thể hình ảnh, ví dụ:

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

<script srx="vendor.js">script>
<script srx="app.js">script>
<script srx="zoom.js">script>
<img srx="image1.png">
<img srx="image2.jpg">

<img srx="image.jpg" />

Viewport-Width

Gợi ý này cung cấp chiều rộng chế độ xem trong các pixel CSS. Nó tương đương với

<img srx="image.jpg" />

Bạn có thể sử dụng gợi ý này ở phía máy chủ để trả lời với một hình ảnh phù hợp với kích thước màn hình cụ thể. Điều này rất hữu ích cho việc thực hiện một trường hợp sử dụng định hướng nghệ thuật.

Ví dụ - khi được chọn vào

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Giả sử, tỷ lệ pixel thiết bị là 2, trình duyệt sẽ đặt gợi ý

<img srx="image.jpg" />

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Bạn có thể sử dụng tiêu đề này trên máy chủ để gửi đúng biến thể hình ảnh, ví dụ: 2, 9 hoặc 57 dựa trên tỷ lệ pixel thiết bị thực tế.

Gợi ý này cung cấp chiều rộng chế độ xem trong các pixel CSS. Nó tương đương với

<img srx="image.jpg" />

Trường hợp sử dụng ví dụ bao gồm phục vụ hình ảnh ở định dạng trang web hoặc AVIF khi trình duyệt tuyên bố hỗ trợ cho nó trong tiêu đề

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Nếu bạn đang sử dụng ImageKit, thì nó sẽ tự động chuyển đổi định dạng hình ảnh dựa trên giá trị tiêu đề chấp nhận.

Save-Data

Gợi ý này cho thấy ưu tiên của khách hàng đối với việc sử dụng dữ liệu giảm. Khi giá trị là

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

Các trình duyệt di động như Chrome Mobile và Opera Mobile cho phép người dùng kích hoạt chế độ tiết kiệm dữ liệu. Với chế độ này được bật, các trình duyệt gửi tiêu đề

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

Ví dụ: hình ảnh phù hợp nhỏ hơn gần 33% khi được truy cập bởi máy khách có kích hoạt dữ liệu lưu. Bạn có thể kiểm tra điều này trên máy tính để bàn Chrome bằng cách cài đặt tiện ích mở rộng này.

ImageKit hỗ trợ chế độ lưu dữ liệu lưu và khi được bật, nó sẽ cung cấp hình ảnh chất lượng thấp để giảm truyền dữ liệu.

ECT, RTT và đường xuống

Bên cạnh gợi ý

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" />

• 
  <img srx="image.jpg" />

  66 - Loại kết nối hiệu quả, ví dụ: ** ________ 167,

  
  <img srx="image.jpg" />

  68,

  
  <img srx="image.jpg" />

  69 và

  
  <img srx="image.jpg" />

  70.

• 
  <img srx="image.jpg" />

  71 - Thời gian chuyến đi khứ hồi, tính bằng mili giây, trên lớp ứng dụng.

• 
  <img srx="image.jpg" />

  72 - Tốc độ hạ nguồn gần đúng của kết nối người dùng trong megabits mỗi giây (Mbps).

Jeremy Wagner đã viết trong các nguyên tắc cơ bản của Google Web -

Hiệu suất thích ứng là ý tưởng rằng chúng tôi có thể điều chỉnh cách chúng tôi cung cấp tài nguyên dựa trên các gợi ý của khách hàng thông tin có sẵn cho chúng tôi; Cụ thể, thông tin xung quanh trạng thái hiện tại của kết nối mạng của người dùng.

Thời gian là chìa khóa-mất mãi mãi để tải một hình ảnh chất lượng cao trên mạng chậm sẽ gây khó chịu cho người dùng của bạn hơn là hiển thị một biến thể chất lượng thấp tải nhanh. Bạn có thể sử dụng các gợi ý của máy khách mạng này để tính toán số lượng chất lượng kết nối mạng của máy khách và theo đó thay đổi logic của bạn trên máy chủ để giúp người dùng trên mạng chậm có kinh nghiệm tốt. — Taking forever to load a high-quality image on a slow network is more frustrating for your users than showing a low-quality variant that loads quickly. You can use these network client hints to calculate a score of client’s network connection quality and accordingly change your logic on server to help users on the slow network have decent experience.

Giới hạn gợi ý của khách hàng

Gợi ý khách hàng trông khá tuyệt vời. Họ tự động hóa hình ảnh phản hồi mà không thay đổi đánh dấu lớn. Nhưng có một số hạn chế với gợi ý của khách hàng -

Gợi ý của khách hàng don don làm việc trong tất cả các trình duyệt

Hiện tại, chúng chỉ được hỗ trợ trong các trình duyệt dựa trên Chrome và Chromium, Edge và Opera.

Gợi ý máy khách có nguồn gốc từ chéo đã bị xóa trong Chrome 67 trong phiên bản máy tính để bàn

Sau khi các gợi ý của khách hàng hạ cánh ở Chrome 35, đã có những lo ngại về việc theo dõi người dùng trên nhiều trang web vì thông tin liên quan đến thiết bị được truyền qua gợi ý của khách hàng.

Về cơ bản, gửi dữ liệu chi tiết cao, chẳng hạn như chiều rộng hình ảnh và chế độ xem, có thể giúp xác định người dùng qua nhiều yêu cầu. Quan trọng hơn, không có cơ chế để kiểm soát nguồn gốc nào sẽ nhận được điều này. Thời điểm bạn chọn tham gia vào các gợi ý của khách hàng, tất cả các yêu cầu loại tài nguyên hình ảnh sẽ bắt đầu chia sẻ dữ liệu dành riêng cho thiết bị với nguồn gốc.

Nếu trang web của bạn được lưu trữ trên

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Do đó, nhóm Chrome đã loại bỏ các gợi ý của khách hàng có nguồn gốc chéo trong phiên bản máy tính để bàn của Chrome 67, nhưng họ vẫn hoạt động trong thiết bị di động. Những hạn chế này sẽ được xóa sớm khi công việc trên chính sách tính năng hoàn tất.

Máy chủ của bạn sẽ hỗ trợ các gợi ý của khách hàng

Để khách hàng gợi ý hoạt động, máy chủ của bạn nên hiểu chúng và trả lời bằng một hình ảnh phù hợp.

Ví dụ, các máy chủ sẽ có thể -

• Cung cấp hình ảnh kích thước phù hợp dựa trên giá trị của gợi ý của máy khách

  
  <img srx="image.jpg" />

  59.
• Phục vụ hình ảnh ở định dạng trang web hoặc AVIF dựa trên giá trị của gợi ý ứng dụng khách

  
  <img srx="image.jpg" />

  62.
• Chọn biến thể hình ảnh phù hợp dựa trên giá trị của gợi ý ứng dụng khách

  
  <img srx="image.jpg" />

  45.

May mắn thay, bạn có thể tự động hóa tất cả điều này bằng cách sử dụng hình ảnh CDN như ImageKit.io, hỗ trợ cho khách hàng gợi ý ra khỏi hộp.

Bộ nhớ đệm trên CDN có thể khó khăn

Bạn sẽ muốn lưu trữ các tài nguyên tĩnh của mình như hình ảnh để tăng tốc tải xuống và giảm tải trên máy chủ gốc của bạn. Nhưng với gợi ý của khách hàng trong hỗn hợp, nó có thể là khó khăn.

Thông thường, CDN tìm kiếm các đối tượng trong bộ đệm dựa trên URL tài nguyên. Tuy nhiên, khi máy chủ thay đổi phản hồi dựa trên các tiêu đề HTTP yêu cầu khác, tức là các gợi ý của máy khách, CDN phải nhận thức được cách trả lời các yêu cầu trong tương lai. Về cơ bản, nếu chúng tôi đang thay đổi phản hồi dựa trên giá trị tiêu đề yêu cầu

<img srx="image.jpg" />

<img srx="image.jpg" />

Bạn có thể sử dụng tiêu đề phản hồi

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Điều này có nghĩa là CDN và các proxy trung gian sẽ lấy giá trị của tiêu đề yêu cầu

<img srx="image.jpg" />

<img srx="image.jpg" />

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Điều quan trọng cần lưu ý là bạn không nên đặt

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Một hình ảnh CDN như ImageKit.io đã chăm sóc bộ nhớ đệm CDN trong khi đảm bảo tỷ lệ hit bộ đệm cao.

Chương 8 - Hình ảnh đáp ứng trong CSS

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" />

Chúng tôi có các trường hợp sử dụng sau đây để che đậy:

• Hướng nghệ thuật, tức là tải hình ảnh hoàn toàn khác nhau dựa trên chiều rộng màn hình. Trong HTML, chúng tôi đã sử dụng phần tử

  
  <img srx="image.jpg" />

  48. Trong CSS, chúng ta có thể sử dụng các truy vấn truyền thông thời trang cũ.
• Cung cấp các biến thể hình ảnh độ phân giải cao để cho trình duyệt đưa ra lựa chọn. Trong thuộc tính HTML

  <img srx="image.jpg" 
       srxset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
  />

  6 cung cấp cho trình duyệt các biến thể

  <img srx="image.jpg" 
       srxset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
       sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
  />

  2,

  <script srx="vendor.js">script>
  <script srx="app.js">script>
  <script srx="zoom.js">script>
  <img srx="image1.png">
  <img srx="image2.jpg">

  9 và

  
  <img srx="image.jpg" />

  57 của cùng một hình ảnh. Trong CSS, chúng tôi có tùy chọn sử dụng

  <img srx="image.jpg" 
       srxset="image.jpg,
               image_2x.jpg 2x"
  />

  41.

Chỉ riêng trong truy vấn phương tiện CSS là đủ để thực hiện các hình ảnh đáp ứng. Tuy nhiên,

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

41 tương tự như

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

6 vì nó cung cấp các tùy chọn và cho phép trình duyệt chọn hình ảnh. Nhưng nó không tương đương với srxset.

Hướng nghệ thuật trong CSS - Tải một hình ảnh hoàn toàn khác dựa trên kích thước màn hình

Trong HTML, chúng ta có phần tử

<img srx="image.jpg" />

<img srx="image.jpg" />

Trong CSS, chúng tôi có các truy vấn truyền thông.

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Trong ví dụ này, trên màn hình nhỏ

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Tải hình ảnh độ phân giải cao dựa trên tỷ lệ pixel của thiết bị

Trong HTML chúng ta có

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Trong CSS, chúng ta có thể sử dụng các truy vấn

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

1. Sử dụng

   <img srx="image.jpg" 
        srxset="image.jpg,
                image_2x.jpg 2x"
   />

   41 để cung cấp các biến thể hình ảnh độ phân giải cao

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Nếu

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

1. Sử dụng các truy vấn truyền thông

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Chương 9 - Hình ảnh đáp ứng tải lười biếng

Hình ảnh tải lười biếng là gì?

Như Rahul Nanwani đã viết trong Hướng dẫn tải hình ảnh lười biếng -

Hình ảnh tải lười biếng là một tập hợp các kỹ thuật trong phát triển ứng dụng và web, trì hoãn việc tải hình ảnh trên một trang đến một thời điểm sau - khi những hình ảnh đó thực sự cần thiết, thay vì tải chúng trả trước. Những kỹ thuật này giúp cải thiện hiệu suất, sử dụng tốt hơn các tài nguyên của thiết bị và giảm chi phí liên quan.

Thông thường, để thực hiện tải lười biếng trong HTML, thay vì các thuộc tính

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Hai thư viện tải lười rất phổ biến và vani-lazyload hỗ trợ hình ảnh đáp ứng ra khỏi hộp. Trong hướng dẫn này, chúng tôi sẽ chia sẻ một vài ví dụ về Lazysizes.

Tải hình ảnh phản hồi lười biếng trong srxset và kích thước

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Sử dụng trình giữ chỗ chất lượng thấp trong tải lười biếng

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Hình ảnh tải lười biếng trong phần tử hình ảnh

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Chương 10 - Làm thế nào để xác minh thực hiện hình ảnh đáp ứng?

Sau khi bạn thực hiện các hình ảnh đáp ứng, điều cần thiết là xác minh rằng hình ảnh phù hợp đang được tải trên các thiết bị khác nhau. Hãy để thảo luận về cách các công cụ và bảng điều khiển phát triển của trình duyệt có thể giúp chúng ta.

Sử dụng Trình phân tích trang web ImageKit

Trình phân tích trang web ImageKit là một công cụ phù hợp để tìm các vấn đề liên quan đến hình ảnh của chúng tôi trên trang web. Nó tải trang web trong một trình duyệt không đầu. Tất cả các yêu cầu hình ảnh được theo dõi và so sánh với phiên bản được tối ưu hóa được tìm nạp từ ImageKit.

Bạn sẽ nhận được một báo cáo như dưới đây. Nhìn dưới kích thước đúng hình ảnh để xem hình ảnh có kích thước phù hợp không.Properly resize images to see if images are in the right sizes.

Công cụ này cũng cung cấp một hình ảnh bằng cách giải thích hình ảnh cho tất cả các hình ảnh trên trang web như thế này:

Công cụ này cung cấp các báo cáo phân tích hình ảnh cho máy tính để bàn và thiết bị di động. Tuy nhiên, tại thời điểm này, nó không tính đến tỷ lệ pixel của thiết bị, vì vậy bạn sẽ phải xem xét điều đó, đặc biệt là trong khi nhìn vào báo cáo di động.

Sử dụng ngọn hải đăng

Bạn có thể sử dụng Ngọn hải đăng để xác minh hình ảnh đáp ứng được triển khai chính xác. Chạy kiểm toán hiệu suất của ngọn hải đăng cho Mobile & Desktop và tìm kiếm kết quả kiểm toán hình ảnh kích thước phù hợp.Properly size images audit results.

Điều này sẽ hiển thị tất cả các hình ảnh không có kích thước phù hợp dựa trên bố cục trang.

Xác minh thủ công hình ảnh đáp ứng

Bạn có thể sử dụng trình giả lập thiết bị Chrome để tải một trang web trên các thiết bị khác nhau và xem các yêu cầu hình ảnh trong tab mạng. Một vài điểm cần lưu ý trước khi bắt đầu:

• Trình duyệt bộ nhớ cache phải được vô hiệu hóa - do đó với các lần tải lại tiếp theo, chúng ta có thể thấy tài nguyên hình ảnh nào đang được yêu cầu.
• Đảm bảo tỷ lệ pixel của thiết bị được thêm vào, như thể hiện trong ảnh chụp màn hình bên dưới.

Bây giờ hãy mở trang web và di chuột qua phần tử hình ảnh để xem chiều rộng pixel CSS cần thiết của nó. Nhiều nó có giá trị DPR để có được chiều rộng cần thiết của tài nguyên hình ảnh.

Ví dụ ở đây,

• Giá trị DPR - 2.6
• Chiều rộng pixel CSS - 206
• Kích thước hình ảnh bắt buộc - 206 × 2.6 = 535.6

Các tùy chọn có sẵn dựa trên

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Vì vậy, ứng viên gần nhất là hình ảnh rộng 640px và trình duyệt tải xuống hình ảnh này. Bạn có thể sử dụng cùng một kỹ thuật để xem liệu hình ảnh kích thước phù hợp có được tải hay không.

Câu hỏi thường gặp

Tại sao chúng ta không thể làm điều này bằng CSS hoặc JavaScript?

Thật hợp lý khi nghĩ rằng chúng tôi có tất cả thông tin về trình duyệt, thiết bị và bố cục và có thể sử dụng JavaScript để tải hình ảnh kích thước phù hợp. Tuy nhiên, điều này sẽ trì hoãn việc tải tài nguyên hình ảnh và đánh bại toàn bộ mục đích hiển thị hình ảnh một cách nhanh chóng. Các trình duyệt hiện đại không nên chờ đợi JavaScript và CSS được phân tích cú pháp và thực hiện trước khi nó kích hoạt yêu cầu hình ảnh. Trình duyệt quét toàn bộ HTML và tìm kiếm tài nguyên hình ảnh mà không cần chờ JavaScript thực thi. Đó là lý do tại sao chúng ta cần sử dụng yếu tố

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

<img srx="image.jpg" />

Tôi có thể sử dụng cả bộ mô tả mật độ và chiều rộng trong srxset không?

Không. Theo thông số kỹ thuật về cách

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Tại sao chúng ta cần thuộc tính kích thước với srxset?

Để trình duyệt có thể kích hoạt tải hình ảnh như một phần của việc tải trước thay vì chờ CSS tải xuống & phân tích. Tìm hiểu cách trình duyệt tải một trang web để hiểu điều này.

Tại sao chúng ta sử dụng chiều rộng chứ không phải chiều cao trong srxset?

Chúng tôi chỉ chỉ định độ rộng hình ảnh trong

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Tôi nên khai báo giá trị kích thước nào?

Giá trị của thuộc tính

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Tôi nên cung cấp kích thước hình ảnh nào trong srxset?

Đầu tiên, hãy nghĩ về bố cục của bạn, tức là CSS. Sau đó, theo đó, viết

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Làm thế nào tôi nên tạo ra các tài sản hình ảnh kích thước khác nhau?

Bạn sẽ cần cung cấp các biến thể hình ảnh kích thước khác nhau để thực hiện hình ảnh phản hồi. Trên một trang web thương mại điện tử hoặc tin tức điển hình, đây có thể là một vấn đề lớn khi chúng tôi đang xử lý hàng ngàn bức ảnh. Giải pháp là sử dụng CDN hình ảnh. ImageKit.io là một CDN hình ảnh cung cấp thay đổi kích thước hình ảnh thời gian thực, chuyển đổi định dạng hình ảnh tự động và tối ưu hóa. Nó cung cấp một kế hoạch miễn phí mãi mãi với giới hạn băng thông hào phóng.

Làm thế nào để bạn làm cho một hình ảnh phản hồi trong HTML?

Nếu bạn đang tự hỏi:

• Làm thế nào để tải các hình ảnh khác nhau dựa trên kích thước màn hình?
• Làm thế nào để thay đổi kích thước hình ảnh cho thiết bị di động?
• Làm thế nào để hiển thị các hình ảnh khác nhau trên các thiết bị di động và máy tính để bàn?

Sau đó, biết rằng tất cả các trường hợp sử dụng này có liên quan và có thể được giải quyết bằng các kỹ thuật hình ảnh đáp ứng mới nhất mà chúng ta đã thảo luận trong hướng dẫn này.

Thường thì bạn sẽ chỉ cần thuộc tính

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="image.jpg" />

SRCSET không hoạt động

Bạn có thể phải đối mặt với một vấn đề trong khi sử dụng

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

• Nếu bạn thay đổi kích thước cửa sổ để kiểm tra triển khai hình ảnh đáp ứng và trình duyệt đã từng tải một hình ảnh lớn hơn có độ phân giải cao, thì nó đã giành được một hình ảnh nhỏ hơn vì nó có thể sử dụng hình ảnh lớn nhất từ ​​bộ đệm. Nó tiết kiệm thời gian & băng thông. Đó là toàn bộ điểm. Nó là cụ thể cho Chrome.
• Bạn cần xem xét giá trị DPR vào tài khoản. Trên màn hình võng mạc, trình duyệt sẽ chọn hình ảnh rộng hơn dựa trên các tùy chọn có sẵn trong

  <img srx="image.jpg" 
       srxset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
  />

  6. Nếu hình ảnh rộng 300px là bắt buộc và DPR là 2, trình duyệt cần hình ảnh rộng 600px. Nó có thể gây nhầm lẫn khi bạn mong đợi nó sẽ chọn tùy chọn rộng 300px từ

  <img srx="image.jpg" 
       srxset="small.jpg 300w,
               medium.jpg 600w,
               large.jpg 900w"
  />

  6.

Gợi ý của khách hàng không hoạt động

Sau khi các gợi ý của khách hàng hạ cánh ở Chrome 35, đã có những lo ngại về việc theo dõi người dùng trên nhiều trang web vì thông tin liên quan đến thiết bị được truyền qua gợi ý của khách hàng. Do đó, nhóm Chrome đã loại bỏ các gợi ý của khách hàng có nguồn gốc chéo trong phiên bản máy tính để bàn của Chrome 67, nhưng họ vẫn hoạt động trong thiết bị di động. Những hạn chế này sẽ được xóa sớm khi công việc trên chính sách tính năng hoàn tất.

Làm thế nào để làm cho một hình ảnh nền đáp ứng?

Đặt chiều rộng và chiều cao là không đủ khi sử dụng hình ảnh nền. Bạn có thể tận dụng các kỹ thuật mới nhất để thực hiện các hình ảnh đáp ứng trong CSS, ví dụ:

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Hình ảnh phản hồi SRXSET so với hình ảnh?

Thường xuyên hơn không, bạn sẽ chỉ cần srxset với kích thước trong khi thực hiện hình ảnh phản hồi. Đó là bởi vì trường hợp sử dụng chính của hình ảnh phản hồi là tải đúng hình ảnh kích thước trên các thiết bị khác nhau, ví dụ: di động hoặc máy tính để bàn. Tuy nhiên, một thẻ hình ảnh ở đó nếu bạn cần thực hiện hướng nghệ thuật, tức là để tải một hình ảnh hoàn toàn khác dựa trên chiều rộng màn hình có sẵn hoặc hướng thiết bị.

Thẻ hình ảnh không hoạt động

Nếu phần tử hình ảnh không hoạt động, hãy đảm bảo rằng bạn có phần tử

<img srx="image.jpg" />

Làm thế nào để làm cho hình ảnh đáp ứng trong WordPress?

Hình ảnh đáp ứng đã hạ cánh trong WordPress 4.4, giúp các nhà phát triển chủ đề dễ dàng thực hiện các hình ảnh đáp ứng trong chủ đề của họ dễ dàng hơn. Ngay khi một hình ảnh được tải lên trong thư viện phương tiện, WordPress tạo ra nhiều biến thể kích thước khác nhau và lưu trữ chúng. Khi bạn nhúng hình ảnh vào một bài đăng, phần tử

<img srx="image.jpg" />

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

Thuộc tính kích thước mặc định

Theo mặc định, giá trị của thuộc tính

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

Tuy nhiên, là một nhà phát triển chủ đề, bạn có kiến ​​thức tốt nhất về kích thước hình ảnh lý tưởng và bạn nên ghi đè mặc định này, như được thảo luận dưới đây.

Định cấu hình hình ảnh đáp ứng cho chủ đề của bạn

Các nhà phát triển chủ đề nên sử dụng hàm trợ giúp

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

Ví dụ, móc dưới đây sẽ áp dụng cho tất cả các nội dung và hình ảnh nổi bật/hình thu nhỏ. Cảm ơn Tim Evko cho đoạn mã.

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Bạn cũng có thể nối vào

<img srx="image.jpg" 
     srxset="image.jpg,
             image_2x.jpg 2x"
/>

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

Hình ảnh đáp ứng trong WordPress trước 4.4

Trước phiên bản 4.4, bạn phải sử dụng plugin RICG Rejective Images. Plugin này hoạt động bằng cách bao gồm tất cả các kích thước hình ảnh có sẵn cho mỗi tải lên hình ảnh. Bất cứ khi nào WordPress xuất hình ảnh thông qua trình tải lên phương tiện hoặc bất cứ khi nào một hình ảnh nổi bật được tạo, các kích thước đó sẽ được bao gồm trong thẻ hình ảnh thông qua thuộc tính

<img srx="image.jpg" 
     srxset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

<img srx="https://ik.imgkit.net/ikmedia/women-dress-1.jpg" 
     srxset="https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imgkit.net/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">