Cách nén ảnh cho website

Chỉ một bức ảnh chưa tối ưu cũng có thể nặng hơn cả phần còn lại của trang cộng lại. Xử lý ảnh là cách cải thiện hiệu năng rẻ nhất bạn có, và nó ảnh hưởng trực tiếp đến Largest Contentful Paint — một trong những chỉ số Core Web Vitals mà Google dùng để xếp hạng.

1. Đổi kích thước đúng bằng kích thước hiển thị thực tế

Một ảnh hero hiển thị ở độ rộng 1200 px không cần đến 4000 px. Mở Đổi kích thước ảnh, đặt chiều rộng (1600 px là mức tối đa an toàn cho ảnh full-width trên màn hình retina, 800 px cho ảnh nội dung) và xử lý hàng loạt cả thư mục cùng lúc.

2. Chọn đúng định dạng

• Ảnh chụp → WebP (hoặc JPG nếu bạn buộc phải hỗ trợ trình duyệt rất cũ). WebP nhỏ hơn JPG 25–35% ở cùng mức chất lượng, và mọi trình duyệt hiện đại đều mở được.
• Logo, icon, ảnh chụp màn hình có màu phẳng → PNG, sau đó giảm bảng màu (quantise). Lưu ảnh chụp dưới dạng PNG là một sai lầm: file nặng gấp 5–10 lần mà không được lợi gì.
• Icon và hình minh họa đơn giản → SVG bất cứ khi nào bạn có bản vector.

3. Nén ảnh

• JPG sang WebP ở mức 80–85% cho ảnh chụp.
• Nén PNG — giảm bảng màu, cùng kỹ thuật với pngquant, giúp ảnh đồ họa phẳng nhỏ đi 50–70% mà mắt thường không nhận ra khác biệt, vẫn giữ được độ trong suốt.
• Nén JPG ở mức 75–80% nếu bạn vẫn muốn giữ định dạng JPG.

4. Phục vụ ảnh đúng cách

Thêm thuộc tính width và height cho mọi thẻ <img> để trình duyệt dành sẵn không gian (tránh layout shift), lazy-load các ảnh nằm dưới màn hình đầu tiên bằng loading="lazy", và dùng srcset nếu muốn tối ưu sâu hơn. Các bước nén ở trên chính là điều đa số website bỏ qua, trong khi lại là điều quan trọng nhất.