Tham khảo các dịch vụ thiết kế website, dịch vụ SEO, lập trình web-app, cắt HTML và lập trình di động

Công nghệ camera và nhiếp ảnh ngày càng phát triển khiến cho dung lượng những bức ảnh ngày càng cao. Hình ảnh đẹp và sắc nét sẽ hấp dẫn và ấn tượng hơn với người dùng web. Tuy nhiên, nếu để nguyên mà không tìm cách giảm dung lượng ảnh thì sẽ ảnh hưởng tiêu cực đến website và trải nghiệm của người dùng.

Tác dụng khi giảm dung lượng ảnh cho website

Ảnh có dung lượng lớn có thể không phải là vấn đề nếu bạn là nhiếp ảnh gia chuyên nghiệp hoặc bạn đang tìm kiếm những bức ảnh to để làm hình nền. Nhưng, đây là vấn đề nghiêm trọng dành cho các nhà thiết kế website.

Chúng ta đều biết: nhiều hình ảnh sẽ cuốn hút và sinh động hơn, dễ dàng lôi kéo và truyền tải thông điệp hơn. Và khi truy cập website, người dùng phần lớn đều thích xem các hình ảnh chất lượng, nhưng cũng rất ngại phải chờ cho những bức ảnh tải xong.

Việc phải chờ đợi như vậy có thể làm mất hết kiên nhẫn của khách ghé thăm. Họ sẽ thoát trang và bạn sẽ mất đi tất cả nguồn lợi của mình.

Do đó, giải pháp giảm dung lượng hình ảnh đã ra đời.

Theo công ty thiết kế website, bằng việc giảm dung lượng ảnh, các website có thể:

• Giảm thời gian chờ tải ảnh, đồng nghĩa tăng tốc độ tải trang.
• Tiết kiệm bộ nhớ cho máy chủ (nếu bạn lưu ảnh trực tiếp trên máy chủ).

Cuộc chiến định dạng ảnh nén: JPEG vs PNG

Có thể thấy: gần như toàn bộ file hình ảnh chúng ta tải về từ web đề có đuôi .png hoặc .jpg (.jpeg). JPEG và PNG đều đã là định dạng ảnh đã nén từ ảnh gốc (RAW).

2 định dạng này tương ứng với 2 phương thức nén ảnh phổ biến hiện nay là lossy và lossless.

Nén lossy sẽ khiến cho dung lượng bức ảnh giảm xuống tới 90%. Tuy nhiên, cách này sẽ thay đổi chất lượng bức ảnh đi đáng kể, nếu nén quá mạnh có thể làm vỡ hình, nhòe hình, đến mắt người cũng nhìn thấy được.

Trong khi đó, nén lossless có nghĩa là thông tin của hình ảnh (màu sắc, độ sáng…) không bị mất đi hoặc chỉ mất một phần rất rất nhỏ. Nhưng nhờ vậy mà dung lượng của ảnh sẽ không giảm đi nhiều.

JPEG

JPEG là một phương thức nén ảnh lossy, tức là nó sẽ làm mất đi một phần thông tin của hình ảnh. Nhưng đừng quá lo lắng bởi bạn sẽ khó có thể nhận ra sự mất mát này.

Theo nghiên cứu, mắt người giỏi trong việc nhận biết sự khác nhau của độ sáng hơn là sự khác nhau của màu sắc. Cơ chế nén lossy tìm kiếm và loại bỏ các thông tin màu dư thừa, trùng lắp để làm giảm dung lượng bức ảnh. Hình ảnh chúng ta nhìn thấy thực ra là một mạng lưới các pixel màu li ti, khi một vài pixel bị lấy đi cũng không ảnh hưởng đến tổng thể hình ảnh. Kể cả những người tinh mắt nhất cũng sẽ khó nhận ra sự khác biệt này.

JPEG là viết tắt của từ Joint Photographic Experts Group, chỉ một nhóm các chuyên gia về nhiếp ảnh đưa ra chuẩn mực cho phương thức nén ảnh này. Cách hoạt động của JPEG rất phức tạp: (1) phân tách các kênh màu của hình ảnh, (2) lượng tử hóa chúng lại dựa trên công thức DCT (discrete consine transform) và (3) thực hiện mã hóa entropy để cho ra thành phẩm cuối cùng.

