Blog

Những cách tối ưu hình ảnh dùng cho Website
Online Marketing

Những cách tối ưu hình ảnh dùng cho Website

Tối ưu dung lượng hình ảnh trước khi tải lên Website tạo ra những lợi ích tích cực cho cả Web và người truy cập. Cụ thể bài viết Hãy tối ưu hình ảnh trước khi tải chúng lên Website! tôi đã nêu rõ những tác hại tiêu cực khi sử dụng ảnh có dung lượng quá lớn trên Website. Và tại bài viết này, tôi sẽ hướng dẫn cụ thể các cách tối ưu hình ảnh mà bạn có thể thực hiện dễ dàng.

Nguyên lý của việc tối ưu hình ảnh là giảm dung lượng bằng cách nén hoặc giảm kích thước hình ảnh xuống mức thấp nhất được mà vẫn không giảm chất lượng ảnh khi nhìn bằng mắt thường.

Có nhiều biện pháp nén ảnh. Bạn có thể thực hiện một hoặc kết hợp các cách bên dưới để optimize ảnh xuống mức thấp nhất có thể, tất cả 5 cách dưới đều rất đơn giản để thực hiện:

1. Sử dụng đúng định dạng phù hợp với môi trường online

Có 3 định dạng thường thấy là JPEG (JPG), PNGGIF

  • Định dạng JPEG nên dùng cho tất cả các ảnh sử dụng trên Web. Định dạng này có thể nén, thu nhỏ đến mức thấp nhất mà không làm giảm chất lượng một cách đáng kể. Được hỗ trợ nén bởi hầu hết các công cụ nén giảm dung lượng ảnh.
  • Định dạng PNG tạo ra hình ảnh chất lượng cao hơn, rõ sắc nét nhưng làm cho tệp có kích thước lớn hơn. Định dạng này nên chỉ sử dụng cho các loại hình cần nền trong suốt như icon, logo…
  • Định dạng ảnh động GIF thường được sử dụng thay thế cho những video MP4 cực ngắn, đạt được chất lượng HD nhưng dung lượng lại thấp hơn rất nhiều lần.

Ngoài ra, còn có một số định dạng khác như WebP hay SVG (Vector) đều cho dung lượng ảnh cực thấp với chất lượng và kích thước tương đương. Nhưng đây là những định dạng không quá phổ biến.

2. Nén dung lượng ảnh

Sử công cụ offline: 2 công cụ tôi thường sử dụng đó chính là Adobe Photoshop (Mac & Windows) và Paint (Windows)
Đối với Photoshop, sử dụng tính năng Save for Web, sau đó tùy chỉnh Compression Quality hoặc Quality ở mức độ phù hợp.

Lựa chọn Save for Web trong Photoshop CC
Lựa chọn Save for Web trong Photoshop CC

Ta có thể thấy hình đã được nén và giảm dung lượng đáng kể so với bản gốc nhưng chất lượng vẫn gần như giữ nguyên.
Ta có thể thấy hình đã được nén và giảm dung lượng đáng kể so với bản gốc nhưng chất lượng vẫn gần như giữ nguyên.

Ngoài Photoshop bạn cũng có thể nén dung lượng ảnh với các trình chỉnh sửa ảnh khác khi lựa chon thông số Compression Quality hoặc Quality phù hợp tương tự. Affinity Photo, ImageOptim (Mac), GIMP

Đối với Paint chỉ cần mở file ảnh bằng Paint bằng cách nhấp chuột phải chọn Open WithSave As hoặc Save ảnh là file sẽ tự động giảm dung lượng.

Sử dụng công cụ online: có rất nhiều trang web cho phép bạn nén ảnh trực tuyến miễn phí và cực kỳ tiện lợi. Bạn chỉ cần kéo thả ảnh để công cụ tự động nén mà không cần tùy chỉnh. Một số trang web nén ảnh như:

3. Giảm kích thước hình ảnh

Kích thước hình ảnh tỷ lệ thuận với dung lượng, nếu dung lượng nén vẫn còn lớn chúng ta nên giảm kích thước ảnh vừa phải, tránh để ảnh quá to gây lãng phí tài nguyên Web. Đồng thời các thiết bị cũng tự động co ảnh nếu kích thước lớn hơn màn hình hiển thị và thay vì thế chúng ta nên chủ động giảm kích thước hình ảnh. Chẳng hạn nếu bạn có một hình ảnh có kích thước lớn như 3000*2000px mà chỉ có dung lượng 300KB thì cũng nên co nhỏ lại sẽ giúp Website load nhanh hơn.
Kích thước hình ảnh tùy thuộc vào mỗi loại Web và cách bố trí (giao diện) sẽ có những quy định chung về kích thước.
Theo kinh nghiêm của tôi những hình ảnh trên các bài viết blog/tin tức nên đưa về kích thước tối đa cho cả chiều rộng và chiều cao từ khoảng 1200px, hình nền vào khoảng 1900px cho chiều rộng và 1000px cho chiều cao.

Sử dụng Photoshop hay các công cụ chỉnh sửa ảnh ở mục Image Size, hoặc dùng công cụ online sau:

Việc nén ảnh là rất cần thiết nhưng cũng đừng quá cứng nhắc mà làm mất đi độ sắc nét của ảnh. Nếu bạn thực sự chú trọng nào nội dung bức ảnh truyền tải và sự trải nghiêm của khách hàng hãy phối hợp những điều trên một cách hợp lý để tạo ra một tấm ảnh “vừa đủ dùng”. Ngoài ra hãy bắt đầu tối ưu ngay từ bây giờ, tránh phát sinh số lượng lớn hình ảnh cần phải tối ưu. Lúc đó các công cụ tối ưu hàng loạt có thể làm giảm rõ rệt chất lượng hình ảnh mà chỉ bằng mắt thường bạn mới có thể thấy được.

Bình luận