Categories JPEG PNG

Tìm hiểu định dạng ảnh JPG, PNG, GIF và SVG

Vài lời của người dịch: mặc dù ảnh là thành phần quan trọng trên website và cũng rất quen thuộc với chúng ta, nhưng hiểu biết của chúng ta về nó không nhiều. Bài viết này nhằm khắc phục phần nào tình trạng đó.


Nếu bạn cảm thấy bài viết này có chút gì đó quen thuộc thì lý do là vì chúng tôi đã đăng phiên bản đầu tiên của nó vào năm 2009.

Dù cho SVG đã thêm một chiều hướng hoàn toàn mới vào công việc thiết kế web, các câu hỏi kiểu như “Sự khác biệt giữa JPEG và PNG là gì?” vẫn luôn quan trọng.

Chúng tôi nghĩ rằng đây là khoảng thời gian thích hợp để chúng ta có một cái nhìn tươi mới vào sự phát triển của các định dạng ảnh trên web (web-image formats).

Trong hướng dẫn ngắn gọn ngày hôm nay, chúng tôi sẽ đưa ra cho bạn bản tóm tắt nhanh về các định dạng ảnh đa dạng và khi nào thì bạn nên dùng từng loại. Hãy bắt đầu nhé.


JPG & PNG & GIF & SVG – Sự khác biệt là gì?

  Phân loại Bảng màu Hữu ích cho
JPG Mất dữ liệu Hàng triệu màu – Ảnh tĩnh

– Ảnh chụp / Nhiếp Ảnh
GIF Không mất dữ liệu Tối đa là 256 màu – Ảnh động đơn giản

– Đồ họa với màu trơn

– Đồ họa không có gradients
PNG-8 Không mất dữ liệu Tối đa là 256 màu – Tương tự ảnh GIF

– Thuộc tính trong suốt tốt hơn

– Không làm ảnh động được

– Rất tốt để làm icon
PNG-24 Không mất dữ liệu Không giới hạn số màu – Tương tự PNG-8

– Hữu ích cho ảnh tĩnh

– Ảnh cần thuộc tính trong suốt
SVG Vector/Không mất dữ liệu Không giới hạn số màu – Đồ họa / logo cho web

– Màn hìnhRetina / độ phân giải cao

1. Ảnh GIF

Bảng 256 màu
Bảng 256 màu

GIF là viết tắt của từ Graphic Interchange Format.

Nếu bạn quen thuộc với internet từ những ngày sơ khai, bạn chắc chắn biết định dạng ảnh ngố (goofiest) trên web – định dạng ảnh GIF.

Định dạng GIF là một dạng bitmap, không giống như JPEG hoặc PNG, file GIF giới hạn bảng màu tối đa chỉ có 256 màu. Về cơ bản mỗi ảnh GIF là một ‘hộp bút chì màu / box of crayons‘ sẵn có (preset) và không có cách pha trộn thực sự nào để tạo ra màu mới.

Trong khi 256 màu nghe có vẻ là có rất nhiều bút màu để bạn có thể làm việc, các bức ảnh chụp phức tạp thường yêu cầu hàng ngàn tông màu (thousands of tones). Đây là khoảng màu bị mất khi xử lý chuyển đổi sang GIF, và đây là lý do chính cho việc chúng ta không nên sử dụng GIF cho các ảnh nhiều màu sắc (ví dụ các ảnh chụp trong đời sống hàng ngày).

Trong khi ảnh GIF thường là lựa chọn tồi cho ảnh với khoảng biến đổi màu rộng, thì với giới hạn 256 màu nó có ưu thế rất lớn trong việc giúp giữ dung lượng file nhỏ, rất lý tưởng cho dù với đường truyền internet chậm nhất. Trong nhiều năm, chỉ có ảnh GIF có tùy chọn thuộc tính trong suốt – giờ thì PNG và SVG cũng cung cấp điều này.

Phân loại: Không mất dữ liệu

Lựa chọn ảnh GIF cho:

  • Ảnh động đơn giản;
  • Các icon nhỏ;
  • Đồ họa với biến đổi pixel-tới-pixel (pixel-to-pixel) thấp (thí dụ màu trơn như logo và cờ);

2. Ảnh JPEG

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

