Dùng định dạng ảnh nào là vấn đề rất quan trọng khi Export một sản phẩm thiết kê.

Bài hướng dẫn ngắn dưới đây sẽ giúp bạn hiểu rõ hơn về các loại file ảnh và hướng sử dụng tốt nhất cho từng trường hợp.

GIF: The Graphic Interchange Format

Chắc hẳn ở đây ai cũng đã từng nghe đến và xem qua hệ ảnh “ngố” nhất mạng internet – định dạng GIF (Graphics Interchange Format).

Định dạng GIF là một kiểu bitmap, nhưng không như JPEG hay PNG, file GIFbị giới hạn trong chỉ 256 màu sắc. Về cơ bản, mỗi hình ảnh GIF chứa một “hộp bút chì màu” đã định sẵn và hoàn toàn không có cách nào để trộn lẫn những màu này để cho ra màu mới cả.

GIF hiển nhiên là sự lựa chọn không phù hợp với hình ảnh có hệ màu rộng, nhưng con số 256 màu này sẽ rất hữu dụng khi bạn muốn kích thước file thật bé, lý tưởng cho người dùng internet cho tốc độ chậm chạp. Trong nhiều năm, GIF là lựa chọn duy nhất cho hình ảnh bán trong suốt trên web cho đến khi PNG và SVG xuất hiện.

Xếp loại: Lossless (Không giảm chất lượng sau mỗi lần export)

Sử dụng trong:

• Hoạt ảnh đơn giản
• Icon nhỏ
• Hình ảnh ít chênh màu giữa từng pixel (hình ảnh màu đơn như logo hoặc lá cờ chẳng hạn)

JPEG

Tùy theo sở thích, bạn có thể để format này ở dạng ‘JPEG’ hoặc ‘JPG’ – cả hai đều là dạng viết tắt chấp nhận được của cùng một định dạng – Joint Photographic Experts Group.

Khác với GIF, JPEG là dạng ảnh 16-bit. Nói cách khách, định dạng này có thể kết hợp ánh sáng đỏ, lam và lục để hiển thị hàng triệu màu. Như vậy, định dạng rất “thân thiện với ảnh chụp”. Đây là một phần lý do khiến JPEG trở thành chuẩn mặc định của hầu hết ống kính trên thị trường.

Định dạng JPEG còn cho phép bạn lựa chọn linh hoạt độ nén của ảnh – từ 0% (nén nặng nhất) đến 100% (không nén). Nhìn chung, độ nén ở khoảng 60%-75% sẽ giảm thiểu dung lượng khá khá, trong khi vẫn đảm bảo chất lượng trên đa số màn hình.

Tuy JPEG phù hợp cho việc nén và render ảnh chụp, đây lại là dạng nén khá lỏng lẻo, không tiện cho việc chỉnh sửa chuyên sâu. Sau mỗi lần export ảnh JPEG, chất lượng sẽ bị giảm đi một tý. Vì lý do này, nhiều nhiếp ảnh gia thường chụp ở chuẩn RAW looseless.

Hơn nữa, không như GIF và PNG, JPEC không thể chứa dữ liệu transparency.

Xếp loại: Lossy (Giảm chất lượng sau mỗi lần export)

Sử dụng trong:

• Ảnh tĩnh
• Ảnh chụp
• Hình ảnh mới màu sắc phức tạp và sôi nổi

PNG

Định dạng ảnh mới hơn GIF và JPEG, ảnh PNG (Portable Network Graphics) nhờ vào hai biến thể đặc biệt, nên giống như là con lai của GIF và JPEG vậy.

PNG-8

PNG-8 tương tự như GIF theo một số tiêu chuẩn, và dùng cùng một hệ 256 màu sắc (tối đa). Định dạng này có tùy chọn transparency tốt hơn và thường export ra file có kích thước bé hơn. Tuy nhiên, PNG-8 không mang chức năng hoạt ảnh (animation).

PNG-24

PNG-24 cho phép bạn render hình ảnh với hàng triệu màu – giống với JPEG – và đồng thời còn có khả năng lưu trữ dữ liệu transparent.

Vì là định dạng file lossless, nên các file PNG-24 thường có kích thước lớn hơn. Nếu chất lượng hình ảnh là tiêu chí quan trọng hàng đầu, PNG-24 sẽ là lựa chọn tốt nhất cho bạn. Đặc biệt, một số dịch vụ như TinyPNG.com thường có thể giúp bạn phần nào khắc phục khuyết điểm kích thước này.

So với người anh em JPEG, file PNG-24 không tương thích rộng rãi với mọi ứng dụng và platform, phần nào giảm bớt khả năng chia sẻ trên web. Tuy nhiên, ảnh có thể được edit mà không bị giảm chất lượng.

Xếp loại: Lossless

Sử dụng trong:

• Web graphic cần transparency
• Hình ảnh với màu sắc rộng và phức tạp
• Hình ảnh cần được export và edit nhiều lần

SVG

Không như ba định dạng bên trên, SVG (Scalable Vector Graphics) không phải là dạng ảnh thuần bitmap. Mà thay vào đó là dạng vector – người anh em gần với định dạng Adobe Illustrator và EPS – dạng dữ liệu ảnh ngày càng hấp dẫn cho thiết kế web và UI.

SVG phù hợp nhất cho việc hiển thị logo, icon, map, flag, chart và các dạng graphic khác trong các ứng dụng gốc vector như Illustrator, Sketch, và Inkscape. Khi được viết theo markup gốc XML, file SVG của bạn sẽ có thể được edit trong mọi text editor và được modify bằng JavaScript hoặc CSS. Vì có thể giữ lại chất lượng ở mọi kích thướng ảnh, vector rất lý tưởng cho thiết kế responsive.

