Chúng tôi đã khắc phục được vấn đề này: bạn quên thu nhỏ hình ảnh trước khi thêm vào . Hình ảnh trông đẹp nhưng lại làm lãng phí thời gian của người dùng dữ liệu và trang có hại hiệu suất.
Xác định hình ảnh có kích thước không chính xác
Lighthouse giúp bạn dễ dàng xác định hình ảnh có kích thước không chính xác. Chạy Kiểm tra hiệu suất (Lighthouse > Tuỳ chọn > Hiệu suất) và tìm kết quả của bài kiểm tra Định kích thước hình ảnh phù hợp. Quá trình kiểm tra này liệt kê mọi hình ảnh cần được đổi kích thước.
Xác định kích thước hình ảnh chính xác
Kích thước hình ảnh có thể khá phức tạp. Vì lý do này, chúng tôi đưa ra hai phương pháp tiếp cận: "tốt" và "tốt hơn". Cả hai sẽ giúp cải thiện hiệu suất, nhưng "tốt hơn" phương pháp tiếp cận này có thể mất nhiều thời gian hơn để hiểu và triển khai. Tuy nhiên, việc này cũng sẽ thưởng cho bạn những cải tiến hiệu suất lớn hơn. Lựa chọn tốt nhất cho bạn là người mà bạn cảm thấy thoải mái khi triển khai.
Ghi chú nhanh về các đơn vị CSS
Có hai loại đơn vị CSS để chỉ định kích thước của các phần tử HTML, bao gồm hình ảnh:
- Đơn vị tuyệt đối: Các phần tử được tạo kiểu bằng đơn vị tuyệt đối sẽ luôn là được hiển thị ở cùng một kích thước, bất kể là thiết bị nào. Ví dụ về các thuộc tính hợp lệ, Các đơn vị CSS tuyệt đối: px, cm, mm, in.
- Đơn vị tương đối: Các phần tử được tạo kiểu bằng đơn vị tương đối sẽ hiển thị tại kích thước khác nhau, tuỳ theo chiều dài tương đối được chỉ định. Ví dụ về đơn vị CSS tương đối, hợp lệ: %, vw (1vw = 1% chiều rộng của khung nhìn), em (1,5 em = 1,5 lần cỡ chữ).
"Tốt" Phương pháp
Đối với hình ảnh có kích thước dựa trên...
- Đơn vị tương đối: Đổi kích thước hình ảnh thành kích thước phù hợp trên tất cả thiết bị.
Bạn có thể thấy hữu ích khi kiểm tra dữ liệu phân tích của mình (ví dụ: Google Analytics) để biết những kích thước hiển thị thường được người dùng của bạn sử dụng. Một cách khác là screensiz.es cung cấp thông tin về màn hình của nhiều thiết bị phổ biến. – Đơn vị tuyệt đối: Đổi kích thước hình ảnh cho phù hợp với kích thước hiển thị.
Bạn có thể sử dụng bảng điều khiển Phần tử của Công cụ cho nhà phát triển để xác định kích thước của hình ảnh được hiển thị tại.
"Tốt hơn" tiếp cận
Đối với hình ảnh có cả kích thước tuyệt đối và tương đối, hãy sử dụng srcset
và sizes
để phân phát hình ảnh khác nhau cho các mật độ hiển thị khác nhau.
Đọc hướng dẫn về hình ảnh thích ứng.
"Mật độ hiển thị" đề cập đến thực tế là các màn hình khác nhau có các màn hình khác nhau mật độ pixel. Tất cả những yếu tố khác đều bằng nhau, mật độ pixel cao màn hình sẽ sắc nét hơn so với màn hình có mật độ điểm ảnh thấp.
Do đó, cần có nhiều phiên bản hình ảnh nếu bạn muốn người dùng trải nghiệm hình ảnh sắc nét nhất có thể, bất kể mật độ pixel thiết bị của họ.
Kỹ thuật hình ảnh thích ứng giúp bạn làm được điều này bằng cách cho phép bạn liệt kê nhiều phiên bản hình ảnh và để thiết bị chọn hình ảnh phù hợp tốt nhất cho nó.
Một hình ảnh hoạt động được trên tất cả thiết bị sẽ có kích thước lớn không cần thiết cho các thiết bị nhỏ hơn. Kỹ thuật tạo hình ảnh thích ứng, cụ thể là srcset và kích thước, cho phép bạn chỉ định nhiều phiên bản hình ảnh và để thiết bị chọn có kích thước phù hợp nhất với nó.
Đổi kích thước hình ảnh
Bất kể chọn phương pháp nào, bạn đều có thể thấy phương pháp đó hữu ích khi sử dụng ImageMagick để đổi kích thước hình ảnh của bạn. ImageMagick là ứng dụng phổ biến nhất công cụ dòng lệnh để tạo và chỉnh sửa hình ảnh. Hầu hết mọi người đều có thể đổi kích thước hình ảnh nhanh hơn nhiều khi sử dụng CLI so với trình chỉnh sửa hình ảnh dựa trên GUI.
Đổi kích thước hình ảnh thành 25% kích thước của hình ảnh gốc:
convert flower.jpg -resize 25% flower_small.jpg
Điều chỉnh tỷ lệ hình ảnh cho vừa với "200px rộng x 100px cao":
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Nếu thay đổi kích thước nhiều hình ảnh, bạn có thể dùng tập lệnh hoặc dịch vụ để tự động hoá quy trình. Bạn có thể tìm hiểu thêm về vấn đề này trong Hướng dẫn về hình ảnh thích ứng.
Chỉ định kích thước để tránh thay đổi bố cục
Mặc dù hướng dẫn này thảo luận về kích thước hình ảnh trong bối cảnh giảm số byte không cần thiết được tải xuống, nhưng điều quan trọng cần lưu ý là việc dành đúng không gian cho hình ảnh trong bố cục là một thành phần quan trọng khác để giảm thiểu chỉ số Điểm số tổng hợp về mức thay đổi bố cục của trang. Khi phân phát hình ảnh trong HTML, hãy nhớ sử dụng các thuộc tính width và height phù hợp để trình duyệt biết cần phân bổ bao nhiêu không gian trong bố cục cho hình ảnh:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Nếu không có các thuộc tính này hoặc kích thước CSS tương đương, trình duyệt sẽ không biết hình ảnh sẽ chiếm bao nhiêu dung lượng cho đến khi tải xong. Điều này sẽ khiến bố cục trong tài liệu thay đổi, do đó có thể gây khó chịu cho người dùng khi nội dung di chuyển sau khi họ bắt đầu xem. Điều này có thể khiến người dùng mất dấu khi đang đọc hoặc "bỏ lỡ" mục tiêu lượt truy cập dự kiến của họ và cuối cùng nhấp vào nội dung khác mà họ không có ý định trong khi tải trang.
Một giải pháp thay thế cho việc cung cấp rõ ràng chiều rộng và chiều cao là sử dụng thuộc tính aspect-ratio của CSS trên hình ảnh. Điều này ảnh hưởng đến kích thước của một phần tử tương tự như thuộc tính width và height, trong trường hợp vùng chứa sẽ duy trì tỷ lệ khung hình nhất quán. Tuy nhiên, sự khác biệt là việc này có thể dẫn đến việc sử dụng tỷ lệ khung hình khác với hình ảnh được cung cấp. Vì vậy, có thể bạn nên sử dụng chế độ cài đặt object-fit để đảm bảo hình ảnh không bị méo trong chế độ xem 16/9 rõ ràng này:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Xác minh
Sau khi bạn đã đổi kích thước tất cả hình ảnh, hãy chạy lại Lighthouse để xác minh rằng bạn không thay đổi bỏ lỡ bất kỳ điều gì.