Không giống như GIF, ảnh JPEG là định dạng 16-bit, điều đấy có nghĩa là nó có thể trộn ánh sáng màu đỏ, xanh da trờixanh lá cây để hiển thị hàng triệu màu. Điều này làm cho JPG trở thành định dạnh ‘ảnh chụp thân thiện’ / ‘photo-friendly‘. Đây là một phần lý do tại sao nó là định dạng tiêu chuẩn cho hầu hết máy ảnh kỹ thuật số trên thị trường.

Định dạng JPEG cũng cho phép bạn mềm dẻo trong khả năng lựa chọn mức độ nén của ảnh – từ 0% (nén rất cao / heavy compression) cho đến 100% (không nén / no compression). Thường thiết lập độ nén 60%-75% sẽ thu nhỏ đáng kể dung lượng file của bạn trong khi hình ảnh trông vẫn tốt trên hầu hết các loại màn hình.

Trong khi JPEG phù hợp để nén và xuất ảnh chụp (photography), nó là định dạng nén mất dữ liệu (lossy compression type) nghĩa là nó ít hữu ích trong việc chỉnh sửa liên tục (ongoing editing) bức ảnh. Xuất file JPEG sẽ làm mất chất lượng, và sự mất mát này sẽ tệ hơn với mỗi lần xuất kế tiếp – giống kiểu một bản photocopy của bản photocopy khác. Đấy là lý do vì sao các nhiếp ảnh gia chuyên nghiệp thường chụp ảnh bằng định dạng không mất dữ liệu RAW.

Cũng nên lưu ý điều này, không giống như GIF và PNG, ảnh định dạng JPEG không có thuộc tính trong suốt.

Phân loại: Mất dữ liệu

Sử dụng JPEG cho:

  • Ảnh tĩnh;
  • Ảnh chụp;
  • Ảnh có nhiều màu phức tạp và năng động;

3. Ảnh PNG

Định dạng mới hơn so với GIF và JPEG, ảnh PNG (Portable Network Graphics) giống như là cuộc hôn nhân giữa định dạng GIF và JPEG nhờ hai biến thể của nó.

PNG-8

PNG-8 tương tự như GIF theo nhiều cách và sử dụng cùng bảng 256 màu (tối đa). Nó là lựa chọn tốt hơn khi tính đến phương án cần thuộc tính trong suốt và thường xuất ra file có dung lượng nhỏ hơn một chút. Dầu vậy, PNG-8 không có chức năng ảnh hoạt hình (ảnh động) như của GIF.

PNG-24

PNG-24 cho phép bạn xuất ảnh với hàng triệu màu – giống như ảnh JPEG – nhưng cũng cung cấp khả năng tạo thuộc tính trong suốt. Vì PNG-24 là định dạng file không mất dữ liệu, bạn có thể phải tốn dữ liệu lớn để lưu chúng, tuy nhiên trong trường hợp chất lượng ảnh quan trọng hơn dung lượng ảnh, PNG-24 là lựa chọn tốt nhất.

Mặc dù vậy, các dịch vụ kiểu như TinyPNG.com có thể làm dung lượng ảnh giảm đi rất nhiều. So sánh với người họ hàng JPEG, ảnh định dạng PNG-24 không tương thích phổ biến với mọi ứng dụng và nền tảng, điều này làm nó là định dạng kém lý tưởng hơn cho việc chia sẻ trên web. Dầu vậy, nó có khả năng được biên tập mà không bị giảm bớt chất lượng.

Phân loại: Không mất dữ liệu

Sử dụng PNG cho:

  • Đồ họa web yêu cầu thuộc tính trong suốt;
  • Ảnh chụp, ảnh đồ họa cần nhiều màu sắc phức tạp;
  • Các ảnh yêu cầu nhiều chỉnh sửa và xuất lại nhiều lần (re-editing and re-exporting);

4. Ảnh SVG

Không giống như ba định dạng được đề cập bên trên, SVG (Scalable Vector Graphic) không phải là định dạng bitmap thuần túy (pure bitmap format). Thay vào đó nó là định dạng vector – một người anh em rất gần với định dạng Adobe Illustrator’s AI và EPS – đây thường là lựa chọn hấp dẫn cho người thiết kế web và thiết kế giao diện người dùng (UI).

Đôi khi khá là hữu ích khi nghĩ rằng SVG là ‘HTML cho illustrations’ và bạn cần nghĩ về nó tương đối khác với các định dạng ảnh mà chúng tôi vừa liệt kê ở trên.

