Ngày xuất bản: 8 tháng 10 năm 2025
Việc giảm thời gian tải hình ảnh xuống có thể cải thiện thời gian tải trang và LCP được cảm nhận.
Cách thông tin chi tiết không thành công
Thông tin chi tiết này sẽ làm nổi bật những hình ảnh có kích thước tải xuống quá lớn. Mức tiết kiệm ước tính theo byte được tính bằng cách so sánh kích thước tải xuống của hình ảnh với tỷ lệ byte/pixel hiệu quả cho định dạng hình ảnh.
Cách cải thiện thời gian tải hình ảnh xuống
Thông tin chi tiết này đề xuất một số chiến lược để cải thiện thời gian tải hình ảnh xuống, tuỳ thuộc vào kích thước hiển thị và định dạng tệp của hình ảnh. Việc triển khai CDN hình ảnh có thể cực kỳ hữu ích cho tất cả các chiến lược này.
Tăng hệ số nén hình ảnh
Hầu hết các định dạng hình ảnh đều hỗ trợ một mức nén có thể được điều chỉnh để cải thiện kích thước tệp hình ảnh nhưng chất lượng hình ảnh sẽ giảm. Bạn có thể sử dụng các công cụ hình ảnh như ImageOptim, Squoosh và Imagemin để tối ưu hoá hệ số nén hình ảnh.
Sử dụng các định dạng hình ảnh hiện đại
AVIF và WebP là những định dạng hình ảnh có đặc điểm nén và chất lượng vượt trội so với các định dạng JPEG và PNG cũ. Mã hoá hình ảnh ở những định dạng mới hơn này là một chiến lược hiệu quả để giảm kích thước tải xuống của hình ảnh.
AVIF được hỗ trợ trong phiên bản mới nhất của tất cả các trình duyệt chính và có kích thước tệp nhỏ hơn so với các định dạng khác có cùng chế độ cài đặt chất lượng. Hãy xem Lớp học lập trình về việc phân phát hình ảnh AVIF để biết thêm thông tin về AVIF.
WebP được tất cả các trình duyệt chính hỗ trợ và cung cấp khả năng nén có tổn hao và không tổn hao tốt hơn cho hình ảnh trên web. Hãy xem phần Sử dụng hình ảnh WebP để biết thêm thông tin về WebP.
Sử dụng định dạng video cho nội dung động
Ảnh GIF lớn không có hiệu quả trong việc phân phối nội dung động so với video. Hãy cân nhắc sử dụng video MPEG4/WebM cho ảnh động và PNG/WebP cho ảnh tĩnh thay vì ảnh GIF để tiết kiệm dữ liệu mạng.
Hãy xem bài viết Thay thế ảnh GIF động bằng video để tải trang nhanh hơn để tìm hiểu cách thay thế ảnh GIF bằng video.
Phân phát hình ảnh có kích thước thích ứng
Tốt nhất là trang của bạn không bao giờ được phân phát những hình ảnh lớn hơn phiên bản được hiển thị trên màn hình của người dùng. Mọi thứ lớn hơn kích thước đó chỉ dẫn đến việc lãng phí byte và làm chậm thời gian tải trang.
Một chiến lược là sử dụng các định dạng hình ảnh dựa trên vectơ, chẳng hạn như SVG. Với một lượng mã hữu hạn, hình ảnh SVG có thể điều chỉnh tỷ lệ thành bất kỳ kích thước nào. Hãy xem phần Thay thế các biểu tượng phức tạp bằng SVG để tìm hiểu thêm.
Nếu không thể sử dụng hình ảnh dựa trên vectơ, thì tốt nhất là bạn nên phân phát hình ảnh "thích ứng". Với hình ảnh thích ứng, bạn sẽ tạo nhiều phiên bản của mỗi hình ảnh, sau đó chỉ định phiên bản cần sử dụng trong HTML hoặc CSS bằng cách sử dụng truy vấn phương tiện, kích thước khung hiển thị, v.v.
Ví dụ: phần tử <img> có các thuộc tính srcset và sizes có thể chỉ định URL hình ảnh cho nhiều kích thước:
Nếu cần thay đổi hoàn toàn hình ảnh, bạn có thể sử dụng phần tử <picture>:
Hãy xem phần Hình ảnh thích ứng và Phần tử hình ảnh để tìm hiểu thêm.
Hướng dẫn cụ thể theo ngăn xếp
Thông tin chi tiết này cũng cung cấp hướng dẫn cụ thể theo ngăn xếp cho những trang sử dụng các công nghệ sau:
AMP
- Cân nhắc hiển thị tất cả các thành phần
amp-imgở định dạng WebP, đồng thời chỉ định phương án dự phòng thích hợp cho các trình duyệt khác. - Đối với nội dung động, hãy sử dụng
amp-animđể giảm thiểu mức sử dụng CPU khi nội dung nằm ngoài màn hình.
Drupal
- Hãy cân nhắc sử dụng một mô-đun tự động tối ưu hoá và giảm kích thước của hình ảnh tải lên qua trang web trong khi vẫn giữ được chất lượng.
- Đảm bảo bạn đang sử dụng Kiểu hình ảnh thích ứng tích hợp do Drupal cung cấp cho tất cả hình ảnh hiển thị trên trang web.
Joomla
Hãy cân nhắc sử dụng một trình bổ trợ hoặc dịch vụ tự động chuyển đổi hình ảnh đã tải lên sang định dạng tối ưu.
Magento
Hãy cân nhắc sử dụng tiện ích Magento của bên thứ ba để tối ưu hoá hình ảnh.
WordPress
Hãy cân nhắc sử dụng một trình bổ trợ tối ưu hoá hình ảnh của WordPress có khả năng nén hình ảnh mà vẫn giữ được chất lượng.