Cách xếp chồng hai hình ảnh trong HTML

Tác động của hình ảnh đối với trải nghiệm người dùng và Core Web Vitals

Bạn có thể đã nghe nói về Core Web Vitals (CWV). Đây là một sáng kiến ​​của Google nhằm chia sẻ hướng dẫn thống nhất về các tín hiệu chất lượng có thể là chìa khóa để mang lại trải nghiệm tuyệt vời cho người dùng trên web. CWV là một phần của tập hợp các tín hiệu trải nghiệm trang mà Google Tìm kiếm sẽ đánh giá để xếp hạng. Hình ảnh có thể tác động đến CWV theo một số cách.  

Trong hướng dẫn này, chúng tôi sẽ sử dụng Lighthouse để xác định các cơ hội cải thiện Các chỉ số quan trọng về trang web cốt lõi, xem qua các cách tối ưu hóa cho từng chỉ số. Lighthouse là một công cụ mã nguồn mở, tự động để cải thiện chất lượng của các trang web. Bạn có thể tìm thấy nó trong bộ công cụ gỡ lỗi Chrome DevTools và chạy nó trên bất kỳ trang web nào, cho dù là công khai hay yêu cầu xác thực. Bạn cũng có thể tìm thấy Lighthouse trong PageSpeed ​​Insights, CI và WebPageTest.  

Hãy nhớ rằng Ngọn hải đăng là một công cụ phòng thí nghiệm. Mặc dù rất tuyệt khi tìm kiếm các cơ hội để cải thiện trải nghiệm người dùng của bạn, nhưng hãy luôn cố gắng tham khảo dữ liệu trong thế giới thực để có bức tranh hoàn chỉnh về những gì người dùng thực tế đang thấy

Thay đổi bố cục tích lũy

Thay đổi bố cục có thể gây mất tập trung cho người dùng. Hãy tưởng tượng bạn đang bắt đầu đọc một bài báo khi tất cả các yếu tố đột ngột thay đổi trên trang, khiến bạn mất tập trung và yêu cầu bạn tìm lại vị trí của mình. Thay đổi bố cục tích lũy (CLS) đo lường sự không ổn định của nội dung. Các nguyên nhân phổ biến nhất của CLS bao gồm hình ảnh không có kích thước (xem bên dưới), có thể đẩy nội dung xuống khi chúng tải và khớp vào vị trí. Bỏ qua chúng có nghĩa là trình duyệt có thể không dành đủ dung lượng trước khi tải chúng.  

Những thứ cơ bản

Để đặt một hình ảnh trên một trang web, chúng tôi sử dụng phần tử

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1. Đây là một phần tử trống—nó không có thẻ đóng—yêu cầu tối thiểu một thuộc tính để hữu ích.

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

6, tệp nguồn cho hình ảnh. Nếu một hình ảnh được gọi là “bàn phím. jpg” và nó tồn tại trong cùng đường dẫn với tài liệu HTML của bạn, nó có thể được nhúng như sau

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

7

Để đảm bảo hình ảnh của chúng tôi có thể truy cập được, chúng tôi thêm thuộc tính

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

8. Giá trị của thuộc tính này phải là một mô tả bằng văn bản của hình ảnh và được sử dụng thay thế cho hình ảnh khi không thể hiển thị hoặc nhìn thấy hình ảnh đó; . Đoạn mã trên với một chỉ định

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

8 trông như sau

0

Tiếp theo, chúng tôi thêm các thuộc tính

1 và

2 để chỉ định chiều rộng và chiều cao của hình ảnh, còn được gọi là kích thước của hình ảnh. Kích thước của hình ảnh thường có thể được tìm thấy bằng cách xem thông tin này qua trình khám phá tệp của hệ điều hành của bạn (Cmd + I trên macOS)

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

0

Khi chiều rộng và chiều cao được chỉ định trên một hình ảnh, trình duyệt sẽ biết dung lượng dành cho hình ảnh đó cho đến khi hình ảnh được tải xuống. Việc quên bao gồm kích thước của hình ảnh có thể khiến bố cục bị thay đổi vì trình duyệt không chắc hình ảnh sẽ cần bao nhiêu dung lượng

Các trình duyệt hiện đại hiện đặt tỷ lệ khung hình mặc định của hình ảnh dựa trên thuộc tính

1 và