SVG phù hợp nhất để hiển thị logo, icon, bản đồ, lá cờ, bảng biểu và ảnh đồ họa khác đã được tạo bằng các ứng dụng dụng đồ họa vector như Illustrator, Sketch, và Inkscape.

Được viết dựa trên mã đánh dấu XML (XML-based markup), định dạng ảnh SVG có thể được biên tập trên bất cứ trình soạn thảo văn bản nào và được chỉnh sửa bằng JavaScript hoặc CSS.

Vì vector có thể được thu nhỏ lại với bất kỳ kích thước nào trong khi vẫn giữ lại độ sắc nét cho chất lượng hình, chúng rất lý tưởng cho các thiết kế đáp ứng (responsive design / thiết kế cần phóng to thu nhỏ theo màn hình thiết bị).

Cho dù SVG về cốt lõi là định dạng vector, nó có thể (thậm chí là thường xuyên) được dùng để nhúng ảnh đồ họa bitmap vào bên trong file SVG của bạn – giống như bạn có thể nhúng JPEG vào bên trong mã HTML.

Bạn có thể làm điều đó bằng cả hai cách, đó là liên kết tới một ảnh nguồn thông qua URL của nó (như bạn có thể liên kết tới JPG trên trang web) hoặc bằng cách đóng gói các pixel ảnh như Data URI. Điều này cho phép SVG không bị ngăn cản về sự linh hoạt và sức mạnh.

Dù cho SVG có thể giúp bạn giữ hình ảnh trông đẹp hơn trên web, nó không nhất thiết là một định dạng mà hàng ngày mọi người có thể sử dụng để lưu trữ và tải ảnh thông qua trang web hoặc các nền tảng mạng xã hội.

Các dịch vụ online như WordPress, Flickr, Medium, Tumblr và Facebook sẽ buộc phải chuyển đổi định dạng (forcibly convert) SVG của bạn sang định dạng mà họ thích, hoặc – điều này là thường xuyên hơn – chặn luôn (outright block) không cho tải SVG. Có một số hosting được lựa chọn cho việc lưu trữ SVG, bao gồm svgur.com, imgh.us và thậm chí cả Github, như Alex chứng minh ở đây.

Tôi hạnh phúc khi thấy các dịch vụ hosting nhỏ hơn chấp nhận SVG, Github hiện là dịch vụ SVG-thân thiện duy nhất tôi chắc chắn (confident) 99% sẽ tồn tại được trong 5 năm.

Nếu bạn sử dụng SVG để thiết kế web, bạn sẽ thấy gần như luôn luôn giảm được kích cỡ file khi so sánh với các định dạng khác như JPEG hoặc PNG. Nhưng lưu ý là với ảnh phức tạp hơn, file SVG sẽ lớn hơn.

Phân loại: Ảnh vector/Không mất dữ liệu

Sử dụng SVG cho:

  • Logo và icon với thiết kế mạnh mẽ, hình học, thiết kế thân thiện với vector;
  • Hình đồ họa có thể cần hiển thị hiển thị dưới nhiều dạng kích cỡ và màn hình;
  • Hình đồ họa đáp ứng với thiết bị của họ;
  • Hình đồ họa cần biên tập, cập nhật và triển khai lại;

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

Giờ khi chúng ta đã biết sự khác nhau giữa các định dạng ảnh phổ biến, đã đến lúc quan sát chúng khi được đặt sát cạnh nhau.

Bên dưới, bạn sẽ thấy cách các định dạng GIF, JPEG, PNG và SVG xử lý hình ảnh với cả các màu đơn giản và phức tạp, cùng với cả ảnh chụp nữa.

Hình đồ họa với màu trơn

Định dạng ảnh đầu tiên chúng tôi muốn xem xét là hình đồ họa với màu trơn (flat color graphics). Chúng bao gồm hầu hết các logo và nhãn hiệu, icon, bản đồ đơn giản, bảng biểu, và sơ đồ. Ảnh gốc là 23,4 KB PNG với độ phân giải (dimension) là 1280 x 1280.

Bên dưới bạn sẽ thấy sự khác nhau trong kích cỡ nén (compression size) cũng như chất lượng hình ảnh. Lưu ý là các ảnh được lưu sử dụng tính năng “Save for Web and Devices / Lưu cho Web và Các thiết bị” của Photoshop, với tùy chọn chất lượng cao nhất.

GIF: 17.6 KB

GIF: 17.6 KB

JPEG 100% (không nén): 53,3 KB

JPEG 100% (không nén): 53,3 KB

