🗜️
← Quay lại hướng dẫn

Cách Tối Ưu Hóa Hình Ảnh Cho Hiệu Suất Web

· Thẻ: image-optimization, web-performance, core-web-vitals, lcp, page-speed, seo

Cách Tối Ưu Hóa Hình Ảnh Cho Hiệu Suất Web

Hình ảnh chiếm từ 50 đến 60 phần trăm tổng số byte được tải xuống của một trang web điển hình. Mỗi hình ảnh chưa được tối ưu hóa làm tăng thêm vài giây vào thời gian tải của bạn, làm tăng tỷ lệ thoát trang và làm tổn hại đến thứ hạng công cụ tìm kiếm của bạn. Core Web Vitals của Google — cụ thể là Largest Contentful Paint (LCP) — trực tiếp đo lường hiệu suất tải hình ảnh, khiến việc tối ưu hóa hình ảnh trở thành một trong những thay đổi có tác động lớn nhất mà bạn có thể thực hiện cho trang web của mình.

Hướng dẫn này bao gồm một chiến lược tối ưu hóa hình ảnh hoàn chỉnh, từ các nguyên tắc nén cơ bản đến các kỹ thuật phân phối nâng cao.

1. Nén Mọi Hình Ảnh Trước Khi Xuất Bản

Đừng bao giờ tải lên một hình ảnh thô trực tiếp từ máy ảnh, điện thoại hoặc công cụ thiết kế của bạn. Nén nên là bước đầu tiên trong quy trình xuất bản của bạn.

Các nguyên tắc chính:

  • Ảnh chụp chịu được nén mất dữ liệu mạnh. Bắt đầu ở chất lượng 80 cho JPEG và WebP, sau đó điều chỉnh giảm dần nếu mục tiêu kích thước tệp yêu cầu.
  • Ảnh chụp màn hình, logo và đồ họa được hưởng lợi từ nén không mất dữ liệu. PNG và WebP không mất dữ liệu giữ nguyên các cạnh sắc nét và văn bản mà nén mất dữ liệu sẽ làm mờ.
  • AVIF mang lại tỷ lệ nén tốt nhất nhưng yêu cầu thời gian mã hóa nhiều hơn. Hãy sử dụng nó cho các hình ảnh được tải xuống thường xuyên và hiếm khi cập nhật.
  • Nén ở định dạng gốc để tránh mất chất lượng tích lũy từ các chuyển đổi định dạng không cần thiết.

Khoản tiết kiệm dự kiến:

Một quy trình làm việc điển hình nén hình ảnh trước khi tải lên giúp giảm tổng trọng lượng hình ảnh từ 40 đến 80 phần trăm với chất lượng bị suy giảm tối thiểu có thể nhận thấy.

2. Phân Phối Kích Thước Phù Hợp

Phân phối một bức ảnh rộng 4000 điểm ảnh bên trong một vùng chứa rộng 300 điểm ảnh là sai lầm hiệu suất phổ biến nhất trên web. Trình duyệt tải xuống tất cả 4000 điểm ảnh rồi thu nhỏ chúng lại, lãng phí băng thông và bộ nhớ.

Tạo nhiều biến thể kích thước:

  • Rộng 320 đến 480 điểm ảnh cho màn hình di động
  • Rộng 768 đến 1024 điểm ảnh cho máy tính bảng
  • Rộng 1200 đến 1920 điểm ảnh cho màn hình máy tính để bàn
  • Rộng 2560 điểm ảnh cho màn hình retina mật độ cao (2x)

Khớp biến thể lớn nhất với chiều rộng tối đa mà hình ảnh sẽ được hiển thị trong bố cục của bạn, nhân với 2 cho các màn hình có độ phân giải cao (high-DPI).

3. Sử Dụng Hình Ảnh Phản Hồi Với Srcset

Các thuộc tính srcset và sizes trong HTML cho trình duyệt biết kích thước hình ảnh nào cần tải xuống dựa trên chiều rộng khung nhìn và tỷ lệ điểm ảnh của thiết bị của người dùng.

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Descriptive text for accessibility and SEO"
/>

Chỉ riêng mẫu này có thể cắt giảm từ 40 đến 60 phần trăm băng thông hình ảnh trên các thiết bị di động mà không có bất kỳ sự khác biệt về chất lượng nhìn thấy được.

4. Tối Ưu Hóa Cho Largest Contentful Paint (LCP)

LCP đo lường thời gian cần thiết để phần tử lớn nhất có thể nhìn thấy — thường là hình ảnh hero — hiển thị. Google coi LCP từ 2,5 giây trở xuống là tốt.

