[ Nên dùng định dạng ảnh GIF, PNG, JPG hay SVG ]

Lời nói đầu

Nếu bạn thấy bài viết này khá quen thuộc, thì lý do là chúng tôi đã xuất bản ấn bản đầu tiên của nó vào năm 2009. Trong khi SVG đã thêm một chiều hướng hoàn toàn mới vào thiết kế web, những câu hỏi như “Sự khác biệt giữa JPEG và PNG là gì?” vẫn còn được đặt ra. Chúng tôi nghĩ rằng đã đến lúc nhìn lại một cách tổng thể trạng thái hiển thị các định dạng ảnh trên web.

Hướng dẫn ngắn sau đây sẽ cung cấp cho bạn tóm tắt nhanh các loại file ảnh khác nhau và hướng sử dụng tốt nhất cho từng trường hợp.

Nội dung

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

 Loại định dạngBảng màuSử dụng tốt nhất cho
JPGNén mất dữ liệuHàng triệu màu sắc– Các ảnh tĩnh
– Nhiếp ảnh
GIFNén không mất dữ liệuTối đa 256 màu– Hình động đơn giản
– Đồ họa với màu trơn
-Đồ họa không có gradient
PNG-8Nén không mất dữ liệuTối đa 256 màu– Tương tự như định dạng GIF
– Xử lý transparency tốt hơn nhưng không có hình động
-Tuyệt vời khi sử dụng cho biểu tượng
PNG-24Nén không mất dữ liệuKhông giới hạn màu sắc– Tương tự như định dạng PNG-8
– Xử lý hình ảnh tĩnh và transperency
SVGVector/ Nén không mất dữ liệuKhông giới hạn màu sắc– Đồ họa/Logo cho web
– Màn hình Retina/độ phân giải dpi cao

GIF: The Graphic Interchange Format

Trừ khi là bạn vừa đi từ năm 1985 đến hiện tại thông qua cỗ mãy thời giàn con nếu không bạn chắc hẳn là đã quen thuộc với định dạng ảnh “ngố” của web – GIF (Graphics Interchange Format).

63fd5f1e a915 4e23 a6d7 2a2f4f38395a

  • Định dạng GIF là một loại bitmap, nhưng khác với JPEG hoặc PNG, các tệp GIF được giới hạn ở một bảng màu tối đa 256 màu. Về cơ bản, mỗi bức ảnh GIF chứa một ‘hộp bút chì màu’ đã định sẵn và không có cách nào để pha trộn những màu sắc này để tạo ra màu sắc mới.

  • Trong khi 256 màu có vẻ là số lượng màu lớn để tạo ra một bức ảnh nhưng thực tế các hình ảnh phức tạp lại thường có hàng ngàn các tông màu khác nhau. Chính vì thế nhiều khoảng màu bị mất trong quá trình chuyển đổi sang GIF và đây là lý do chính không nên sử dụng GIF cho ảnh màu.

  • Mặc dù GIF nói chung là sự lựa chọn không tối ưu đối với hình ảnh có biến thể màu rộng, nhưng giới hạn 256 màu rất có ích để làm kích thước tệp nhỏ lại, do đó đây là sự lựa chọn lý tưởng khi sử dụng internet tốc độ chậm.

Phân loại: Nén không mất dữ liệu Sử dụng GIF cho:

  • Hình động đơn giản
  • Các icon nhỏ
  • Hình ảnh ít chênh màu giữa từng pixel (các màu trơn như logo hay lá cờ)

JPEG

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

  • Không giống như GIFJPEG là một định dạng 16-bit, có nghĩa là nó có thể trộn ánh sáng màu đỏ, xanh dương và xanh lục để hiển thị hàng triệu màu. Điều này làm cho JPG rất ‘thân thiện với hình ảnh’. Đây là một phần lý do tại sao nó là một định dạng chuẩn trong phần lớn các máy ảnh kỹ thuật số trên thị trường.
  • Định dạng JPEG cũng cho phép bạn linh hoạt chọn độ nén của ảnh – từ 0% (nén nặng nhất) đến 100% (không nén). Nói chung, cài đặt nén 60% -75% sẽ làm giảm đáng kể tệp của bạn trong khi vẫn giữ cho hình ảnh hiển thị chất lượng trên hầu hết các màn hình
  • Tuy JPEG thích hợp để nén và render ảnh chụp, nó lại là một kiểu nén mất dữ liệu, có nghĩa là nó ít hữu ích cho việc chỉnh sửa liên tục một hình ảnh. Xuất một ảnh JPEG dẫn đến giảm chất lượng ảnh, và chất lượng sẽ tiếp tục giảm với mỗi lần xuất ảnh tiếp theo – giống như bản photo lại từ một bản photo. Đây là lý do tại sao các nhiếp ảnh gia chuyên nghiệp thường chụp ở định dạng RAW không mất dữ liệu.
  • Cũng lưu ý rằng, khác với GIF và PNGJPEG không thể bảo vệ transparency của ảnh.

Phân loại: Nén mất dữ liệu Sử dụng JPEG cho:

  • Ảnh tĩnh
  • Ảnh chụp
  • Anh với màu sắc phức tạp và sống động

PNG

Có một định dạng mới hơn GIF và JPEG là PNG (Portable Network Graphics), PNG giống như kết quả cuộc hôn nhân giữa GIFvà JPEG.

