Ảnh thường là thứ nặng nhất trên một trang, khiến chúng thành đòn bẩy tốc độ lớn nhất bạn kiểm soát. Chỉnh đúng kích thước và dung lượng file của chúng và trang cảm giác tức thì. Chỉnh sai và bạn trượt Core Web Vitals dù mã của bạn sạch đến đâu. Đây là các mục tiêu và quy trình để đạt được.
Mục tiêu về kích thước
Khớp kích thước pixel của ảnh với nơi nó thực sự xuất hiện. Hướng dẫn ước lượng:
- Ảnh chủ đạo toàn chiều rộng: rộng 1600–2000 px bao được hầu hết bố cục desktop. Rộng hơn hiếm khi giúp ích mà tốn rất nhiều byte.
- Ảnh trong nội dung: chiều rộng cột nội dung của bạn, thường là 800–1200 px.
- Ảnh thu nhỏ / thẻ: 300–500 px.
- Ảnh đại diện / biểu tượng: 48–200 px ở kích thước nó hiển thị.
Phục vụ một ảnh 4000px vào một ô 800px nghĩa là trình duyệt tải xuống và giải mã gấp 25 lần số pixel nó sẽ hiển thị. Đó là lãng phí thuần túy — và giải mã ảnh lớn cũng làm giật luồng chính.
Mục tiêu về dung lượng
Kích thước đặt trần; nén đặt dung lượng thực tế. Nhắm tới:
- Ảnh chủ đạo: dưới 200 KB (lý tưởng là 100–150 KB).
- Ảnh trong nội dung: 80–150 KB.
- Ảnh thu nhỏ: 10–30 KB.
- Tổng ảnh mỗi trang: cố gắng giữ dưới ~1 MB cho cả trang.
Nếu một ảnh đơn lẻ vượt ~300 KB, hãy coi đó là một lỗi cần điều tra.
Vì sao điều này chi phối Core Web Vitals
Largest Contentful Paint (LCP) của Google đo mất bao lâu cho đến khi phần tử lớn nhất trên màn hình kết xuất — và trên hầu hết các trang, phần tử lớn nhất đó là một ảnh (thường là ảnh chủ đạo). Một ảnh chủ đạo nặng, quá khổ trực tiếp làm phình LCP. Một LCP tốt là dưới 2,5 giây; một ảnh chủ đạo phình to có thể tự mình vượt qua mức đó trên kết nối di động.
Hai lợi ích liên quan đến ảnh nữa:
- Đặt thuộc tính width và height để trình duyệt dành sẵn không gian — điều đó bảo vệ điểm Cumulative Layout Shift (CLS) của bạn.
- Ưu tiên ảnh chủ đạo (đừng tải lười ảnh LCP) và tải lười mọi thứ dưới phần đầu màn hình.
Quy trình hai bước
Bước 1 — đổi kích thước về chiều rộng hiển thị thực. Dùng Công cụ Đổi kích thước ảnh để đưa mỗi ảnh xuống kích thước nó xuất hiện. Khóa tỷ lệ bật, thu nhỏ chất lượng cao. Chỉ riêng điều này thường cắt dung lượng 80–90%.
Bước 2 — nén. Đưa các file đã đổi kích thước vào Công cụ Nén ảnh: chất lượng 75–85 cho ảnh chụp (mất mát vô hình với mắt), lượng tử hóa 256 màu cho PNG. Nó không bao giờ xuất ra file lớn hơn bản gốc, xử lý được theo lô, và có tùy chọn giới hạn chiều rộng để bạn có thể làm cả hai bước cùng lúc một cách hiệu quả. Với trình duyệt hiện đại, chuyển ảnh chụp sang WebP vắt thêm 25–35% nữa.
Đo lường, đừng đoán
Một khi ảnh của bạn được tối ưu, hãy xác nhận trang thực sự đã nhanh hơn. Công cụ Page QA của IMG.DIY kiểm định một URL trực tiếp qua Google PageSpeed Insights và báo cáo dung lượng ảnh của trang để bạn phát hiện bất kỳ file nào vẫn còn quá nặng. Một lưu ý: Page QA cần kết nối internet — không như các công cụ ảnh, nó gọi API PageSpeed của Google, nên không chạy offline được. Dùng nó sau khi bạn triển khai để kiểm tra LCP thực và ngân sách ảnh.
Riêng tư theo mặc định
Các công cụ đổi kích thước, nén và chuyển đổi chạy hoàn toàn trong trình duyệt của bạn với Canvas và WebAssembly — không gì được tải lên, và sau lần truy cập đầu tiên chúng được lưu cache và hoạt động offline. Bạn có thể chuẩn bị ảnh cho cả một website mà không cần kết nối, rồi chạy Page QA trực tuyến một khi trang đã hoạt động.
Tóm tắt nhanh: chỉnh đúng kích thước, nén về mục tiêu dung lượng, ưu tiên ảnh chủ đạo cho LCP, và xác minh bằng Page QA.