Danh sách kiểm tra tối ưu hóa hình ảnh: Mọi bước để có hình ảnh web nhanh chóng

Last updated: June 28, 2026. Chạy lại danh sách kiểm tra này trước mỗi lần xuất bản để có kết quả nhất quán.

Tối ưu hóa hình ảnh là một chuỗi các bước, chứ không phải chỉ là một bước đơn lẻ. Bỏ qua bất kỳ giai đoạn nào sẽ khiến kết quả hoặc chậm chạp hoặc bị mờ. Danh sách kiểm tra này đi qua mọi giai đoạn — lựa chọn định dạng, thay đổi kích thước, nén, phân phối đáp ứng (responsive delivery), lazy loading và thiết lập CDN — theo đúng thứ tự bạn thực hiện chúng, để bạn có thể chạy lại nó trước mỗi lần xuất bản và biết rằng hình ảnh sẽ tải nhanh và sắc nét.

Trả lời nhanh: một quy trình tối ưu hóa hình ảnh đầy đủ bao gồm những gì?

Một quy trình hoàn chỉnh nghĩa là chọn định dạng phù hợp (WebP cho ảnh chụp, SVG cho vector, PNG cho độ trong suốt), thay đổi kích thước theo kích thước hiển thị, nén về dung lượng file mục tiêu, phục vụ các biến thể đáp ứng với srcset, lazy-loading hình ảnh dưới phần cuộn (below-the-fold), và phân phối từ CDN. Bỏ qua bất kỳ giai đoạn nào cũng khiến hiệu suất bị bỏ lỡ — một hình ảnh chưa được nén sẽ chậm, một hình ảnh quá khổ sẽ lãng phí bytes, và một hình ảnh không có lazy loading sẽ làm trì hoãn việc hiển thị ban đầu. Hãy chạy toàn bộ danh sách kiểm tra thay vì chỉ chọn các giai đoạn riêng lẻ.

Tại sao nên chạy danh sách kiểm tra thay vì tối ưu hóa ngẫu hứng?

Tối ưu hóa hình ảnh có nhiều bước nhỏ, và quên đi một bước sẽ làm mất hiệu quả của những bước khác. Một danh sách kiểm tra biến quy trình đa bước dễ quên thành thói quen lặp lại, tạo ra kết quả nhất quán.

• Mỗi giai đoạn giải quyết một yếu tố hiệu suất riêng biệt.
• Bỏ qua một giai đoạn sẽ khiến yếu tố đó không được xử lý.
• Các giai đoạn đủ độc lập để có thể kiểm tra theo danh sách.

Giai đoạn 1: Chọn định dạng phù hợp

Định dạng là quyết định đầu tiên vì nó giới hạn mọi thứ sau này. Hãy khớp định dạng với nội dung hình ảnh.

• WebP — mặc định cho ảnh chụp trên các trình duyệt hiện đại. Nhỏ hơn JPEG ở cùng chất lượng.
• AVIF — thậm chí còn nhỏ hơn WebP, và đang có sự hỗ trợ ngày càng tăng. Sử dụng kèm fallback là WebP hoặc JPEG.
• SVG — dành cho logo, icon và đồ họa vector. Có thể mở rộng vô hạn, file rất nhỏ.
• PNG — dành cho hình ảnh cần độ trong suốt và chất lượng không mất mát (lossless).
• JPEG — fallback phổ quát cho ảnh chụp khi các định dạng hiện đại không được hỗ trợ.

Hướng dẫn so sánh định dạng và hướng dẫn AVIF vs WebP đề cập sâu về sự đánh đổi này. Hãy chọn định dạng mang lại file nhỏ nhất với chất lượng chấp nhận được cho nội dung.

Giai đoạn 2: Thay đổi kích thước theo kích thước hiển thị

Không bao giờ phục vụ một hình ảnh lớn hơn kích thước nó hiển thị. Một bức ảnh 4000-pixel trong ô 600-pixel sẽ lãng phí băng thông và làm chậm trang. Thay đổi kích thước về kích thước lớn nhất mà hình ảnh sẽ hiển thị, có tính đến retina (2x).

Thay đổi kích thước trước khi nén là quan trọng vì việc nén hoạt động trên số lượng pixel — ít pixel hơn sẽ nén thành bytes ít hơn. Hướng dẫn thay đổi kích thước đề cập cách thực hiện điều này mà không làm mất chất lượng.

Giai đoạn 3: Nén về dung lượng file mục tiêu

Sau khi thay đổi kích thước, hãy nén để giảm bytes. Mục tiêu là file nhỏ nhất mà không bị mất chất lượng hiển thị.