2 của hình ảnh, do đó, việc đặt các tỷ lệ này để ngăn chặn sự thay đổi bố cục như vậy là rất có giá trị

Xác định sự thay đổi bố cục từ hình ảnh không có kích thước

Để Chuyển bố cục tích lũy từ hình ảnh không có kích thước, hãy bao gồm các thuộc tính

1 và

2 trên các thành phần hình ảnh và video của bạn. Cách tiếp cận này đảm bảo rằng trình duyệt có thể phân bổ đúng dung lượng trong tài liệu trong khi hình ảnh đang tải. Ngọn hải đăng sẽ làm nổi bật hình ảnh mà không cần chiều rộng và chiều cao

Hầu hết các hình ảnh trên blog đều đặt chiều rộng và chiều cao. Lighthouse chỉ có thể tìm thấy một ví dụ nhỏ và CLS trên các trang được kiểm tra nhìn chung là khá tốt

Sơn có nội dung lớn nhất

Trong nhiều trải nghiệm web hiện đại, hình ảnh có xu hướng là yếu tố hiển thị lớn nhất khi một trang tải xong. Chúng bao gồm hình ảnh anh hùng và hình ảnh từ băng chuyền, câu chuyện và biểu ngữ. Hình ảnh có nội dung lớn nhất (LCP) là chỉ số Core Web Vitals đo lường thời điểm phần tử có nội dung lớn nhất (hình ảnh, văn bản) trong chế độ xem của người dùng hiển thị. Điều này cho phép trình duyệt xác định khi nào nội dung chính của trang kết thúc hiển thị.  

Khi một hình ảnh là thành phần có nội dung lớn nhất, tốc độ tải hình ảnh có thể ảnh hưởng đến LCP chậm như thế nào. Ngoài việc áp dụng nén ảnh (e. g. sử dụng Squoosh, Sharp, ImageOptim hoặc CDN hình ảnh) và sử dụng định dạng hình ảnh hiện đại, bạn có thể điều chỉnh phần tử

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1 để phục vụ phiên bản phản hồi phù hợp nhất của hình ảnh hoặc tải chậm hình ảnh đó

Xác định phần tử Paint có nội dung lớn nhất

Lighthouse có cuộc kiểm tra “Phần tử sơn có nội dung lớn nhất” để xác định phần tử nào là bức tranh có nội dung lớn nhất. Di chuột qua phần tử sẽ đánh dấu phần tử đó trong cửa sổ trình duyệt chính

Nếu phần tử này là một hình ảnh, thì thông tin này là một gợi ý hữu ích mà bạn có thể muốn tối ưu hóa việc tải hình ảnh này.   

Di chuột qua hình ảnh trong bảng Thành phần DevTools của Chrome sẽ hiển thị kích thước của hình ảnh cũng như kích thước nội tại của hình ảnh

Hình ảnh đáp ứng

Điều gì về việc chuyển đổi độ phân giải hình ảnh? . Nhưng với các thuộc tính

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

3 và

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

50, chúng tôi có thể cung cấp nhiều hình ảnh nguồn bổ sung (và gợi ý) để trình duyệt có thể chọn hình ảnh phù hợp nhất. Điều này cho phép chúng tôi cung cấp hình ảnh nhỏ hơn hoặc lớn hơn

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

Thuộc tính

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

3 xác định tập hợp các hình ảnh mà trình duyệt có thể chọn, cũng như kích thước của mỗi hình ảnh. Mỗi chuỗi hình ảnh được phân tách bằng dấu phẩy và bao gồm. tên tệp nguồn (

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

52); . )

Từ Tốc độ trên Quy mô với Katie Hempenius và tôi tại Google I/O

Thuộc tính

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

50 chỉ định một tập hợp các điều kiện, chẳng hạn như độ rộng màn hình và kích thước hình ảnh nào là tốt nhất để chọn khi các điều kiện đó được đáp ứng. Ở trên, (

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

58) là điều kiện phương tiện hỏi “liệu ​​chiều rộng khung nhìn có phải là 640 pixel trở xuống không” và

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

59 là chiều rộng của vị trí mà hình ảnh sẽ lấp đầy khi điều kiện phương tiện là đúng. Điều này thường tương ứng với các điểm ngắt phản hồi của trang

Tỷ lệ pixel của thiết bị (DPR) / Giới hạn mật độ pixel

