Tối ưu kích thước ảnh để tăng tốc website

Khu vực cơ hội của Lighthouse báo cáo danh sách tất cả các ảnh trên trang của bạn không có kích thước ảnh tối ưu, cùng với tiềm năng tiết kiệm tính theo kilobyte (KB). Thay đổi kích cỡ các ảnh này giúp bạn tiết kiệm dữ liệu và cải thiện thời gian tải trang.

kích cỡ ảnh phù hợp

Cách Lighthouse tìm ra và đánh giá các ảnh quá cỡ

Với từng ảnh trên trang, Lighthouse so sánh kích cỡ của ảnh đã được kết xuất (render) so với kích cỡ ảnh thực tế. Kích cỡ đã được kết xuất cũng được tính toán theo tỷ lệ pixel của thiết bị. Nếu kích cỡ đã được kết xuất nhỏ hơn ít nhất 25 KB so với kích thước thực tế thì hình ảnh sẽ không vượt qua được bài kiểm tra của Lighthouse (và bị gắn cờ cảnh báo).

Chiến lược giúp bạn tạo các ảnh có kích cỡ tối ưu

Lý tưởng nhất, trang của bạn không nên phục vụ các ảnh lớn hơn phiên bản mà đã được kết xuất trên màn hình của người dùng. Bất cứ ảnh nào lớn hơn sẽ đem lại hậu quả là lãng phí dữ liệu và làm chậm thời gian tải trang.

Chiến lược chính để phục vụ các ảnh có kích thước tối ưu được gọi là “ảnh đáp ứng”. Với ảnh đáp ứng, bạn cần phải tạo ra nhiều phiên bản của hình ảnh, rồi sau đó chỉ định cụ thể phiên bản sử dụng trong HTML hoặc CSS sử dụng các truy vấn media, kích thước của khung nhìn trình duyệt (viewport dimensions), và nhiều cái khác nữa. Bạn có thể tìm hiểu thêm cách phục vụ các ảnh đáp ứng ở bài viết khác.

Một chiến lược nữa là sử dụng định dạng ảnh kiểu vector, chẳng hạn như SVG. Với số lượng mã có hạn, ảnh SVG có thể mở rộng ra bất cứ kích cỡ nào. Bạn có thể tìm hiểu thêm bài viết thay thế các icon phức tạp bằng SVG.

Các công cụ như gulp-responsive hoặc responsive-images-generator có thể giúp bạn tự động chuyển sang các định dạng ảnh khác nhau. Ngoài ra có nhiều dịch vụ CDN giúp tạo ra nhiều phiên bản ảnh, hoặc khi bạn tải lên ảnh, hoặc yêu cầu nó từ trang của bạn.

(Dịch từ bài viết Properly size images, trang: web[.]dev)

Leave a Comment