PNG-8 PNG-8 tương tự như GIF theo nhiều tiêu chuẩn và sử dụng cùng một bảng 256 màu (tối đa). Nó có các lựa chọn ,làm trong suốt tốt hơn và thường xuất ảnh có kích thước nhỏ hơn một chút. Tuy nhiên, PNG-8 không có chức năng làm ảnh động.

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 (trong suốt). Vì là định dạng nén không mất dữ liệu, 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à quan trọng hơn kích cỡ ảnh, 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 cha JPEG, file PNG-24 không tương thích rộng rãi với mọi ứng dụng và platform, điều này 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.

Phân loại: Nén không mất dữ liệu Sử dụng PNG cho:

  • Đồ họa web 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

SGV

  • 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 với các nhà thiết kế web và UI.
  • Đôi khi rất hữu ích khi nghĩ đến SVG dưới dạng HTML cho minh hoạ và bạn cần suy nghĩ về nó khá khác biệt hoàn toàn so với những định dạng ảnh mà chúng tôi đã liệt kê
  • SVG phù hợp nhất cho việc hiển thị logo, icon, bản đồ, lá cờ, biểu đồ và các dạng hình họa khác trong các ứng dụng gốc vector như IllustratorSketch, 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 chỉnh sửa 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) đặt thành phần hình ảnh bitmap ngay trong fiel SVG – giống như cách bạn đặt JPEG vào HTML.
  • Bạn có thể làm được điều này bằng cách liên kết đến một nguồn ảnh qua URL (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 Data URI. Điều này làm SVG 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 rất đẹp trên web, nó vẫn chưa thể trở thành định dạng mà ‘mọi người mọi nhà’ dùng cho hoạt động lưu và chia sẻ của mình qua website hoặc các mạng xã hội.
  • 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ọ muốn, hoặc – thường thấy hơn – không cho bạn upload file SVG luôn

Phân loại: Vector/Nén không mất dữ liệu Sử dụng SVG cho:

  • Logo và icon với thiết kế vector hình học thân thiện
  • Hình ảnh cần được hiển thị ở nhiều kích cỡ và màn hình
  • Hình ảnh tương thích với thiết bị
  • Hình ảnh cần được sửa đổi, cập nhật và triển khai lại

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, JPEGPNG 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.

Ảnh 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, nhãn hiệu, icon, bản đồ đơn giản, biểu đồ và sơ đồ. Ả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 chất lượng cao nhất.

GIF: 17.6 KB 801122eb a944 4d97 8175 b8c113c32823

JPEG 100% (no compression): 53.3 KB 60ce1de9 bde5 41d0 88c6 ee32773a931a JPEG 75%: 33 KB 3f2173a8 09cf 4bec a22f 210d94ee59a0 PNG-8: 11.8 KB 9a5f7919 9b6f 4a1b aa84 154d516c1baf PNG-24: 19.6 KB 2550293f a135 4864 be36 db6c8ed31c32 SVG: 6 KB (hình vector hoàn toàn) 1486513498pc 1776996

  • Ở 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 định dạng với nhau – tuy bạn vẫn thấy có ‘nhiễu’ nhẹ ở phần viền trong ảnh JPEG đã nén. Điều này không phải lúc nào cũng đúng với đồ hoạ màu trơn, nhưng trong hầu hết các trường hợp, bạn nên sử dụng với hình ảnh byte nặng ít nhất. 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 đúng đắn 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 chất lượng cao nhất.
  • Vì chúng tôi không sỡ hữu bất kỳ phiên bản vector và PNG-24 nào của ảnh này, nên phiên bản SVG sẽ chỉ đơn giản là JPEG được gắn vào trong file SVG. Vì có làm cũng như không, nên tôi sẽ bỏ luôn ví dụ SVG và PNG-24: 1.7 MB.

GIF: 426kb 4f11b4e8 910d 4781 8a3a 7d7fc40e0698 JPEG 100% (no compression): 776 KB 37327e50 9a40 4dfe 89e1 7d5b1c772d51 JPEG 75%: 215 KB cee3e931 3ea1 410f 896c fd2c2819bb71 PNG-8: 327 KB e47474d6 a1b8 4cae ac5d 6dd6113ae038

  • 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 xấu đi như với 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 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 d170ac7d 9411 4c6b a2ed 514d27518a94 JPEG 100% (Không nén): 410 KB 27db8854 73ed 4ef4 9150 c193f4fd65fb JPEG 75% : 410 KB 805b6ddd 7210 45dd 8ad7 fc7271e781e2 PNG-8: 395 KB cfea015a 7d1b 4382 a777 0807c2182e2e PNG-24: 1.03 MB 931813c3 f683 4e50 95f0 782f5c88c5a8

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 JPEGPNG-24 hoặc SVG. Trong ảnh trên, màu sắc được lưu giữ tốt trong tất cả định dạng, 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.

Thông tin liên hệ, hỗ trợ trực tuyến - PHONG MỸ DESIGN

CÔNG TY TNHH TMDV PHONG MỸ

Hotline / Zalo: 0973.01.02.58 - 0987.34.52.58

Email: info@phongmy.vn

Website: www.phongmy.vn

Địa chỉ: 160/10A Đ.ấp Thới Tây 2, ấp Thới Tây 2, Xã Tân Hiệp,H.Hóc Môn, TP.HCM

MST: 0316093547

BẠN CẦN TƯ VẤN THÊM ?

Luôn đặt mình vào vị trí của khách hàng nên chúng tôi hiểu rằng: hỗ trợ thông tin chính xác & nhanh chóng là điều cực kỳ quan trọng.
Nếu bạn cần sự trợ giúp chúng tôi sẵn sàng phục vụ.