Tìm hiểu về các định dạng hình ảnh

Trong bài viết này, chúng ta sẽ tìm hiểu 3 loại định dạng hình ảnh phổ biến nhất trên Web: GIF, JPEG và PNG. Bạn sẽ biết làm thế nào để làm việc với 3 định dạng này, và sử dụng chúng ở đâu trên các trang Web.

Định dạng hình ảnh GIF

GIF là viết tắt của Graphics Interchange Format. Nó tuyệt đối là định dạng dùng chung nhấ trên Web. Các ảnh GIF có một ích lợi khi sử dụng là kích thước rất nhỏ, vì vậy chúng được tải lên rất nhanh (fast-loading). Không như các ảnh JPEG, GIF sử dụng thuật toán nén lossless (không mất dữ liệu), điều đó cho phép chúng tạo ra kích thước nhỏ mà không bị mất hoặc mờ bất kì chi tiết nào của hình ảnh.

Các hình ảnh GIF cũng hỗ trợ transparency (chế độ trong suốt), cho phép chúng có thể đặt lên trên hình ảnh nền của trang web mà không bị kiểu hình chữ nhật màu trắng bao xung quanh, nhìn xuyên thấy nền trang web ở những phần không có hình ảnh chính.

Một lợi ích tuyệt vời khác của các ảnh GIF là chúng có thể làm hình động. Bạn có thể tạo một hình động GIF bằng cách vẽ mỗi khung hình của chuyển động riêng rẽ rồi gói vào một gói đồ họa hỗ trợ định dạng GIF chuyển động, sau đó xuất hình động đó sang một file GIF đơn lẻ. Khi bạn đưa hình đó vào trang Web (với thẻ img), hình của bạn sẽ hiển thị và chuyển động trên trang!

Điều bất lợi chính của các ảnh GIF là chúng chỉ hỗ trợ 256 màu (điều này được biết như là chế độ 8-bit colour - màu 8-bit và là loại hình ảnh indexed colour - màu chỉ số). Điều đó có nghĩa rằng chúng không được tốt cho ảnh chụp, hoặc bất kì hình ảnh nào mà chứa đựng nhiều màu khác nhau.

Tạo các ảnh GIF Fast-Loading

Thật thú vị nếu bạn tạo file GIF nhỏ hơn đến mức nào đó có thể, lúc đó các trang Web của bạn tải xuống rất nhanh. Lúc đó mọi người sẽ không chán nản và không nhảy sang website khác!

Hầu hết các chương trình đồ họa đều cho phép bạn điều chỉnh một số lượng lớn các tham số khi tạo ra ảnh GIF, ví dụ như bảng kích thước palette color (số lượng màu trên hình ảnh) và dithering. Nói dung việc sử udngj bảng palette sẽ cho phép bạn điều chỉnh kích thước ảnh GIF đến mức hợp lý. Thường bảng 32 màu (32 colour palette) tạo kết quả chấp nhận được, màu dầu các hình ảnh sẽ có chất lượng hơi ít màu bạn có thể lấy 16 màu cũng được. Các hình ảnh nhiều màu dĩ nhiên cần bảng lớn hơn - có thể 128 hay 256 màu.

8-colour GIF (1292 bytes)	64-colour GIF (2940 bytes)

Định dạng ảnh JPEG

JPEG viết tắt của Joint Photographic Experts Group, một nhóm các nhà nghiên cứu đã phát minh ra định dạng này để hiển thị các hình ảnh đầy đủ màu hơn (full-colour) cho định dạng di động mà kích thước file lại nhỏ hơn. Giống như ảnh GIF, JPEG cũng được sử dụng rất nhiều trên Web. Lợi ích chính của chúng hơn GIF là chúng có thể hiển thị các hình ảnh với màu chính xác true-colour (chúng có thể lên đến 16 triệu màu), điều đó cho phép chúng được sử dụng tốt nhất cho các hình ảnh chụp và hình ảnh minh họa có số lượng màu lớn.

Nhược điểm chính của định dạng JPEG là chúng được nén bằng thuật toán lossy (mất dữ liệu). Điều này có nghĩa rằng hình ảnh của bạn sẽ bị mất một số chi tiết khi chuyển sang định dạng JPEG. Đường bao giữa các khối màu có thể xuất hiện nhiều điểm mờ, và các vùng sẽ mất sự rõ nét. Nói một cách khác, định dạng JPEG thực hiện bảo quản tất cả thông tin màu trong hình ảnh đó, tuy nhiên với các hình ảnh chất lượng màu cao high-colour như hình ảnh chụp thì điều này sẽ không hề hấn gì.

