Công cụ nén ảnh miễn phí cho website nhanh hơn

Một công cụ nén ảnh làm nhẹ phần nặng nhất của hầu hết các trang. Trên trang chủ trung bình, ảnh nặng 1.054 KB trên máy tính và 900 KB trên điện thoại, trong tổng dung lượng trang lần lượt là 2.652 KB và 2.311 KB (HTTP Archive, Web Almanac 2024, Page Weight). Hướng dẫn về ảnh của chính Google cũng nói điều tương tự: ảnh “thường là thành phần lớn nhất làm tăng dung lượng trang tổng thể”, khiến trang tải chậm và tốn kém (Google Search Central, các thực hành tốt nhất về SEO hình ảnh).

Công cụ nén ảnh miễn phí hoạt động như thế nào?

Thả một hoặc nhiều ảnh vào công cụ, đặt chất lượng và tải các tệp nhẹ hơn về. Mọi thứ diễn ra trên thiết bị của bạn: trình duyệt đọc từng tệp, vẽ lại và mã hóa lại, nên ảnh của bạn không bao giờ được gửi đến máy chủ.

1. Thêm tệp: JPEG, PNG hoặc WebP, tối đa 10 MB mỗi tệp. Bạn có thể chọn nhiều tệp cùng lúc.
2. Đặt chất lượng bằng thanh trượt, từ 10% (nén tối đa) đến 100% (chất lượng tối đa). Mặc định là 80%.
3. Đọc báo cáo: tổng dung lượng đã tiết kiệm, sau đó mỗi ảnh một dòng với kích thước cuối cùng, kích thước tính bằng pixel và định dạng đầu ra.
4. Tải về từng tệp, hoặc tải tất cả chỉ với một cú nhấp. Mỗi tên tệp bắt đầu bằng “compressed-” để bạn không vô tình ghi đè lên ảnh gốc.

Sau lần chạy đầu tiên, nếu bạn kéo lại thanh trượt, công cụ sẽ nén lại cùng các tệp đó, giúp bạn so sánh hai thiết lập một cách nhanh chóng.

Công cụ chọn định dạng nào cho từng ảnh?

Công cụ thử các phương án và giữ lại tệp nhỏ nhất. Nếu không phương án nào nhỏ hơn ảnh gốc, nó giữ ảnh gốc và thông báo rằng ảnh đã được tối ưu.

WebP thường thắng vì một lý do đã được ghi nhận: Google đo các tệp WebP không mất dữ liệu nhỏ hơn PNG 26%, còn các tệp WebP có mất dữ liệu nhỏ hơn JPEG tương đương 25 đến 34% ở cùng chất lượng, và cả hai chế độ đều hỗ trợ độ trong suốt (Google for Developers, WebP). Google Tìm kiếm lập chỉ mục ảnh ở các định dạng BMP, GIF, JPEG, PNG, WebP, SVG và AVIF, vì vậy tệp WebP cũng an toàn cho tìm kiếm hình ảnh.

Bạn nên dùng mức chất lượng nào?

Dùng 80% cho ảnh chụp và chỉ giảm thấp hơn sau khi đã kiểm tra kết quả ở kích thước đầy đủ. Thanh trượt truyền một giá trị chất lượng từ 0 đến 1 cho bộ mã hóa của trình duyệt, cách chuẩn mà trình duyệt dùng để xuất ảnh có mất dữ liệu (MDN, HTMLCanvasElement.toBlob()). Giá trị càng thấp thì càng loại bỏ nhiều chi tiết; mức phù hợp phụ thuộc vào nội dung ảnh.

Ảnh chụp màn hình và ảnh có chữ cần mức cao hơn ảnh chụp thông thường: các vết nén xuất hiện đầu tiên quanh những nét chữ sắc.

Vì sao dung lượng ảnh quan trọng với SEO?

Vì ảnh chính của một trang thường là thứ Google đo thời gian. Largest Contentful Paint (LCP) đo thời điểm phần tử hiển thị lớn nhất xuất hiện, và điểm tốt là 2,5 giây trở xuống ở phân vị thứ 75 của các lần tải trang (web.dev, Largest Contentful Paint). Trên điện thoại, phần tử LCP có chứa ảnh ở 68% trang (Web Almanac 2024, Media).

Google khuyến nghị các Core Web Vitals tốt “để thành công trong Tìm kiếm”, và cho biết chúng phù hợp với những gì các hệ thống xếp hạng cốt lõi của Google tìm cách thưởng (Google, Core Web Vitals và Tìm kiếm). Một ảnh nổi bật nhẹ hơn là một trong những cách trực tiếp nhất để cải thiện LCP của bạn.