• Ảnh chụp: WebP hoặc JPEG ở chất lượng 80.
• Đồ họa màu phẳng: PNG hoặc WebP lossless.
• Kiểm tra ở mức zoom 100% để xác nhận không có hiện tượng giả (artifacts) nào.
• Mục tiêu là ảnh hero dưới 200 KB và ảnh nội dung dưới 100 KB.

Hướng dẫn nén đề cập các kỹ thuật và cài đặt chất lượng.

Giai đoạn 4: Phục vụ các biến thể đáp ứng (responsive variants)

Các màn hình khác nhau cần kích thước ảnh khác nhau. Hãy phục vụ chúng bằng srcset để mỗi thiết bị tải xuống đúng file thay vì một kích thước chung cho tất cả.

• Tạo các biến thể 1x, 2x và 3x cho màn hình retina.
• Sử dụng bộ mô tả chiều rộng (400w, 800w) với sizes cho bố cục đáp ứng.
• Để trình duyệt tự chọn file phù hợp.
• Hướng dẫn ảnh đáp ứng đề cập đến cú pháp đánh dấu (markup).

Giai đoạn 5: Lazy-load hình ảnh dưới phần cuộn

Các hình ảnh nằm dưới phần cuộn không nên tải cho đến khi người dùng cuộn tới chúng. Điều này giải phóng băng thông cho việc hiển thị ban đầu và cải thiện chỉ số Largest Contentful Paint.

• Thêm loading="lazy" vào các hình ảnh dưới phần cuộn.
• Giữ hình ảnh hero được tải ngay lập tức (eager-loaded) để yếu tố LCP tải nhanh.
• Hướng dẫn lazy loading đề cập đến việc triển khai.

Giai đoạn 6: Phân phối từ CDN

Phục vụ hình ảnh từ một mạng phân phối nội dung (CDN) để chúng tải từ vị trí biên (edge location) gần người dùng. Một CDN cắt giảm độ trễ và giảm tải cho máy chủ gốc (origin server), điều này quan trọng nhất đối với các trang web có lượng khán giả trải rộng về mặt địa lý — nếu không, một người dùng ở lục địa khác sẽ phải chờ đợi mọi hình ảnh vượt qua khoảng cách đó từ nguồn của bạn. Hướng dẫn CDN đề cập đến thiết lập, bao gồm cả các tính năng chuyển đổi (transformation features) cho phép CDN thay đổi kích thước và định dạng theo thời gian thực, và hướng dẫn Core Web Vitals liên kết việc phân phối hình ảnh nhanh với các chỉ số ảnh hưởng đến xếp hạng.

CDN cũng hấp thụ các đợt tăng lưu lượng truy cập đột biến (traffic spikes). Khi một trang trở nên lan truyền hoặc một chiến dịch gửi một loạt người truy cập, bộ nhớ cache biên sẽ phục vụ hình ảnh thay vì nguồn gốc, nhờ đó trang web vẫn giữ được tốc độ nhanh khi chịu tải mà lẽ ra sẽ quá tải một máy chủ đơn lẻ. Đối với các trang web mà khả năng hoạt động (uptime) dưới lưu lượng quan trọng như thời gian tải trung bình, sự kiên cường này cũng có giá trị bằng việc giảm độ trễ.

Các lỗi tối ưu hóa phổ biến

Ngay cả với danh sách kiểm tra, một vài lỗi vẫn tái diễn và làm mất đi công sức đã bỏ ra. Biết chúng sẽ giúp tăng tốc bước xác minh.

• Nén trước khi thay đổi kích thước — lãng phí công sức vào các pixel bị loại bỏ. Luôn luôn thay đổi kích thước trước.
• Phục vụ một kích thước cho tất cả thiết bị — điện thoại tải xuống file kích thước máy tính để bàn. Hãy sử dụng srcset.
• Lazy-loading hình ảnh hero — làm chậm yếu tố LCP. Giữ hình ảnh trên phần cuộn (above-the-fold) được tải ngay lập tức.
• Quên thuộc tính width và height — gây ra dịch chuyển bố cục (layout shift) khi hình ảnh tải. Luôn luôn bao gồm chúng.
• Sử dụng PNG cho ảnh chụp — làm phình to file. Hãy sử dụng WebP hoặc JPEG cho nội dung ảnh chụp.

Xác minh: liệu tối ưu hóa có hiệu quả không?

