Nếu hình ảnh được kết xuất có tỷ lệ khung hình khác biệt đáng kể so với tỷ lệ khung hình trong tệp nguồn (tỷ lệ khung hình tự nhiên), thì hình ảnh được kết xuất có thể bị méo, có thể gây ra trải nghiệm khó chịu cho người dùng.
Cách quy trình kiểm tra tỷ lệ khung hình của hình ảnh Lighthouse không thành công
Lighthouse sẽ gắn cờ mọi hình ảnh có kích thước kết xuất lớn hơn vài pixel so với kích thước dự kiến khi được kết xuất ở tỷ lệ tự nhiên:
Có 2 nguyên nhân phổ biến khiến tỷ lệ khung hình của hình ảnh không chính xác:
- Hình ảnh được đặt với các giá trị chiều rộng và chiều cao rõ ràng khác với kích thước của hình ảnh nguồn.
- Hình ảnh được đặt chiều rộng và chiều cao dưới dạng phần trăm của vùng chứa có kích thước thay đổi.
Đảm bảo hình ảnh hiển thị với tỷ lệ khung hình chính xác
Sử dụng CDN hình ảnh
CDN hình ảnh có thể giúp bạn dễ dàng tự động hoá quá trình tạo phiên bản hình ảnh có kích thước khác nhau. Hãy xem bài viết Sử dụng CDN hình ảnh để tối ưu hoá hình ảnh để biết thông tin tổng quan và Cách cài đặt CDN hình ảnh Thumbor để tham khảo lớp học lập trình thực hành.
Kiểm tra CSS ảnh hưởng đến tỷ lệ khung hình của hình ảnh
Nếu bạn gặp sự cố khi tìm CSS gây ra tỷ lệ khung hình không chính xác, Công cụ của Chrome cho nhà phát triển có thể hiển thị cho bạn các nội dung khai báo CSS ảnh hưởng đến một hình ảnh nhất định. Hãy xem trang Chỉ xem CSS thực sự áp dụng cho một phần tử của Google để biết thêm thông tin.
Kiểm tra các thuộc tính width và height của hình ảnh trong HTML
Khi có thể, bạn nên chỉ định các thuộc tính width và height của từng hình ảnh trong HTML để trình duyệt có thể phân bổ không gian cho hình ảnh.
Phương pháp này giúp đảm bảo rằng nội dung bên dưới hình ảnh không thay đổi sau khi hình ảnh được tải.
Tuy nhiên, việc chỉ định kích thước hình ảnh trong HTML có thể khó khăn nếu bạn đang làm việc với hình ảnh thích ứng vì không có cách nào để biết chiều rộng và chiều cao cho đến khi bạn biết kích thước khung nhìn. Hãy cân nhắc sử dụng thư viện Tỷ lệ khung hình CSS hoặc hộp tỷ lệ khung hình để giúp duy trì tỷ lệ khung hình cho hình ảnh thích ứng.
Cuối cùng, hãy xem bài đăng Phân phát hình ảnh với kích thước chính xác để tìm hiểu cách phân phát hình ảnh có kích thước phù hợp cho thiết bị của mỗi người dùng.