Tỷ lệ pixel của thiết bị (DPR) biểu thị cách một pixel CSS được dịch thành pixel vật lý trên màn hình phần cứng. và màn hình retina sử dụng nhiều pixel vật lý hơn để biểu thị pixel CSS cho hình ảnh sắc nét hơn và có hình ảnh chi tiết hơn

Mắt người có thể không phân biệt được sự khác biệt giữa hình ảnh có 2x-3x DPR so với. độ phân giải thậm chí còn cao hơn. Cung cấp hình ảnh DPR quá cao là một vấn đề phổ biến đối với các trang web tận dụng

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

50 và một bộ kích thước hình ảnh

Có thể sử dụng giới hạn DPR để cung cấp cho người dùng của bạn hình ảnh ở độ trung thực gấp 2 hoặc 3 lần để tránh tải trọng hình ảnh lớn. Twitter giới hạn độ trung thực của hình ảnh của họ ở mức gấp 2 lần, dẫn đến thời gian tải hình ảnh theo dòng thời gian nhanh hơn 33%. Họ nhận thấy rằng 2x là một điểm hấp dẫn của cả hai chiến thắng hiệu suất tốt mà không làm suy giảm các chỉ số chất lượng.  

Ghi chú. Cách tiếp cận giới hạn DPR này hiện không thể thực hiện được nếu sử dụng bộ mô tả “w”

Xác định hình ảnh có thể có kích thước tốt hơn

Lighthouse bao gồm một số kiểm tra tối ưu hóa hình ảnh để giúp bạn hiểu liệu hình ảnh của bạn có thể được nén tốt hơn, được phân phối ở định dạng hình ảnh hiện đại tối ưu hơn hay thay đổi kích thước

Lighthouse đã phát hiện ra rằng blog Stack Overflow đang sử dụng WordPress và có thể đề xuất một số hướng dẫn dành riêng cho WP về cách định cỡ một số lượng nhỏ hình ảnh lẽ ra có thể nhỏ hơn

Ngay cả những hình ảnh phản hồi (nghĩa là có kích thước tương ứng với chế độ xem) cũng phải được đặt chiều rộng và chiều cao. Trong các trình duyệt hiện đại, các thuộc tính này thiết lập tỷ lệ khung hình giúp ngăn thay đổi bố cục, ngay cả khi kích thước tuyệt đối bị CSS ghi đè.  

Khi không sử dụng CDN hình ảnh hoặc khung, tôi thích sử dụng các điểm ngắt đáp ứng. com để xác định điểm ngắt hình ảnh tối ưu và tạo mã

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

51 cho hình ảnh phản hồi của tôi.  

Phục vụ các định dạng hình ảnh hiện đại

Chỉ đạo nghệ thuật cho phép chúng tôi phục vụ các hình ảnh khác nhau tùy thuộc vào màn hình của người dùng. Mặc dù hình ảnh phản hồi tải các kích thước khác nhau của cùng một hình ảnh, hướng nghệ thuật có thể tải các hình ảnh rất khác nhau dựa trên màn hình.  

Trình duyệt có thể chọn định dạng hình ảnh sẽ hiển thị bằng phần tử

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

52. Phần tử

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

52 hỗ trợ nhiều phần tử

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

54 và một phần tử

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1 duy nhất, có thể tham chiếu các nguồn cho các định dạng khác nhau bao gồm AVIF và WebP

Trong ví dụ này, trình duyệt sẽ bắt đầu phân tích cú pháp các nguồn và sẽ dừng khi tìm thấy kết quả khớp được hỗ trợ đầu tiên. Nếu không tìm thấy kết quả phù hợp, trình duyệt sẽ tải nguồn được chỉ định trong

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1 làm dự phòng.  

Hiểu được vô số tùy chọn định dạng hình ảnh hiện có ngày nay có thể là một quá trình khó hiểu, nhưng bạn có thể thấy việc so sánh các định dạng hình ảnh hiện đại của Cloudinary hữu ích

Xác định hình ảnh có thể được phục vụ ở định dạng hiện đại hơn

Ngọn hải đăng nêu bật khả năng tiết kiệm từ việc cung cấp hình ảnh ở định dạng thế hệ tiếp theo.  

Tôi cũng thích sử dụng Squoosh vì nó hỗ trợ các định dạng mới nhất, chẳng hạn như JPEG XL, vì nó cung cấp một cách ít ma sát để thử nghiệm các định dạng hiện đại bên ngoài CLI hoặc CDN

