Tất cả chúng ta đều ở đó: bạn quên thu nhỏ hình ảnh trước khi thêm vào trang. Hình ảnh trông có vẻ ổn, nhưng làm lãng phí dữ liệu của người dùng và làm giảm hiệu suất trang.
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 các hình ảnh có kích thước không chính xác. Chạy bài 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 Hình ảnh có kích thước phù hợp. Quá trình kiểm tra liệt kê mọi hình ảnh cần đổi kích thước.
Xác định kích thước hình ảnh chính xác
Việc định kích thước hình ảnh có thể phức tạp hơn. Vì lý do này, chúng tôi đã cung cấp hai cách tiếp cận: "tốt" và "tốt hơn". Cả hai đều giúp cải thiện hiệu suất, nhưng có thể mất nhiều thời gian hơn một chút để hiểu và triển khai phương pháp "tốt hơn". Tuy nhiên, nó cũng sẽ mang lại cho bạn nhiều điểm cải tiến hơn về hiệu suất. Lựa chọn tốt nhất cho bạn là lựa chọn mà bạn cảm thấy thoải mái khi triển khai.
Lưu ý nhanh về đơn vị CSS
Có hai loại đơn vị CSS để xác định kích thước của các phần tử HTML, bao gồm cả 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 hiển thị ở cùng kích thước, bất kể thiết bị là gì. Ví dụ về các đơn vị CSS tuyệt đối và hợp lệ: 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ị ở kích thước khác nhau, tuỳ thuộc vào độ dài tương đối được chỉ định. Ví dụ về các đơn vị CSS hợp lệ và tương đối: %, vw (1vw = 1% chiều rộng của khung nhìn), em (1,5 em = 1,5 lần cỡ chữ).
Phương pháp "Tốt"
Đố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ả các thiết bị.
Bạn nên kiểm tra dữ liệu phân tích (ví dụ: Google Analytics) để xem những kích thước hiển thị mà người dùng thường sử dụng. Ngoài ra, 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 khớp với kích thước hình ảnh 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 hiển thị của hình ảnh.
Phương pháp "Tốt hơn"
Đối với các hình ảnh có cả kích thước tuyệt đối và tương đối, hãy sử dụng các thuộc tính srcset và sizes để phân phát nhiều hình ảnh cho nhiều mật độ hiển thị.
Đọ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ó mật độ pixel khác nhau. Với mọi yếu tố khác như nhau, màn hình hiển thị có mật độ pixel cao sẽ trông sắc nét hơn màn hình có mật độ pixel thấp.
Do đó, bạn cần có nhiều phiên bản hình ảnh nếu muốn người dùng trải nghiệm những hình ảnh sắc nét nhất có thể, bất kể mật độ pixel trên thiết bị của họ là bao nhiêu.
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 nhất với thiết bị.
Một hình ảnh hoạt động trên mọi thiết bị sẽ có kích thước lớn một cách không cần thiết đối với các thiết bị nhỏ hơn. Các kỹ thuật 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 kích thước phù hợp nhất với mình.
Đổi kích thước hình ảnh
Bất kể chọn phương pháp nào, bạn cũng nên sử dụng ImageMagick để đổi kích thước hình ảnh. ImageMagick là công cụ dòng lệnh phổ biến nhất để 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 gốc:
convert flower.jpg -resize 25% flower_small.jpg
Điều chỉnh tỷ lệ hình ảnh cho vừa trong khoảng "200px rộng x 100px":
# 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ể thấy thuận tiện hơn khi sử dụng một 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.
Tránh thay đổi bố cục bằng cách chỉ định kích thướ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ố lượng 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 đặt trước đúng dung lượng 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 bằng HTML, hãy đảm bảo sử dụng các thuộc tính width và height thích 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 được dung lượng của hình ảnh cho đến khi tải. Điều này sẽ khiến bố cục thay đổi trong tài liệu, điều này có thể khiến người dùng khó chịu 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 vị trí khi đọc hoặc "bỏ lỡ" mục tiêu lượt truy cập dự định và kết thúc bằng cách nhấp vào nội dung khác mà họ không có ý định tải trang.
Một cách khá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 CSS trên hình ảnh. Điều này cũng có ảnh hưởng tương tự đến kích thước của một phần tử, tương tự như các thuộc tính width và height, vì 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à điều này có thể dẫn đến tỷ lệ khung hình được sử dụng khác với hình ảnh được cung cấp. Vì vậy, 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 đổ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 bỏ lỡ bất kỳ điều gì.