Tuy vậy, nén chưa phải là toàn bộ câu chuyện. Hướng dẫn LCP của Google giải thích rằng một tệp nhỏ hơn rút ngắn thời gian tải xuống, nhưng nếu trình duyệt phát hiện hoặc hiển thị ảnh muộn, thời gian tiết kiệm được chỉ chuyển sang một bước khác (web.dev, Tối ưu LCP). Hãy nén tệp, rồi đảm bảo ảnh chính có mặt trong HTML ngay từ đầu và không được tải lười.

Làm sao để chuẩn bị ảnh trước khi nén?

Đổi kích thước trước, rồi nén. Công cụ giữ nguyên kích thước điểm ảnh của tệp, vì vậy một ảnh 4.000 pixel hiển thị ở 800 pixel vẫn chứa gấp 25 lần số điểm ảnh mà màn hình hiển thị.

1. Đổi kích thước theo kích thước hiển thị: khoảng gấp đôi chiều rộng mà ảnh được hiển thị là đủ cho màn hình sắc nét. Ảnh bìa blog toàn chiều rộng hiếm khi cần hơn 1.600 đến 2.000 pixel.
2. Cắt bỏ phần không có ích: khoảng trống thừa tốn dung lượng và làm loãng sự chú ý.
3. Nén ở 80%, so sánh, rồi điều chỉnh.
4. Đặt lại tên tệp bằng vài từ mô tả, chẳng hạn “giay-chay-dia-hinh-mau-do.webp”, vì Google cho biết một tên tệp ngắn và mô tả sẽ cho nó vài gợi ý nhẹ về chủ đề ảnh.
5. Viết văn bản thay thế (alt) khi chèn ảnh: xem mục từ điển của chúng tôi về văn bản thay thế.

Việc mã hóa lại qua trình duyệt cũng loại bỏ dữ liệu máy ảnh được lưu trong tệp gốc, nhờ đó giảm thêm vài kilobyte với các ảnh chụp bằng điện thoại hoặc máy ảnh.

Một ảnh nên nặng bao nhiêu?

Không có giới hạn chính thức, nhưng ngân sách thực tế giúp trang luôn nhanh. Hãy dùng các mục tiêu này làm điểm khởi đầu và đo toàn bộ trang bằng công cụ kiểm tra dung lượng trang.

• Ảnh nổi bật hoặc ảnh bìa: dưới 150 đến 200 KB, vì nó thường quyết định LCP.
• Ảnh trong bài viết: dưới 100 KB mỗi ảnh.
• Ảnh thu nhỏ và logo: tối đa vài chục KB.
• Toàn bộ trang: hãy so sánh với mức trung vị ở trên. Các trang con trên điện thoại mang trung bình 348 KB ảnh, cho thấy một bài viết được xây dựng tốt có thể nhẹ hơn nhiều.

Những lỗi nào làm mất lợi ích của việc nén?

Hầu hết chúng xảy ra sau bước nén, khi ảnh được đặt lên trang.

• Tải lười ảnh chính. Gần một trong mười ảnh LCP trên điện thoại được tải lười, một kiểu làm trang chậm hơn nhiều (Web Almanac 2024, Media). Hãy giữ loading="lazy" cho các ảnh nằm dưới phần nhìn thấy đầu tiên của trang.
• Không có thuộc tính chiều rộng và chiều cao. Thiếu chúng, trang sẽ nhảy khi ảnh xuất hiện, làm giảm độ ổn định bố cục.
• Một tệp lớn cho mọi màn hình. Hãy phục vụ các phiên bản nhỏ hơn cho điện thoại bằng srcset.
• Nén cùng một tệp JPEG nhiều lần. Mỗi lần nén có mất dữ liệu sẽ làm mất thêm chi tiết. Hãy giữ một bản gốc chất lượng cao và luôn nén từ bản đó.
• Quên CMS. Một số nền tảng tự tạo phiên bản riêng cho mọi tệp tải lên; hãy kiểm tra tệp thực sự được phục vụ, không phải tệp bạn đã tải lên.

Làm sao để mọi trang luôn nhẹ theo thời gian?

Hãy biến việc nén thành một phần của quy trình đăng bài, rồi kiểm tra định kỳ. Chạy kiểm tra SEO on-page trên các trang chính để phát hiện ảnh nặng và thiếu văn bản thay thế, và đọc hướng dẫn về tối ưu hình ảnh để có danh sách kiểm tra đầy đủ.

Nếu bạn đăng bài thường xuyên, hãy tự động hóa công việc lặp lại. Trình tạo bài viết blog của Sorank viết và đăng các bài có minh họa lên website của bạn, còn Bảng điều khiển GEO và SEO theo dõi lượng truy cập từ Google và độ hiển thị trên AI mà các trang đó đạt được.

Đổi kích thước, nén ở 80%, kiểm tra ở kích thước đầy đủ: thói quen đó loại bỏ phần lớn dung lượng khỏi trang của bạn. Thả ảnh vào công cụ nén ở trên, rồi xem các gói của Sorank để đăng nội dung đã tối ưu, trên autopilot.