Ai cũng từng gặp phải tình huống này: bạn quên giảm tỷ lệ hình ảnh trước khi thêm hình ảnh đó vào trang. Hình ảnh trông ổn, nhưng đang 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 những 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à xem kết quả của hoạt động kiểm tra Điều chỉnh kích thước hình ảnh một cách phù hợp. Quy trình kiểm tra 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 phù hợp
Việc điều chỉnh kích thước hình ảnh có thể phức tạp hơn bạn tưởng. Vì lý do này, chúng tôi đã cung cấp hai phương pháp: "tốt" và "tốt hơn". Cả hai cách này đều sẽ cải thiện hiệu suất, nhưng cách "tốt hơn" có thể mất nhiều thời gian hơn một chút để hiểu và triển khai. Tuy nhiên, việc này cũng sẽ giúp bạn cải thiện hiệu suất đáng kể hơn. 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ề các đơn vị CSS
Có 2 loại đơn vị CSS để chỉ đị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ị. Ví dụ về các đơn vị CSS tuyệt đối 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ẽ xuất hiện ở nhiều kích thước, tuỳ thuộc vào độ dài tương đối được chỉ định. Ví dụ về các đơn vị CSS tương đối, hợp lệ: %, vw (1vw = 1% chiều rộng của khung hiển thị), em (1,5 em = 1,5 lần kích thước phông 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: Thay đổi kích thước hình ảnh thành kích thước phù hợp với mọi thiết bị.
Bạn nên kiểm tra dữ liệu phân tích (ví dụ: Google Analytics) để biết người dùng thường dùng kích thước hiển thị nào. 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 phù hợp với kích thước hiển thị.
Bạn có thể dùng bảng điều khiển Elements (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 một hình ảnh.
Phương pháp "Chất lượng hơn"
Đối với những hình ảnh có cả kích thước tuyệt đối và tương đối, hãy sử dụng 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 việc các màn hình khác nhau có mật độ pixel khác nhau. Trong điều kiện mọi thứ khác đều như nhau, màn hình có mật độ pixel cao sẽ 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 hình ảnh sắc nét nhất có thể, bất kể mật độ pixel của thiết bị họ dùng.
Các kỹ thuật về hình ảnh thích ứng giúp bạn thực hiện đ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 tất cả các thiết bị sẽ có kích thước quá lớn đối với các thiết bị nhỏ hơn. Các kỹ thuật về hình ảnh thích ứng, cụ thể là srcset và sizes, 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.
Đổi kích thước hình ảnh
Bất kể bạn chọn phương pháp nào, bạn có thể thấy việc sử dụng ImageMagick để đổi kích thước hình ảnh là hữu ích. 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 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 ban đầu:
convert flower.jpg -resize 25% flower_small.jpg
Điều chỉnh tỷ lệ hình ảnh cho vừa với kích thước "rộng 200 pixel và cao 100 pixel":
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Nếu cần đổi kích thước nhiều hình ảnh, bạn có thể thấy việc sử dụng một tập lệnh hoặc dịch vụ để tự động hoá quy trình này sẽ thuận tiện hơn. Bạn có thể tìm hiểu thêm về vấn đề này trong hướng dẫn Hình ảnh thích ứng.
Tránh các thay đổi về 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 bạn cần lưu ý rằng việc dành không gian phù hợp 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ố Mức thay đổi bố cục tích luỹ 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 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 hình ảnh sẽ chiếm bao nhiêu dung lượng cho đến khi hình ảnh được tải. Điều này sẽ gây ra sự thay đổi bố cục trong tài liệu, có thể khiến người dùng khó chịu khi nội dung di chuyển sau khi họ bắt đầu sử dụng. Điều này có thể khiến người dùng bị mất vị trí khi đọc hoặc "bỏ lỡ" mục tiêu nhấn dự kiến và cuối cùng nhấp vào một thứ khác mà họ không muốn trong quá trình tải trang.
Một cách khác để cung cấp chiều rộng và chiều cao một cách rõ ràng là sử dụng thuộc tính CSS aspect-ratio trên hình ảnh. Điều này có tác động tương tự đến kích thước của một phần tử như các thuộc tính width và height theo nghĩa là vùng chứa sẽ duy trì tỷ lệ khung hình nhất quán. Tuy nhiên, điểm khác biệt là điều này có thể dẫn đến việc sử dụng một tỷ lệ khung hình khác so với tỷ lệ khung hình được cung cấp trong hình ảnh. 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ị biến dạng trong khung hiển thị 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 bỏ lỡ bất kỳ hình ảnh nào.