Trong khi triển khai một trang web, các nhà phát triển thường sử dụng cùng một hình ảnh cho tất cả các kích thước màn hình, đây không phải là một phương pháp hay vì không thể dựa vào trình duyệt để thay đổi kích thước. Trong tình huống như vậy, hình ảnh phản hồi có hiệu lực đảm bảo rằng hình ảnh được tải xuống ở kích thước và chất lượng phù hợp cho thiết bị tương ứng, từ đó nâng cao tốc độ tải trang.
Làm cách nào để nâng cao tốc độ tải trang bằng hình ảnh phản hồi?
Để nâng cao tốc độ tải trang thông qua hình ảnh phản hồi, hãy xem xét các phương pháp sau:
Ví dụ 1: Nâng cao tốc độ tải trang thông qua hình ảnh phản hồi bằng cách sử dụng thuộc tính “srcset”
Cách tiếp cận thuận tiện nhất để áp dụng hình ảnh đáp ứng có thể là sử dụng “ tập tin srcset ” thuộc tính được tích lũy trong “
DOCTYPE html >
< html >
< cái đầu >
< meta bộ ký tự = 'utf-8' >
< meta tên = 'khung nhìn' nội dung = 'width=chiều rộng thiết bị, tỷ lệ ban đầu=1' >
< tiêu đề > tiêu đề >
cái đầu >
< thân hình >
< hình ảnh src = 'F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png' mọi thứ = 'Hình ảnh đáp ứng'
tập tin srcset = 'F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png 400w, F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png 800w, F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png 1200w'
/>
thân hình >
html >
Trong mã này:
- Các ' tập tin srcset ” thuộc tính được bao gồm bao gồm đường dẫn của hình ảnh và các độ rộng khác nhau mỗi lần.
- Chính hình ảnh đó “ F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png 400w ” đại diện cho đường dẫn hình ảnh có chiều rộng là “ 400 ' điểm ảnh.
- Dựa trên thông tin này, trình duyệt sẽ phân tích hình ảnh phù hợp nhất để tải xuống dựa trên kích thước màn hình của người dùng sao cho màn hình nhỏ hơn hiển thị hình ảnh nhỏ hơn, từ đó tiết kiệm băng thông.
đầu ra
Ví dụ 2: Nâng cao tốc độ tải trang thông qua hình ảnh phản hồi bằng cách chỉ định mật độ pixel khác nhau
Trong ví dụ này, đường dẫn hình ảnh sẽ được chỉ định cùng với mật độ pixel khác nhau cho màn hình có độ phân giải cao. Điều này có thể đạt được thông qua “ tập tin srcset Thuộc tính ”, được minh họa bên dưới:
DOCTYPE html >< html >
< cái đầu >
< meta bộ ký tự = 'utf-8' >
< meta tên = 'khung nhìn' nội dung = 'width=chiều rộng thiết bị, tỷ lệ ban đầu=1' >
< tiêu đề > tiêu đề >
cái đầu >
< thân hình >
< hình ảnh src = 'F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png' mọi thứ = 'Hình ảnh đáp ứng' tập tin srcset = 'F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png 1x, F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png 1.5x, F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png 2x'
/>
thân hình >
html >
Trong đoạn mã này, hãy chỉ định đường dẫn hình ảnh ba lần với mật độ pixel khác nhau. Như vậy, trình duyệt sẽ chọn hình ảnh phù hợp/phù hợp nhất để đảm bảo chất lượng hàng đầu trên nhiều màn hình khác nhau.
Ghi chú: Các ' 1x ” pixel là giá trị mặc định nên người dùng có thể lựa chọn có liên kết với đường dẫn của hình ảnh hay không.
đầu ra
Ví dụ 3: Nâng cao tốc độ tải trang thông qua hình ảnh phản hồi bằng cách sử dụng thuộc tính “kích thước”
Trong một số trường hợp, có thể có hạn chế trong đó kích thước hình ảnh thực tế trên màn hình thay đổi theo chiều rộng màn hình. Để giải quyết vấn đề này, “ kích thước Thuộc tính ” có thể được sử dụng để bao gồm kích thước hình ảnh liên quan đến truy vấn phương tiện hoặc kích thước cố định. Dưới đây là phần trình diễn mã:
DOCTYPE html >< html >
< cái đầu >
< meta bộ ký tự = 'utf-8' >
< meta tên = 'khung nhìn' nội dung = 'width=chiều rộng thiết bị, tỷ lệ ban đầu=1' >
< tiêu đề > tiêu đề >
cái đầu >
< thân hình >
< hình ảnh src = 'F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png' mọi thứ = 'Hình ảnh đáp ứng' tập tin srcset = 'F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png 50w, F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png 800w, F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png 1200w'
kích thước = '(chiều rộng tối đa: 800px) 100vw, 800px'
/>
thân hình >
html >
Trong khối mã này, “ kích cỡ Thuộc tính ” tích hợp các truy vấn và kích thước phương tiện. Nó hướng dẫn trình duyệt chọn kích thước hình ảnh phù hợp với chiều rộng màn hình của người dùng. Điều này đảm bảo rằng (các) hình ảnh không vượt quá chiều rộng tối đa mục tiêu.
đầu ra
Những cân nhắc quan trọng khi sử dụng thuộc tính “kích thước”
Có một số hạn chế trong việc sử dụng “ kích cỡ Thuộc tính ” cũng được liệt kê bên dưới:
- Khi sử dụng nhiều truy vấn phương tiện trong “ kích thước ” thuộc tính, hãy đảm bảo rằng truy vấn phương tiện thực sự đầu tiên được chọn. Ngoài ra, hãy đảm bảo rằng các truy vấn phương tiện được sắp xếp từ cụ thể nhất đến ít cụ thể nhất.
- Thuộc tính “sizes” không hỗ trợ kích thước phần trăm vì trình duyệt không biết chiều rộng của một thứ được chỉ định theo tỷ lệ phần trăm cho đến khi nó nhận biết được chiều rộng của phần tử gốc.
Ví dụ 4: Nâng cao tốc độ tải trang thông qua hình ảnh phản hồi bằng cách sử dụng phần tử “
Các '
< html >
< cái đầu >
< meta bộ ký tự = 'utf-8' >
< meta tên = 'khung nhìn' nội dung = 'width=chiều rộng thiết bị, tỷ lệ ban đầu=1' >
< tiêu đề > tiêu đề >
cái đầu >
< thân hình >
< hình ảnh >
< nguồn phương tiện truyền thông = '(chiều rộng tối đa: 100px)' tập tin srcset = 'F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgbanner.png' />
< hình ảnh src = 'F:\BÀI VIẾT KỸ THUẬT CÔNG VIỆC\imgre.png' mọi thứ = 'Hình ảnh đáp ứng' />
hình ảnh >
thân hình >
html >
Theo những dòng mã này:
- Chỉ định la '
” phần tử tích lũy “ ” cho các hình ảnh khác nhau và cho phép trình duyệt chọn hình ảnh phù hợp dựa trên kích thước màn hình của người dùng. - Ngoài ra, nếu không có “
” các phần tử phù hợp với kích thước màn hình, hình ảnh được chỉ định trong phần “ Thẻ ” đóng vai trò dự phòng. - Điều này dẫn đến việc thêm hình ảnh thay thế trong trường hợp không lường trước được, từ đó duy trì tốc độ tải trang được nâng cao.
đầu ra
Phần kết luận
Tốc độ tải trang có thể được nâng cao thông qua hình ảnh phản hồi bằng cách sử dụng “ tập tin srcset thuộc tính ”, chỉ định mật độ pixel khác nhau, sử dụng thuộc tính “ kích thước thuộc tính ” hoặc thông qua “