Cách làm này giúp JPEG làm giảm 90% dung lượng của bức ảnh gốc. Đây là con số vô cùng ấn tượng, giúp một website có thể thoải mái dùng hình ảnh để minh họa mà không sợ load chậm hay hết băng thông.

Tuy nhiên, JPEG không quá thích hợp để làm ảnh web vì thuật toán nén lossy sẽ làm mất đi chất lượng của hình ảnh. Nếu bạn nén quá mạnh sẽ làm nhòe ảnh, khiến bức ảnh và cả trang web xấu đi. Những pixel ảnh bị JPEG xóa đi không bao giờ lấy lại được, khi phóng to hình ảnh sẽ làm một số chi tiết bị vỡ ra do không có pixel nào ở đó. Ngoài ra, các chi tiết cần độ sắc nét cao như chữ viết, họa tiết sẽ bị mờ đi trông rất xấu.

PNG

PNG (Portable Network Graphics) sử dụng thuật toán nén lossless DEFLAT – tổ hợp của hai công nghệ nén là LZW compression và Huffman coding. Thay vì bỏ bớt các pixel thừa như JPEG, PNG chia nhỏ và mã hóa hình ảnh vào các đoạn mã ngắn (shortcode) và lưu chúng trong “từ điển” (hay codebook) trên chính file đó. Nhờ vậy, PNG có thể bảo toàn chất lượng tối đa cho ảnh nén, nếu có mất đi cũng là một phần rất nhỏ.

Đúng như tên gọi của mình, PNG rất thích hợp để dùng làm ảnh web. PNG có dung lượng lớn hơn JPEG, nhưng mọi thông tin hình ảnh vẫn được bảo toàn. Đây là điều rất cần thiết cho các bức vẽ hay tranh minh họa trên website.

Ngoài ra, PNG không làm mờ nét chữ như JPEG. PNG cũng hỗ trợ nền trong suốt (transperancy) – điều mà JPEG chắc chắn không làm được – cũng như hỗ trợ hình động (APNG).

Nhìn chung, sử dụng PNG cho website, bạn sẽ có được sự cân bằng giữ tốc độ tải trang và trải nghiệm người dùng.

So sánh JPEG và PNG

Để có thể phân biệt và xác định định dạng phù hợp với bạn, hãy xem các đặc điểm JPEG và PNG để đánh giá.

JPEG:

• Dung lượng file rất nhỏ.
• Được hỗ trợ rộng rãi.
• Chất lượng hình ảnh giảm, bị nhòe nếu nén quá mạnh hoặc phóng to hình.
• Hiển thị chữ viết và các chi tiết sắc nét kém.
• Sử dụng tốt cho hình ảnh có nền đồng nhất, chi tiết kích thước lớn.
• Không hỗ trợ trong suốt.

PNG:

• Dung lượng file không thay đổi nhiều, thậm chí tăng khi điều chỉnh chất lượng sau nén.
• Chất lượng giữ nguyên so với trước khi nén.
• Hiển thị tốt chữ viết và các chi tiết đòi hỏi độ sắc nét.
• Sử dụng tốt cho hình ảnh có nền không đồng nhất, chi tiết kích thước nhỏ.
• Hỗ trợ trong suốt.
• Hỗ trợ ảnh động với APNG.

Như đã nhận định, PNG thích hợp làm ảnh web hơn JPEG. Tuy nhiên, quyết định cuối cùng vẫn còn phụ thuộc vào mục đích sử dụng, chi tiết và chất lượng hình ảnh gốc…

Các định dạng ảnh nén khác

GIF

GIF là tên tiết tắt của Graphics Interchange Format, cũng là một định dạng ảnh nén lossless. GIF có thể được xem là tiền thân của PNG khi định dạng này cũng sử dụng thuật toán nén LZW compression. Tuy vậy, GIF ít tính năng hơn và hiệu năng cũng thấp hơn hẳn PNG.

Định dạng GIF hỗ trợ độ sâu màu ít hơn rất nhiều: 256 màu so với 16 triệu màu của PNG. GIF cũng hỗ trợ nền trong suốt nhưng vẫn còn đơn giản, trong khi PNG cho phép tùy chỉnh hiệu ứng trong suốt nhiều hay ít. Và hiệu năng nén ảnh của GIF cũng thấp hơn từ 5% tới 25%.