Tuy SVG về bản chất là dạng vector, nhưng bạn vẫn có thể (thậm chí còn rất thường thấy) embed thành phần hình ảnh bitmap ngay trong fiel SVG – giống y như cách bạn embed JPEGs vào HTML.

Bạn có thể làm được điều này bằng cách liên kết URL nguồn ảnh (giống cách bạn link JPG lên webpage) hoặc bằng cách chuyển đổi hình ảnh pixel sang dạng Data URI. Như bạn thấy, SVG nhờ điểm này mà có được sức mạnh và sự linh hoạt không sao bì được.

Dù SVG giúp hình ảnh của bạn trông đẹp tuyệt trên web, nó vẫn chưa thể trở thành format cho ‘mọi người mọi nhà’ dùng cho hoạt động chia sẻ của mình.

Khi bắt gặp định dạng SVG, các dịch vụ trực tuyến như WordPress, Flickr, Medium, Tumblr, and Facebook hoặc sẽ buộc bạn chuyển đổi sang format mà họ thích, hoặc – thường thấy hơn – không cho bạn upload file SVG luôn. Một số page host file SVG nổi tiếng có svgur.com, imgh.us và thậm chí là cả Github.

Xếp loại: Vector/Lossless

Sử dụng trong:

• Logos và graphics dùng cho web design
• Thiết bị hiển thị chuẩn retina

So sánh và đối chiếu

Sau khi đã biết được sự khác biệt giữa những định dạng file phổ biến, chúng ta sẽ tiếp tục so sánh chúng sâu hơn. Dưới đây bạn sẽ thấy được cách các định dạng GIF, JPEG, PNG và SVG xử lý hình ảnh, với các màu sắc cả đơn giản lẫn phức tạp, kể cả hình chụp.

Anh màu “trơn”

Kiểu ảnh đầu tiên mà chúng ta sẽ xét đến là hình ảnh màu đơn tông. Kiểu ảnh này có thể gồm đa số logo, branding, icon, bản đồ đơn giản, và diagram. Ảnh gốc là ảnh PNG 23.4 KB với độ phân giải 1280 x 1280.

Dưới đây bạn sẽ có thể thấy được điểm khác biệt về kích thước nén cũng như chất lượng ảnh. Chú ý rằng hình ảnh được lưu trữ với tùy chọn “Save for Web and Devices” trong Photoshop với setting chất lượng cao nhất.

GIF: 17.6 KB

JPEG 100% (no compression): 53.3 KB

JPEG 75%: 33 KB

PNG-8: 11.8 KB

PNG-24: 19.6 KB

SVG: 6 KB (hình vector hoàn toàn)

Ở trong trường hợp cụ thể này, chất lượng không bị mất đi quá nhiều khi so sánh sáu format này với nhau – tuy vẫn có ‘nhiễu’ nhẹ ở phần viền trong ảnh JPEG đã nén.

Không phải ảnh “trơn” nào cũng sẽ may mắn cho ra kết quả tốt như thế này. Với ảnh này, giả sử ta có file vector gốc, SVG sẽ là lựa chọn hiển nhiên với kích thước 6kb. Nếu không có vector, PNG-8 là bước lùi “tàm tạm” với hình ảnh gốc giảm từ 23.4 KB xuống còn 11.8 KB.

Ảnh màu phức tạp

Ảnh gốc có định dạng JPEG, 328 KB với độ phân giải 1280 x 960. Dưới đây bạn sẽ thấy được sự khác biệt trong kích thước nén, cũng như chất lượng hình ảnh. Chú ý rằng hình ảnh được lưu với tùy chọn “Save for Web and Devices” trong Photoshop với setting chất lượng cao nhất.

Vì chúng ta không sỡ hữu bất kỳ phiên bản vector nào của ảnh này, nên phiên bản SVG sẽ chỉ đơn giản là JPEG embed trong file SVG. Vì có làm cũng như không, nên tôi sẽ bỏ luôn ví dụ SVG.

GIF: 426kb

JPEG 100% (no compression): 776 KB

JPEG 75%: 215 KB

PNG-8: 327 KB

PNG-24: 1.7 MB

Các hình ảnh có màu sắc phức tạp thường sẽ đẹp hơn khi ở định dạng JPEG, PNG-24 hoặc SVG. Màu sắc gần như được giữ lại toàn bộ và không có hiện tượng nhiễu hay phân dải đáng ghét như với chuẩn GIF và PNG-8.

Ảnh chụp màu

Ảnh gốc ở dạng JPEG, 215KB với độ phân giải 1280 x 701. Dưới đây bạn sẽ thấy được sự khác biệt trong kích thước nén, cũng như chất lượng hình ảnh. Chú ý rằng hình ảnh được lưu với tùy chọn “Save for Web and Devices” trong Photoshop với setting chất lượng cao nhất.

Một lần nữa, với ví dụ này, file SVG vẫn sẽ không có nhiều giá trị so sánh.

GIF: 453 KB

JPEG 100% (Không nén): 410 KB

JPEG 75% : 410 KB

PNG-8: 395 KB

PNG-24: 1.03 MB

Trong trường hợp hình ảnh phức tạp, ảnh của bạn tốt nhất nên được lưu trữ ở dạng JPEG, PNG-24 hoặc SVG. Trong ảnh trên, màu sắc được lưu giữ tốt trong tất cả format, chỉ bị phân dải và nhiễu đáng kể ở phần tóc, da, background và phần trên của ảnh ở định dạng GIF và PNG-8.

Techtalk via Sitepoint