Có nhiều cách để tiếp cận các vấn đề về kích thước vì cả

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

3 và kích thước đều có thể sử dụng được trên

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

52 và

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1. Khi nghi ngờ, hãy sử dụng

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1 với

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

3/

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

50 cho các hình ảnh đơn lẻ có bố cục đơn giản. Sử dụng

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

52 để phục vụ nhiều định dạng, bố cục phức tạp và hướng nghệ thuật.  

caniuse có các chi tiết hỗ trợ trình duyệt mới nhất cho WebP, AVIF và JPEG XL

đàm phán nội dung

Một cách khác để xử lý lựa chọn định dạng hình ảnh theo cách thủ công bằng cách sử dụng

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

52 là dựa vào tiêu đề

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

55. Điều này được gửi bởi máy khách, cho phép máy chủ cung cấp định dạng hình ảnh phù hợp nhất cho người dùng. Các CDN như Akamai, Cloudinary và Cloudflare hỗ trợ nó

Yêu cầu hình ảnh của bạn sớm

Nếu bạn đang tối ưu hóa LCP, tải trước có thể giúp tăng thời gian hình ảnh anh hùng được phát hiện muộn (e. g chẳng hạn như những hình ảnh được tải bởi JavaScript hoặc hình ảnh anh hùng nền trong CSS) được tìm nạp. Nếu có thể, hãy cố gắng giải quyết vấn đề này bằng cách giảm thiểu tốt hơn các chuỗi yêu cầu đối với hình ảnh LCP của bạn để trình duyệt không cần tìm nạp, phân tích cú pháp và thực thi JavaScript trước hoặc đợi một thành phần kết xuất/hydrat hóa để khám phá hình ảnh

Bạn có thể sử dụng

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

56 với

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1 để cho phép trình duyệt khám phá các tài nguyên quan trọng mà bạn muốn tải càng sớm càng tốt, trước khi chúng được tìm thấy trong HTML.  

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

58

Ghi chú. Sử dụng tải trước một cách tiết kiệm và luôn đo lường tác động của nó trong sản xuất. Nếu tải trước cho hình ảnh của bạn sớm hơn trong tài liệu, điều này có thể giúp trình duyệt khám phá nó (và sắp xếp thứ tự so với các tài nguyên khác).  

Tải trước có thể được sử dụng để tìm nạp các nguồn cho một

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1 có định dạng cụ thể

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

80

Tải trước cũng có thể được sử dụng để tìm nạp hình ảnh phản hồi để nguồn chính xác được phát hiện sớm hơn

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

5

Trình giữ chỗ

Điều gì sẽ xảy ra nếu bạn muốn hiển thị cho người dùng một trình giữ chỗ trong khi tải hình ảnh? . Chúng ta có thể kết hợp

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

81 với

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

84 để đặt kích thước hình nền của một phần tử và chia tỷ lệ hình ảnh càng lớn càng tốt mà không cần kéo giãn hình ảnh

Trình giữ chỗ thường là các URL dữ liệu được mã hóa Base64, là trình giữ chỗ hình ảnh chất lượng thấp (LQIP) hoặc trình giữ chỗ hình ảnh SVG (SQIP). Điều này cho phép người dùng xem trước hình ảnh rất nhanh, ngay cả trên các kết nối mạng chậm, trước khi tải hình ảnh cuối cùng sắc nét hơn để thay thế hình ảnh đó

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

5

Ghi chú. Cho rằng URL dữ liệu Base64 có thể khá dài, [

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

85] được ký hiệu trong ví dụ trên để cải thiện khả năng đọc. Thuộc tính giải mã ở trên cũng được sử dụng để báo hiệu tùy chọn giữa giải mã hình ảnh đồng bộ và không đồng bộ

Với trình giữ chỗ SVG nội tuyến, đây là ví dụ từ trước đó trông như thế nào khi được tải trên một kết nối rất chậm. Lưu ý cách người dùng được hiển thị bản xem trước ngay trước khi bất kỳ hình ảnh kích thước đầy đủ nào được tải xuống

Hình ảnh được tải trên một kết nối chậm được mô phỏng, hiển thị một trình giữ chỗ gần đúng với hình ảnh cuối cùng khi nó tải vào. Điều này có thể cải thiện hiệu suất nhận thức trong một số trường hợp nhất định