Ngày nay, GIF chỉ được dùng nhiều để làm ảnh động phục vụ các mục đích giải trí trên mạng. Lý do là bởi ảnh GIF nhẹ, dễ làm, dễ dùng hơn PNG và APNG cũng chưa quá phổ biến.

WebP

WebP là định dạng ảnh nén lossy do Google phát triển và được ưu ái sử dụng trong các sản phẩm của hãng. Theo mô tả của Google, WebP có thể là sự thay thế đầy tiềm năng cho JPEG và là đối thủ nặng ký cho PNG trong tương lai.

Google nổi tiếng với trí thông minh nhân tạo AI và cách WebP hoạt động cũng thông minh không kém. Để làm giảm dung lượng ảnh, WebP sẽ dự đoán pixel màu bằng cách phân tích các pixel màu liền kề. Khi bạn nhìn vào pixel đó, bạn sẽ chỉ thấy hình ảnh được hiển thị sau khi máy tính phân tích thuật toán của WebP gán vào nó. Pixel đó không chứa giá trị màu thực sự.

Vì vậy mà định dạng WebP có dung lượng thấp hơn 25% so với ảnh nén bằng các phương pháp lossy khác, như JPEG chẳng hạn. Và ảnh sau khi nén cũng có chất lượng gần tương đồng với ảnh gốc do thuật toán của WebP dự đoán rất chính xác.

Vấn đề duy nhất của WebP là nó còn quá mới, vẫn chưa được hỗ trợ rộng rãi, các thiết bị in ấn cũng chưa tương thích. Nhưng với ảnh hưởng của Google trong thế giới Internet, chúng ta có thể thấy được tương lai xán lạn của định dạng ảnh nén lossy WebP.

Làm sao để giảm dung lượng ảnh cho website?

Bạn có thể tự chỉnh sửa ảnh gốc để làm giảm dung lượng bằng những việc sau đây:

• Sử dụng nền đều màu và đơn giản cho bức ảnh. Tránh sử dụng các họa tiết rườm rà vì những chi tiết càng phức tạp càng khó nén, khiến cho dung lượng không nhỏ như mong muốn.
• Loại bỏ không gian nền dư thừa xung quanh đối tượngi chủ đề (nếu muốn). Đôi khi chúng ta sử dụng hình ảnh lớn hơn nhu cầu thực sự, phần nền dôi ra không có nhiều tác dụng nhưng lại khiến ảnh nặng hơn.
• Dùng công cụ Resize của Photoshop hoặc các trình sửa ảnh tương tự để thay đổi kích thước tấm ảnh gốc.
• Chọn “Save for Web” để lưu ảnh trong Photoshop để ảnh được tối ưu cho việc hiển thị trên web. Bạn có thể làm điều này sau công đoạn Resize ở trên (nếu muốn).
• Bỏ chọn “Transparency” (đối với PNG) khi lưu ảnh nếu không cần yếu tố trong suốt của ảnh.
• Sử dụng công cụ Posterize của Photoshop nếu nó không làm thay đổi hình ảnh của bạn quá nhiều. Chức năng này gộp những pixel màu tương đồng lại với nhau, cũng là một cách hay để làm giảm dung lượng ảnh của bạn.

Sau cùng, để tối đa hóa dung lượng có thể giảm, bạn vẫn nên dùng luôn các công cụ nén ảnh sau khi đã sửa ảnh gốc.

Bạn có thể sử dụng các phần mềm cho máy tính như FileOptimizer (Windows), ImageOptim (Mac), Trimage (Linux)… hoặc các công cụ online như CompressPNG, TinyPNG (khuyên dùng).

Xem thêm: Các công cụ nén ảnh online không giảm nhiều chất lượng

Lời kết

Như vậy, bài viết đã chỉ ra những điểm khác biệt giữa các loại định dạng ảnh thông dụng cũng như cách giảm dung lượng ảnh cho web. Có thể thấy, bên cạnh “công cuộc” nén ảnh để tăng tốc độ tải trang thì việc chọn loại ảnh phù hợp cũng đóng vai trò quan trọng. Tóm lại, khi thiết kế website, hãy đảm bảo chất lượng và dung lượng ảnh đã tối ưu để người dùng của bạn có được trải nghiệm tốt nhất.