Các ảnh JPEG không thể làm trong suốt hoặc chuyển động - trong trườn hợp này bạn sẽ sử dụng định dạng GIF (hoặc định dạgn PNG để tạo trong suốt).

Tạo ảnh JPEG Fast-Loading

Giống như với các ảnh GIF, để tạo hình JPEG nhỏ đến mức có thể (tính theo bytes) để website tải nhanh hơn. Điều chỉnh chính để thay đổi kích thước file JPEG được gọi là quality, và thường có giá trị từ 0 tới 100%, khi 0% thì chất lượng là thấp nhất (nhưng kích thước file là nhỏ nhất), và 100% thì chất lượng cao nhất (nhưng kích thước file là lớn nhất). 0% chất lượng JPEG sẽ nhìn rất mờ khi so sánh với ảnh gốc. Còn 100% chất lượng JPEG thường không phân biệt được so với ảnh gốc:

ow-quality JPEG (4089 bytes)	High-quality JPEG (17465 bytes)

Định dạng ảnh PNG

PNG là một phát minh mới để so sánh với GIF hoặc JPEG, mặc dầu nó vẫn chưa phổ biến lắm trong thời điểm bây giờ. (Thật buồn là một số trình duyệt như IE6 vẫn chưa hỗ trợ nó một cách đầy đủ.) Nó là viết tắt của Portable Network Graphics. Nó được thiết kế để như là một định dạng thay thế định dạng file GIF, nhưng không cần bản quyền về thuật toán nén như trong GIF cùng thời điểm.

Có 2 loại PNG: định dạng PNG-8, có thể giữ được 8 bit thông tin màu (tương đương với GIF), và định dạng PNG-24, có thể giữ 24 bit màu (tương đương với JPEG).

PNG-8 thường nén các hình ảnh tốt hơn GIF, kết quả trả ra các file kích thước nhỏ hơn. Mặt khác, PNG-4 thường ít hiệu ứng hơn JPEG về nén true-colour như các hình ảnh, kết quả là các file lớn hơn cũng như chất lượng JPEG. Tuy nhiên, không giống như JPEG, PNG-24 nén theo thuật toán lossess (không mất dữ liệu), có nghĩa rằng tất cả thông tin hình ảnh cũ đều được giữ lại.

PNG cũng hỗ trợ làm trong suốt như GIF, và với góc độ là trong suốt cho mỗi pixel, với GIF thì chỉ là trong suốt ở phần ngoài mỗi pixel. Điều này có nghĩa rằng GIF thường được trong suốt phần cạnh với hình phức tạo thì PNG sẽ làm trong suốt mịn hơn.

Chú ý rằng không giống như GIF, PNG-8 không hỗ trợ chuyển động.

Một điều quan trọng nữa về PNG là: Các trình duyệt cũ không nhận dạng được chúng. Nếu bạn muốn đảm bảo website bạn có thể xem được trên các trình duyệt cũ thì nên dùng GIF hoặc JPEG thay cho PNG.

16-colour PNG-8 (6481 bytes)	Full-colour PNG-24 (34377 bytes)

Tổng kết về các định dạng hình ảnh

Đây là bảng tổng kết các đặc điểm khác nhau giữa các định dạng hình ảnh GIF, JPEG và PNG.

Tóm lại, GIF là tốt nhất cho Web, đồ họa Web cần phải nhẹ, và cần ít màu, và đôi khi muốn chuyển động và trong suốt. Tuy nhiên, JPEG lại tốt nếu bạn cần hình ảnh chất lượng cao (như là một bức ảnh chụp), và/hoặc bạn muốn đầy đủ màu. PNG-8 có thể là sản phẩm kích thước nhỏ hơn GIF, và cả hai định dạng PNG đều không làm mất dữ liệu.

Kết luận

Với bài viết trên chúng tôi hy vọng bạn sẽ tìm thấy nhiều điều hữu ích. Chúng tôi nghĩ là nó là kiến thức rất cần cho những người thiết kế nói chung và các nhà thiết kế đồ họa Web nói riêng.

Thân ái - Hoàng Dương