Có nhiều giải pháp hiện đại cho trình giữ chỗ hình ảnh (e. g Màu nền CSS, LQIP, SQIP, Blur Hash, Potrace)

từ Gunther Brunner của CyberAgent

Độ trễ đầu vào đầu tiên

Hình ảnh có thể chặn băng thông và CPU của người dùng khi tải trang. Chúng có thể cản trở cách tải các tài nguyên quan trọng, đặc biệt là trên các kết nối chậm và thiết bị di động cấp thấp dẫn đến bão hòa băng thông. First Input Delay (FID) là chỉ số Core Web Vitals ghi lại ấn tượng đầu tiên của người dùng về khả năng tương tác và khả năng phản hồi của trang web. Bằng cách giảm mức sử dụng CPU của luồng chính, FID cũng có thể được giảm

Tải chậm hình ảnh

Còn những hình ảnh ngoài màn hình không hiển thị cho đến khi người dùng cuộn xuống trang thì sao? . Trong ví dụ dưới đây, tất cả các hình ảnh trên trang đều được “tải háo hức” (mặc định trong các trình duyệt hiện nay), khiến người dùng tải xuống 1. 1 MB hình ảnh. Điều này có thể khiến các gói dữ liệu của người dùng bị ảnh hưởng ngoài việc ảnh hưởng đến hiệu suất

Một thư viện hình ảnh háo hức tải tất cả các hình ảnh cần thiết lên phía trước, như được hiển thị trong bảng điều khiển Mạng DevTools của Chrome. 1. 1 MB hình ảnh đã được tải xuống, mặc dù chỉ có một số lượng nhỏ hiển thị khi người dùng truy cập trang lần đầu tiên

Sử dụng thuộc tính

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

86 trên

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1, chúng tôi có thể kiểm soát hành vi tải hình ảnh.

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

88 lazy-load hình ảnh, trì hoãn quá trình tải của chúng cho đến khi chúng đạt đến khoảng cách được tính toán từ khung nhìn. Đặt

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

89 tải hình ảnh ngay lập tức, bất kể mức độ hiển thị của chúng trong chế độ xem. Giá trị mặc định là

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

10, vì vậy không cần thêm rõ ràng (nghĩa là chỉ cần sử dụng

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1 để tải háo hức)

Dưới đây là một ví dụ về lazy-load một

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1 với một nguồn duy nhất

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

5

Với tải xuống chậm

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1 gốc, ví dụ trước đó hiện chỉ tải xuống khoảng 90KB hình ảnh. Chỉ cần thêm

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

88 vào hình ảnh ngoài màn hình của chúng tôi là có tác động rất lớn. Lý tưởng nhất là bạn muốn lazy-load tất cả các hình ảnh hiện có và tránh nó cho mọi thứ trong chế độ xem ban đầu

Một thư viện hình ảnh sử dụng lazy-load hình ảnh gốc trên các hình ảnh bên ngoài khung nhìn. Như đã thấy trong bảng điều khiển Mạng Chrome DevTools, trang hiện chỉ tải xuống số lượng hình ảnh tối thiểu mà người dùng cần trước. Phần còn lại của hình ảnh được tải vào khi người dùng cuộn xuống trang

Lazy loading cũng hoạt động với những hình ảnh bao gồm

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

3

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

8

Phần Cơ hội của Lighthouse liệt kê bất kỳ hình ảnh ẩn hoặc ngoài màn hình nào trên một trang có thể được tải chậm cũng như các khoản tiết kiệm tiềm năng từ việc này

Xem caniuse. com để được hỗ trợ trình duyệt mới nhất cho tải chậm hình ảnh gốc

kết luận

Hình ảnh là chìa khóa để mang lại trải nghiệm tuyệt vời trên web. Hy vọng rằng bạn đã học được điều gì đó hữu ích về việc yếu tố

    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

1 đã phát triển đến đâu. Khi nghi ngờ, hãy kiểm tra và xem những công cụ như Lighthouse đề xuất có thể là cơ hội để mang lại trải nghiệm tải hình ảnh thậm chí còn tuyệt vời hơn so với hiện tại của bạn

Nếu bạn muốn tìm hiểu thêm, gần đây tôi đã xuất bản một cuốn sách mới có tên là Tối ưu hóa hình ảnh bao gồm các kỹ thuật tối ưu hóa hình ảnh nâng cao có thể giúp hình ảnh của bạn tỏa sáng trên web