File gif cho web nên có size bao nhiêu

Công nghệ camera và nhiếp ảnh đang 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, sắc nét sẽ hấp dẫn và ấn tượng hơn với người dùng website. Tuy nhiên, nếu size ảnh quá lớn mà không tìm cách giảm dung lượng ảnh thì có 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 dẫn đến họ sẽ thoát trang và bạn sẽ mất đi tất cả nguồn lợi của mình.

Chính vì thế, giải pháp giảm dung lượng hình ảnh đã ra đời.

File gif cho web nên có size bao nhiêu

3 định dạng ảnh phổ biến hiện nay là JPEG, GIF, PNG

Qua 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 ảnh đi khá đáng kể, có thể làm vỡ hình, nhòe hình nếu nén quá mạnh.

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 nhỏ. Nhưng nhờ vậy mà dung lượng của ảnh sẽ không giảm đi nhiều.

1. Định dạng JPEG

JPEG là ảnh nén thoe phương thức lossy, 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.

2. Định dạng 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, áp 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.

File gif cho web nên có size bao nhiêu

Tùy thuộc vào mục đích sử dụng và chất lượng ảnh gốc để lựa chọn định dạng ảnh phù hợp

So sánh JPEG và PNG

Để có thể phân biệt và xác định định dạng phù hợp với website của bạn, hãy xem các đặc điểm JPEG và PNG để đưa ra lựa chọn tương thích:

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ị text và các tiểu 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 và chất lượng hình ảnh gốc...

3. Định dạng GIF

GIF (Graphics Interchange Format) cũng là phương thức nén lossless. GIF ít tính năng hơn và hiệu năng cũng thấp hơn hẳn PNG, dẫn tới độ phổ biến ít 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.

Bạn có thể editt ảnh gốc để làm giảm dung lượng bằng những cách dưới đây:

  • Sử dụng màu nền đều và đơn giản cho bức ảnh. Hạn chế sử dụng các họa tiết rườm rà.
  • Lược bỏ nền dư thừa xung quanh đối tượng chủ đề. Đô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. Ngoài photoshop, bạn hãy thử các phần mềm edit ảnh cũng như giảm dung lượng ảnh khác.

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