Sau khi chạy danh sách kiểm tra, hãy xác minh kết quả bằng phép đo thay vì đoán mò. Các công cụ xác nhận xem hình ảnh có thực sự tải nhanh hay không, và đo lường là cách duy nhất để biết việc tối ưu hóa đã thành công — kiểm tra trực quan không tiết lộ kích thước file hoặc thứ tự tải. Hãy chạy các kiểm tra này trên cả kết nối băng thông rộng và kết nối di động, vì tối ưu hóa trông ổn trên broadband vẫn có thể gặp khó khăn trên dữ liệu di động.

1. Chạy Google PageSpeed Insights và kiểm tra các cơ hội liên quan đến hình ảnh.
2. Xác nhận yếu tố LCP tải trong vòng 2.5 giây.
3. Kiểm tra tab network để xác nhận file kích thước phù hợp được tải cho từng thiết bị.
4. Xác minh rằng hình ảnh lazy-loaded trì hoãn cho đến khi cuộn.

Hướng dẫn đo lường hiệu suất web.dev tài liệu hóa cách PageSpeed tính điểm các trang, và hướng dẫn hiệu suất Mozilla đề cập sâu về các chỉ số này. Một trang vượt qua các kiểm tra này sau danh sách kiểm tra có hình ảnh thực sự nhanh — chứ không phải là những hình ảnh trông có vẻ được tối ưu hóa. Đối với ngữ cảnh SEO rộng hơn, hướng dẫn SEO hình ảnh liên kết những cải tiến hiệu suất này với việc xếp hạng tìm kiếm.

Câu hỏi thường gặp

Một quy trình tối ưu hóa hình ảnh đầy đủ bao gồm những gì?

Chọn định dạng phù hợp, thay đổi kích thước về kích thước hiển thị, nén về dung lượng file mục tiêu, phục vụ các biến thể đáp ứng bằng srcset, lazy-loading dưới phần cuộn, và lưu vào bộ nhớ cache tại CDN. Bỏ qua bất kỳ giai đoạn nào sẽ khiến bytes hoặc chất lượng bị bỏ lỡ. Danh sách kiểm tra tồn tại để không bỏ sót bất kỳ giai đoạn nào.

Tại sao nên chạy danh sách kiểm tra thay vì tối ưu hóa ngẫu hứng?

Vì tối ưu hóa ngẫu hứng bỏ sót các giai đoạn — một nhà phát triển nén nhưng quên thay đổi kích thước, hoặc thêm srcset nhưng quên lazy-loading. Danh sách kiểm tra đảm bảo mọi hình ảnh đều trải qua mọi giai đoạn, một cách nhất quán, trên toàn bộ trang web. Tính nhất quán là yếu tố thúc đẩy Core Web Vitals ở quy mô lớn.

Chiến thắng tối ưu hóa hình ảnh lớn nhất là gì?

Thay đổi kích thước về kích thước hiển thị. Một bức ảnh camera 6000px được phục vụ ở 800px là sự lãng phí lớn nhất trên hầu hết các trang web. Hãy thay đổi kích thước trước; mọi thứ khác đều xây dựng dựa trên một cơ sở có kích thước chính xác.

Làm cách nào để tôi phục vụ các biến thể đáp ứng?

Tạo mỗi hình ảnh ở các kích thước mà điểm ngắt (breakpoints) của bạn cần, sau đó sử dụng srcset và sizes để cho phép trình duyệt chọn đúng file theo viewport. Trình duyệt chỉ tải xuống biến thể nó cần, tiết kiệm bytes trên màn hình nhỏ. Xem hướng dẫn ảnh đáp ứng.

Tôi nên tối ưu hóa lại hình ảnh bao lâu một lần?

Bất cứ khi nào bạn thêm hình ảnh mới và kiểm tra bộ hình ảnh hiện có khi Core Web Vitals giảm. Các hình ảnh cũ được tối ưu hóa nhiều năm trước có thể là JPEG trong khi WebP sẽ nhỏ hơn. Việc kiểm toán định kỳ giúp phát hiện sự sai lệch về định dạng và nén.

Làm cách nào để tôi kiểm toán hình ảnh của một trang web hiện có?

Chạy crawl (Lighthouse, hoặc công cụ như Screaming Frog) để liệt kê mọi hình ảnh cùng kích thước và chiều rộng của chúng, sau đó đánh dấu bất kỳ hình ảnh nào quá khổ so với ô hiển thị, được phục vụ dưới dạng JPEG trong khi WebP sẽ nhỏ hơn, hoặc thiếu thuộc tính width/height. Sửa các lỗi lớn nhất trước — một vài hình ảnh khổng lồ thường chiếm phần lớn trọng lượng trang. Chạy lại kiểm toán sau khi sửa để xác nhận sự cải thiện.