JPEG 75%: 33 KB

JPEG 75%: 33 KB

PNG-8: 11,8 KB

PNG-8: 11,8 KB

PNG-24:19,6 KB

PNG-24:19,6 KB

SVG: 6 KB (định dạng đồ họa vector thuần túy)

SVG: 6 KB (định dạng đồ họa vector thuần túy)

Trong trường hợp bức hình cụ thể này, không có sự suy giảm chất lượng đáng kể khi bạn so sánh sáu định dạng – mặc dù bạn sẽ chú ý đến nhiễu nhỏ gần cạnh bên trong ảnh JPEG đã được nén. Điều này không phải luôn luôn đúng đối với hình họa màu trơn, nhưng trong phần lớn trường hợp, bạn sẽ ổn với tấm hình nhẹ nhất.

Với ảnh này, giả định là chúng ta có ảnh vector gốc, SVG sẽ là lựa chọn tốt nhất với chỉ 6 KB dung lượng. Nếu chúng ta không có định dạng vector, định dạng PNG-8 là một lựa chọn đúng đắn với kích cỡ ảnh gốc giảm từ 23,4 KB xuống 11,8 KB.


Hình ảnh với màu sắc phức tạp

Ảnh gốc là ảnh JPEG 328 KB với độ phân giải 1280 x 960. Bên dưới bạn có thể thấy sự khác biệt trong dung lượng nén cũng như chất lượng ảnh. Lưu ý là các ảnh này được lưu bằng tùy chọn “Save for Web and Devices” ở lựa chọn chất lượng cao nhất.

Chúng ta không thể có phiên bản vector trong trường hợp này, bất kỳ phiên bản SVG nào của ảnh này sẽ chỉ là ảnh JPEG nhúng bên trong SVG. Điều đấy thực rườm rà, do vậy tôi không đưa ra ví dụ SVG ở đây.

GIF: 426KB

GIF: 426KB

JPEG 100% (không nén): 776 KB

JPEG 100% (không nén): 776 KB

JPEG 75%: 215 KB

JPEG 75%: 215 KB

PNG-8: 327 KB

PNG-8: 327 KB

Ảnh PNG-24 có dung lượng tới 1,7 MB.

Các ảnh với màu sắc phức tạp có xu hướng trông đẹp hơn khi sử dụng JPEG, PNG-24 hoặc định dạng SVG. Các màu sắc hầu hết được giữ lại và không có các dải xấu xí và nhiễu (ugly banding and noise), do vậy bạn sẽ thích với định dạng GIF và PNG-8.


Ảnh chụp màu sắc

Ảnh gốc là ảnh 215 KB JPEG với độ phân giải 1280 x 701. Bên dưới bạn sẽ thấy sự khác nhau trong kích cỡ nén cũng như chất lượng hình. Lưu ý là các ảnh được lưu sử dụng tính năng “Save for Web and Devices” của Photoshop, với tùy chọn thiết lập chất lượng cao nhất.

Một lần nữa, không có lợi ích khi cố tạo ra định dạng SVG ở đây.

GIF: 453 KB

GIF: 453 KB

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

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

JPEG 75%: 410KB

JPEG 75%: 410KB

PNG-8: 395 KB

PNG-8: 395 KB

PNG-24: 1,03 MB

PNG-24: 1,03 MB

Với các ảnh phức tạp, ảnh chụp của bạn được lưu tốt nhất dưới dạng JPEG, PNG-24 hoặc SVG. Trong ảnh chụp phía trên, màu sắc vẫn được giữ lại (remains preserved) trong tất cả các định dạng ngoài dải và độ nhiễu lộ ra trong phần bóng của tóc, da và nền cũng như phần trên cùng của bức ảnh được thấy dưới dạng đầu ra (outputs) GIF và PNG-8.

P/S: Phần này không có trong bài dịch. Một định dạng ảnh khác bạn nên tìm hiểu là WebP – một sản phẩm của Google, nó là một thay thế rất tốt cho ảnh PNG và JPG, với chất lượng ảnh tương đương nhưng dung lượng giảm đáng kể.

Nếu dùng WordPress giống như tôi, bạn có thể thích thú với bài viết so sánh 5 plugin nén ảnh. Chúc vui vẻ.

(Dịch từ bài viết GIF, PNG, JPG or SVG. Which One To Use? – tác giả Gabrielle Gosha , Jennifer Farley – trang SitePoint)

Back to Top