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

"Đam mê của chúng tôi là khám phá những ý tưởng giúp mang lại thành công cho doanh nghiệp.Minara chúng tôi sử dụng đa dạng các công cụ để thấu hiểu mục tiêu kinh doanh, sáng tạo ý tưởng và biến chúng trở thành hiện thực". Tìm hiểu ngay

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. 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ả các cách dưới đều rất đơn giản và dễ thực hiện:

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)PNG và GIF

  • Đị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.

Nén dung lượng ảnh

Sử công cụ offline: 2 công cụ được sử dụng thường xuyên đó 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.

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 PhotoImageOptim (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 With và Save 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ư:

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, 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.