Infographic sau sẽ giúp chúng ta hiểu rõ hơn về những định dạng trên. Từ nguồn gốc định dạng, cách phát âm và cả phương thức nén dữ liệu của chúng, qua đó giúp ta hiểu rõ hơn tính chất của từng định dạng cho từng công việc, mục đích phù hợp. Hãy cùng tìm hiểu đâu là định dạng file thích hợp nhất cho bạn!
Sự khác nhau giữa các Định dạng hình ảnh
Định dạng ảnh JPG hay JPEG được viết tắt của Joint Photographic Experts Group
JPG (tên gốc là JPEG – viết tắt của 4 từ Joint Photographic Experts Group). Không có sự khác biệt gì giữa JPG và JPEG ngoại trừ 1 cái có 3 ký tự, 1 cái có 4 ký tự. Ban đầu khi định dạng này được Joint Photographic Experts Group tạo ra, gọi tắt là JPEG, nhưng vì MS DOS khi đó chỉ có thể xử lý hoặc đọc những file có phần mở rộng gồm 3 ký tự, nên JPEG được rút gọn thành JPG. Ngày nay, JPEG được sử dụng để cung cấp tên viết tắt hoàn chỉnh hơn cho thuật ngữ Joint Photographic Experts Group. Từ đây, trong bài viết sẽ sử dụng JPEG.
Ưu điểm của định dạng ảnh JPG hay JPEG
PG đã trở thành định dạng phổ biến bởi có thể nén ảnh rất nhiều. Giả sử bạn có 1 bức ảnh có kích thước 1MB, bạn hoàn toàn có thể nén nó xuống 500KB hay 100KB, đó chính ưu điểm của định dạng JPG.
Vậy nhược điểm của định dạng ảnh JPG là gì?
Nếu bạn nén ảnh bằng công nghệ JPG thì chất lượng hình ảnh sẽ giảm đi khá nhiều, Bởi vậy đây không phải là lựa chọn thích hợp để lưu các bức họa. Cho dù là để ở chất lượng nén JPG tốt nhất thì bức ảnh vẫn bị thay đổi 1 chút. Ngoài ra mỗi lần copy hay lưu 1 bức ảnh JPG, chất lượng bức ảnh đó sẽ bị giảm đi ta sẽ thấy những điểm mờ giữa các khối màu, sự mất nét của các vùng ảnh và đây là nhược điểm của định dạng ảnh này. Hơn nữa ảnh JPG không hỗ trợ các loại ảnh không nền
Nếu bạn quan tâm đến dung lượng hơn là chất lượng ảnh thì lựa chọn định dạng JPG sẽ rất phù hợp định dạng JPG được sử dụng tốt nhất cho: Ảnh với màu sắc phức tạp, ảnh đen trắng, ảnh tĩnh vật, ảnh đời thường, chân dung.
JPEG không thể bảo tồn được độ trong suốt của ảnh.
JPEG nên dùng vào lúc nào?
- Hình ảnh tĩnh
- Nhiếp ảnh
- Ảnh với màu sắc phức tạp
Định dạng ảnh GIF (Graphic Interchange Format)
GIF là một file màu 8bit, nó bị giới hạn trong một bảng màu tối đa 256 màu. Về cơ bản, mỗi ảnh GIF chứa “một hộp bút màu” được cài đặt trước và không có cách nào để thực sự kết hợp những màu đó thành màu mới.
Con số 256 màu nghe thì có vẻ nhiều, nhưng những bức ảnh phức tạp thường có hàng nghìn tông màu. Dải màu này bị mất trong quá trình chuyển đổi thành ảnh GIF và đây là lý do chính khiến GIF không được sử dụng cho các bức ảnh màu.
Ưu điểm của hình ảnh định dạng GIF
Ngoài hỗ trợ cho ảnh trong suốt, GIF cũng hỗ trợ cho ảnh động, giới hạn mọi khung hình trong 256 màu được chọn trước. GIF là định dạng nén không làm mất dữ liệu, nên nó được sử dụng để giữ các đường thẳng trên typography và hình dạng hình học, dù những đối tượng này phù hợp với các file đồ họa vector như SVG, hay định dạng AI của Adobe Illustrator.
Nhược điểm của GIF
GIF không lý tưởng cho nhiếp ảnh hiện đại cũng như lưu trữ hình ảnh. Khi ở kích thước nhỏ, ảnh GIF có thể có dung lượng nhỏ hơn ảnh JPEG do bảng màu rất hạn chế, nhưng ở những kích thước ảnh thông thường, ảnh nén JPEG sẽ tạo ra một hình ảnh có dung lượng nhỏ hơn. Ảnh GIF bây giờ đã khá lỗi thời, thường được dùng để tạo những ảnh động vui nhộn hoặc ảnh trong suốt thô mà thôi.
Ảnh GIF được dùng khi:
- Ảnh động đơn giản
- Icon nhỏ
- Đồ họa với các biến thể pixel-to-pixel thấp (nhiều màu phẳng như logo và cờ).
Định dạng ảnh PNG ( Portable Network Graphics)
PNG hiện tại là định dạng ảnh được dùng nhiều nhất hiện nay. Khi bạn sử dụng các hình ảnh cần độ trong suốt thì PNG là một lựa chọn tuyệt vời.
PNG là một định dạng ảnh mới hơn GIF và JPEG là PNG. PNG được ví như là “cuộc hôn nhân” của GIF và JPEG nhờ có được những tính năng tốt nhất từ 2 định dạng ảnh này. PNG sử dụng thuật toán nén LZW không làm mất chất lượng ảnh, hỗ trợ trong suốt nên nó là định dạng tuyệt vời cho đồ họa Internet.
Ưu điểm định dạng ảnh PNG
PNG hỗ trợ màu 8bit giống như GIF, nhưng cũng hỗ trợ màu RGB 24bit như JPEG. PNG thuộc loại nén lossless, không làm giảm chất lượng của ảnh.
- PNG-8: Tương tự như GIF và sử dụng cùng bảng màu 256 màu, nó hỗ trợ các tùy chọn trong suốt tốt hơn, và thường xuất file với dung lượng nhỏ hơn, nhưng PNG-8 không có chức năng hoạt ảnh.
- PNG-24: Cho phép hiển thị hình ảnh với hàng triệu màu – giống như JPEG – nhưng cung cấp thêm khả năng bảo tồn độ trong suốt. Đây cũng là định dạng ảnh có dung lượng lớn nhất, nếu chất lượng ảnh quan trọng hơn kích thước file ảnh thì PNG-24 là lựa chọn tốt nhất cho bạn. Nếu vẫn để tâm đến dung lượng file, bạn có thể thử dùng TinyPNG.com để nén xem nhé.
Nhược điểm:
Dung lượng file PNG thường lớn hơn so với JPEG, GIF và không được hỗ trợ bởi một số trình duyệt (thường là trình duyệt cổ).
So với JPEG, PNG-24 không tương thích với mọi ứng dụng và nền tảng, nên không phải là định dạng lý tưởng khi chia sẻ trên web. Tuy nhiên, nếu bạn cần chỉnh sửa ảnh nhiều lần, mà không muốn làm giảm chất lượng ảnh thì đó chính là những gì PNG có thể làm.
PNG được sử dụng cho:
- Đồ họa web yêu cầu độ trong suốt
- Bức hình hoặc đồ họa có nhiều màu với độ phức tạp cao
- Hình ảnh cần chỉnh sửa, xuất nhiều lần
Định dạng SVG (Scalable Vector Graphics)
Không giống như 3 định dạng kể trên, SVG không phải là một định dạng bitmap thuần túy. Nó là một định dạng vectơ – họ hàng gần với EPS (file có thể chứa văn bản, hình ảnh đồ họa, đang trở thành lựa chọn hấp dẫn cho các nhà thiết kế web và UI) và định dạng AI của Adobe Illustrator. Bạn có thể tưởng tượng SVG giống như “HTML cho Illustrator” và cần phải nghĩ về SVG khác với các định dạng ảnh khác.
SVG phù hợp nhất để hiển thị logo, icon, bản đồ, cờ, biểu đồ và những đồ họa khác được tạo trong các ứng dụng đồ họa vector như Illustrator, Sketch và Inkscape. Được viết trong markup dựa trên XML, file SVG có thể được chỉnh sửa trong bất kỳ trình soạn thảo văn bản nào, có thể sửa đổi bằng JavaScript hay CSS. Vì vector có thể được thu nhỏ theo kích thước bất kỳ trong khi vẫn giữ được chất lượng hình ảnh sắc nét, chúng lý tưởng cho các thiết kế đáp ứng (responsive design).
Bạn có thể nhúng đồ họa bitmap vào file SVG giống như nhúng các ảnh JPEG vào HTML, bằng cách liên kết tới nguồn ảnh thông qua URL hoặc đóng gói ảnh dưới dạng Data URI. Tính năng này giúp cho SVG linh hoạt và mạnh mẽ hơn các định dạng ảnh khác.
Ưu điểm SVG
Mình rất thích sử dụng định dạng SVG để nhúng các hình ảnh như icon, hay logo. Như Vinahi đang sử dụng thì Logo của Vinahi đang sử dụng định dạng SVG nhờ đó mà không bị mất nét hay nhòe đi dù ở bất kỳ trình duyệt nào hay bất kỳ thiết bị nào.
Không chỉ vậy bạn có thể nhúng SVG theo kiểu html, từ đó bạn có thể đổi được màu sắc của file hình ảnh mà được nhúng.
Nhược điểm của định dạng ảnh SVG là gì?
Có một số trường hợp vì SVG nhúng vào nên dẫn đến có thể bảo mật kém, đó là nghiên cứu của một số chuyên gia đi trước. Riêng mình thì chưa gặp trường hợp này.
Ngoài ra, SVG là ngôn ngữ không được thiết kế để sửa chữa trực tiếp trên mã nguồn. Để tạo ra các hình ảnh SVG nói chung, cần dùng các công cụ hỗ trợ.
Nên dùng SVG khi nào?
Tất nhiên không thể dùng SVG trong 100% mọi trường hợp. Nhược điểm của SVG là giới hạn về độ chi tiết và màu sắc, tất nhiên chúng ta có thể sử dụng SVG để vẽ một hình ảnh phức tạp, hoặc thực như ảnh chụp, nhưng nếu làm vậy thì performance sẽ rất tệ.
Định dạng ảnh WebP, Wepb là gì? – định dạng ảnh giúp tăng tốc website
WebP là định dạng ảnh hiện đại cung cấp khả năng nén rất cao cho cả kiểu nén không mất dữ liệu và mất dữ liệu (lossless and lossy) trên web. Sử dụng WebP, người quản trị và phát triển web có thể tạo ra các bức ảnh có dung lượng nhỏ hơn, phong phú hơn và giúp web tải nhanh hơn.
Ưu diểm của định dạng Webp
Ưu điểm số 1 của Webp phải kể đến đó là giúp website bạn tải nhanh hơn mà dung lượng của ảnh lại nhỏ hơn.
Kiểu nén ảnh không mất dữ liệu của WebP có kích cỡ nhỏ hơn 26% so với ảnh PNGs. Kiểu nén ảnh mất dữ liệu của WebP nhỏ hơn từ 25 – 34% so với ảnh JPEG với chỉ số chất lượng SSIM tương đương (equivalent).
Kiểu nén không mất dữ liệu của WebP hỗ trợ thuộc tính trong suốt (còn được biết đến với tên kênh alpha) với việc chỉ phải bổ sung thêm 22% bytes. Với các trường hợp khi nén mất dữ liệu RGB được chấp nhận, kiểu nén mất dữ liệu của WebP cũng hỗ trợ thuộc tính trong suốt, thường cho kích cỡ file nhỏ hơn 3 lần so với PNG.
Mức độ chấp nhận nén mất dữ liệu điều chỉnh được vì vậy người dùng có thể chọn lựa đánh đổi giữa dung lượng và chất lượng ảnh.
WebP thường có khả năng lưu trữ – tính theo trung bình – nén hiệu quả hơn 30% so với JPEG và JPEG 2000, mà không bị mất chất lượng ảnh.
Định dạng Webp có nhược điểm hay không?
Hiện tại thì nhược điểm lớn nhất của Webp đó là có một số trình duyệt chưa hỗ trợ định dạng ảnh này, nhưng bạn đừng lo lắng, Công ty Vinahi đã từng đưa ra giải pháp giúp chuyển đổi từ các dịnh dạng ảnh khác sang webp và ngoài ra định dạng ảnh Webp sẽ chỉ hiển thị khi người dùng có đủ điều kiện hiển thị nó, còn nếu trình duyệt người dùng không hỗ trợ thì sẽ tự động lấy ảnh gốc.
Khi nào nên dùng định dạng ảnh Webp?
Bạn có thể dùng định dạng ảnh Webp ngay bây giờ, cho mọi trường hợp. Nếu bạn đang sử dụng Mã nguồn WordPress đang có ý định dùng Webp hãy liên hệ với chúng tôi TẠI ĐÂY. Vinahi sẽ giúp bạn chuyển đổi định dạng mà không bị mất dữ liệu hay ảnh hưởng đến các đường dẫn ảnh trước đó.
Tổng kết:
Từ những ưu điểm và nhược điểm của từng Định dạng ảnh JPG, JPEG, GIF, PNG, SVG và Wepb từ đó bạn có thể biết được khi nào nên dùng định dạng ảnh nào?
Và mình tin tưởng rằng tương lai với WebP ở dạng nguồn mở, bất kỳ ai cũng có thể làm việc với định dạng và hỗ trợ nâng cấp nó. Với sự hỗ trợ của mọi người, chúng tôi tin rằng WebP sẽ trở nên hữu dụng hơn như là định dạng đồ họa vượt thời gian.
