Phương pháp nén hình ảnh PNG tốt nhất hiện nay

Nén hình ảnh PNG như thế nào? Khi nào nên dùng định dạng PNG, khi nào không nên dùng định dạng PNG? và cách nén nào hiệu quả? – Đây là một loạt câu hòi mình nhận được từ các bạn đã đọc bài Tôi đã tối ưu hóa website wordpress trên pagespeed insights như thế nào?

Hôm nay mình sẽ giải đáp các câu hỏi của các bạn thông qua phương pháp nén ảnh PNG dưới đây.

Phương pháp nén hình ảnh PNG tốt nhất hiện nay

Trước khi bước vào phương pháp nén ảnh PNG thì mình xin chia sẻ một chút. Mình làm trong nghề thiết kế và quản trị website cũng được 5 năm rồi, và cũng đã gặp rất nhiều trường hợp vì muốn ảnh đẹp nên luôn luôn xuất định dạng ảnh là PNG. Đúng, mình không bàn cãi về chất lượng ảnh khi xuất định dạng PNG nha. Nhưng các bạn cũng đã biết định dạng PNG sẽ cho ta một tệp hình ảnh với dung lượng khá lớn. Hơn nữa, nếu website của bạn chỉ toàn ảnh PNG thì điều gì sẽ xảy ra?

Bạn nghĩ đúng rồi đấy, website sẽ rất chậm. Vì vậy, chúng ta cần hạn chế xuất định dạng PNG khi đăng lên website.

Khi nào cần và không cần dùng định dạng PNG?

Để giải quyết được vấn đề này, chúng ta cần tìm hiểu định dạng ảnh PNG là gì? Và tại sao ta cần dùng đến nó?

Định dạng ảnh PNG là gì?

Bạn sẽ rất hay bắt gặp hình ảnh nền caro như thế này trên Google Image.

Đây là hình ảnh có nền trong suốt, hình ảnh này có thể ghép ở bất cứ một nền khác và không hề có màu trắng bên dưới, cũng như nếu trên thanh header của mình có đổi màu gì đi chăng nữa thì logo vẫn nằm rất đẹp.

Vậy định dạng PNG sẽ giúp ta giải quyết được vấn đề về đặt ở đâu cũng được vì nó là nền trong suốt hay còn gọi là nền gương.

Khi nào nên dùng và không nên dùng định dạng PNG?

Qua khái niệm trên thì các bạn cũng đã hình dung được khi nào chúng ta cần dùng và khi nào không cần dùng định dạng PNG rồi nhỉ. Khi nào cần phối vào nhiều nền khác nhau thì dùng PNG, đơn giản vậy thôi!

Nhưng để có thể dùng một cách tốt nhất thì các bạn cần xác định đúng vị trí sử dụng. Mình sẽ cho một trường hợp dưới đây, các bạn thử đoán xem nên dùng PNG hay không nên dùng PNG nhé.

Đây là thanh header của một website về du học. Các bạn sẽ thấy logo đang được đặt trên này. Vậy nếu là bạn, bạn sẽ dùng định dạng PNG hay một định dạng khác như JPG, SVG? – Ở đây mình không bàn tới định dạng WEBP của CDN nhé!

Nếu là tôi, tôi sẽ dùng định dạng JPG bằng cách lưu ảnh logo trên nền trắng hoặc nền màu của nơi đặt logo (ở đây là header). Như vậy thay vì ta sẽ có 100kb cho định dạng PNG thì ta chỉ cần khoảng 20kb cho định dạng JPG.

Ngược lại, nếu là nền như thế này thì sao?

Chắc chắn một điều, phải lưu hình ảnh logo ở định dạng PNG mới có thể đặt trên nền như thế này được.

Mặt khác bạn cũng có thể lưu hình ảnh logo này ở định dạng SVG để giúp website tải nhanh hơn. Có thể dung lượng của SVG cao hơn PNG nhưng Google luôn ưu tiên chúng ta dùng SVG hơn là PNG. Nhưng hãy lưu ý rằng SVG chỉ dành cho các hình ảnh nhỏ như logo, icon

Như vậy, qua phần này bạn cũng đã nắm được khi nào dùng đến PNG và khi nào dùng đến JPG rồi chứ? Đừng lúc nào cũng dùng PNG chỉ vì định dạng PNG rõ nét mà làm hại đến kích thước website nhé!

Cách nén hình ảnh ở định dạng file PNG

Các bạn chắc hẳn đã chờ đợi đến phần này. Trong hướng dẫn cách nén hình ảnh ở định dạng file PNG này mình sẽ giới thiệu đến cách bạn một công cụ giúp nén ảnh cực kì tốt chỉ dành riêng cho định dạng PNG.

Tên công cụ: PNGYU – Tải công cụ tại đây

Cách sử dụng công cụ PNGYU giúp nén hình ảnh PNG

Sau khi cài đặt, các bạn bật công cụ lên và chỉ cần click giữ chuột trái vào hình ảnh và kéo thả vào ô Files. Sau đó nhấn nút Compress Start là xong!

Sức nén của PNGYU rất mạnh nhưng không làm giảm đi nhiều về chất lượng hình ảnh. Các bạn có thể yên tâm sử dụng công cụ này trong các dự án website của mình. Dưới đây là demo về một hình mình đã nén.

Công cụ này còn dùng được không?

Đến thời điểm hiện tại mình viết bài cách nén ảnh ở định dạng file PNG này thì công cụ PNGYU vẫn còn dùng rất tốt và chưa hề xảy ra lỗi nào các bạn nhé!

Nếu có phản hồi nào, các bạn có thể bình luận dưới bài này và mình sẵn sàng cập nhật lại bài viết theo các bình luận của các bạn.