Để tối ưu hóa LCP cho hình ảnh:

  • Tải trước hình ảnh hero để trình duyệt phát hiện ra nó sớm. Thêm <link rel="preload" as="image" href="hero.webp"> vào phần đầu tài liệu của bạn.
  • Nén hình ảnh hero một cách mạnh mẽ — nó thường là tài sản đầu tiên và lớn nhất mà trình duyệt tải xuống.
  • Phân phối WebP hoặc AVIF cho hình ảnh hero với dự phòng JPEG.
  • Định cỡ hình ảnh hero chính xác. Đừng phân phối một hình ảnh 4000 điểm ảnh trong một vị trí hero 1200 điểm ảnh.
  • Đừng tải lười hình ảnh hero hoặc bất kỳ hình ảnh nào ở trên phần gấp màn hình. Tải lười làm trì hoãn việc tải xuống, gây tổn hại cho LCP.

5. Bật Tải Lười Cho Các Hình Ảnh Dưới Phần Gấp Màn Hình

Các hình ảnh không nhìn thấy được trên màn hình ban đầu không cần phải tải ngay lập tức. Thuộc tính loading="lazy" bảo trình duyệt hoãn việc tải hình ảnh cho đến khi hình ảnh gần đi vào khung nhìn.

<img src="gallery-photo.jpg" loading="lazy" alt="Gallery image" />

Tải lười giảm trọng lượng trang ban đầu từ 30 đến 50 phần trăm trên các trang có nhiều hình ảnh. Kết hợp với nén, tác động mang tính chuyển đổi.

6. Loại Bỏ Siêu Dữ Liệu Hình Ảnh

Dữ liệu EXIF — cài đặt máy ảnh, tọa độ GPS, dấu thời gian — thêm các byte không cần thiết vào mọi hình ảnh. Việc loại bỏ siêu dữ liệu thường tiết kiệm từ 5 đến 15 phần trăm kích thước tệp mà không có bất kỳ thay đổi hình ảnh nào. Hãy đưa việc loại bỏ siêu dữ liệu thành một bước tiêu chuẩn trong quy trình nén của bạn.

7. Sử Dụng Mạng Phân Phối Nội Dung (CDN)

Một CDN phân phối hình ảnh của bạn trên các máy chủ trên toàn thế giới, giảm khoảng cách vật lý giữa người dùng và hình ảnh. Điều này cải thiện Time to First Byte cho các yêu cầu hình ảnh.

Một số CDN cũng cung cấp chuyển đổi hình ảnh tức thì:

  • Đàm phán định dạng tự động (phân phối WebP hoặc AVIF khi được hỗ trợ)
  • Thay đổi kích thước động dựa trên thiết bị và khung nhìn
  • Điều chỉnh nén theo thời gian thực

Nếu không thể dùng một CDN chuyên dụng, tối thiểu hãy sử dụng HTTP/2 hoặc HTTP/3 để cho phép tải xuống nhiều hình ảnh trong một kết nối duy nhất.

8. Cân Nhắc Hiệu Suất Giải Mã Hình Ảnh

Các hình ảnh lớn không chỉ mất thời gian để tải xuống mà còn mất thời gian để giải mã. Trình duyệt phải giải nén dữ liệu JPEG, PNG, WebP hoặc AVIF trước khi hiển thị nó. JPEG và WebP giải mã nhanh trên hầu hết các thiết bị, trong khi giải mã AVIF tốn nhiều tài nguyên tính toán hơn — một điều cần cân nhắc cho các thiết bị di động cấp thấp.

Sử dụng thuộc tính decoding="async" trên các hình ảnh không quan trọng để cho phép trình duyệt giải mã chúng mà không chặn nội dung khác:

<img src="photo.jpg" decoding="async" loading="lazy" alt="Description" />

Xây Dựng Quy Trình Tối Ưu Hóa Của Bạn

Một đường dẫn tối ưu hóa hình ảnh từ đầu đến cuối trông như thế này:

  1. Nén hình ảnh ở định dạng gốc của chúng bằng một công cụ phù hợp với chất lượng.
  2. Loại bỏ siêu dữ liệu trong quá trình nén.
  3. Thay đổi kích thước về kích thước hiển thị cần thiết, tạo ra nhiều biến thể.
  4. Triển khai srcset và sizes trong các mẫu HTML của bạn.
  5. Tải trước hình ảnh hero, tải lười mọi thứ dưới phần gấp màn hình.
  6. Phân phối từ một CDN cho hiệu suất toàn cầu.
  7. Đo lường LCP và tổng trọng lượng hình ảnh bằng Lighthouse hoặc PageSpeed Insights.
  8. Cải tiến cài đặt chất lượng cho đến khi bạn đạt được ngân sách hiệu suất của mình.

Hãy bắt đầu tối ưu hóa hình ảnh của bạn ngay hôm nay với trình nén ảnh trực tuyến miễn phí của chúng tôi. Tải lên hình ảnh ở định dạng PNG, JPEG, WebP hoặc AVIF và tải xuống các phiên bản đã nén sẵn sàng cho sản xuất — không chuyển đổi định dạng, không thỏa hiệp về chất lượng.