Nén ảnh trên website sử dụng lossy và lossless

Mình từng có dịp chia sẻ về vấn đề tối ưu hóa ảnh trên website để nâng cao tốc dọ tải trang web trước đây. Hôm nay xin chia sẻ một chút kiến thức nâng cao hơn nữa, và chia sẻ các công cụ mà mình thường sử dụng. Bạn nào có nhu cầu sử dụng thì cứ tìm trong đó mà sử dụng nhé.

Công cụ nén ảnh mà không làm giảm chất lượng ảnh

Mình thường sử dụng một trong các công cụ nén ảnh sau để làm giảm dung lượng ảnh nhưng không làm giảm chất lượng. Theo đánh giá của mình thì các công cụ này đều khá tốt. Nếu bạn cần tối ưu ảnh để đạt kết quả tốt hơn trên Page Speed Insight thì không nên bỏ qua các công cụ này:

• tinypng.com
• compressor.io
• compressjpeg.com
• compresspng.com

Mình thì mình thich sử dụng compressor.io vì nó trực quan nhưng điểm yếu lớn nhất của nó là chỉ cho thực hiện 1 file mỗi lần. So với các công cụ khác cho phép xử lý đồng thời 20 file thì quả thực là compressor.io không tiện dụng bằng. Tuy nhiên khả năng nén của compressor.io thật sự tốt hơn hẳn.

compressor.io

Ngoài ra 1 công cụ mình cũng thường ưu tiên sử dụng là tinypng.com. Công cụ này cho phép nén nhiều file (20 files cùng lúc) và hiện tại còn cho phép nén cả ảnh gif động.

tinypng.com

Nén ảnh tự động trong WordPress

Mình giới thiệu với mọi người một số plugin WordPress cho phép nén ảnh ngay dưới đây. Các bạn sử dụng WordPress cho mình xin đánh giá xem chất lượng có tốt không nhé.

1. WP Smush

SmushIt

Đây có thể nói là plugin phải có của mình mặc dù chất lượng nén ảnh cũng không thực sự tốt nhất. Theo thử nghiệm của mình, sau khi nén dung lượng ảnh chưa thât sự tối ưu như compressor.io nhưng cũng là mức chất nhận được. Quan trọng hơn là nó miễn phí :)

2. EWWW Image Optimizer

EWWW Image Optimizer sử dụng thuật toán lossless để nén ảnh để không làm giảm chất lượng ảnh.

3. CW Image Optimizer

Plugin này mình chưa thử nghiệm nhưng thấy đánh giá cũng khá tôt. Bạn nào xài thử rồi cho đánh giá nhé.

Nén ảnh trên website sử dụng API

Nếu bạn là một lập trình viên và đang sử dụng một framework nào đó để làm việc mà không có sẵn thư viện nén ảnh (hoặc bạn tự viết website của mình) thì quả thật rất khó để nén ảnh. Tuy nhiên, giờ này mọi thứ đã đơn giản hơn rất nhiều với thư viện API chia sẻ của các website của các website cung cấp dịch vụ nén ảnh.

Mình hay sử dụng 2 thư viện của SmushIt và tinypng.com để tự build code tối ưu hóa ảnh khi upload. Nếu bạn quan tâm thì trên GitHub đã có sẵn 2 code mẫu để bạn có thể sử dụng:

• SmushIt class by DavGothic
• Tinify API

Hãy cho mình biết các công cỵ nén ảnh mà bạn đang sử dụng nhé !