Khi nào nên sử dụng một số loại tệp hình ảnh nhất định khi xây dựng trang web hoặc giao diện, v.v?
Điểm mạnh và điểm yếu của họ là gì?
Tôi biết rằng PNG & GIF là lossless, trong khi JPEG là lossy.
Nhưng sự khác biệt chính giữa PNG & GIF là gì?
Tại sao tôi nên thích cái này hơn cái kia? SVG là gì và khi nào tôi nên sử dụng nó?
Nếu bạn không quan tâm đến từng pixel, bạn có nên luôn sử dụng JPEG vì nó là "nhẹ nhất" không?
Câu trả lời:
Bạn nên chú ý đến một vài yếu tố chính ...
Đầu tiên, có hai loại nén: Mất mát và Mất mát .
Ngoài ra còn có các độ sâu màu khác nhau (bảng màu): Màu được lập chỉ mục và Màu trực tiếp .
BMP - Lossless / Indexed và Direct
Đây là một định dạng cũ. Đó là lossless (không có dữ liệu hình ảnh nào bị mất khi lưu) nhưng cũng không có chút nén nào, nghĩa là tiết kiệm vì BMP dẫn đến kích thước tệp RẤT lớn. Nó có thể có các bảng màu của cả Index và Direct, nhưng đó là một sự an ủi nhỏ. Kích thước tệp quá lớn không cần thiết đến nỗi không ai thực sự sử dụng định dạng này.
Tốt cho: Không có gì thực sự. Không có bất cứ điều gì BMP vượt trội, hoặc không được thực hiện tốt hơn bởi các định dạng khác.
GIF - Chỉ mất / Chỉ mục
GIF sử dụng nén không mất dữ liệu, nghĩa là bạn có thể lưu lại hình ảnh nhiều lần và không bao giờ mất bất kỳ dữ liệu nào. Kích thước tệp nhỏ hơn nhiều so với BMP, vì thực sự sử dụng nén tốt, nhưng nó chỉ có thể lưu trữ một bảng Chỉ mục. Điều này có nghĩa là đối với hầu hết các trường hợp sử dụng , chỉ có thể có tối đa 256 màu khác nhau trong tệp. Nghe có vẻ như một lượng khá nhỏ, và nó là.
Hình ảnh GIF cũng có thể được hoạt hình và có tính minh bạch.
Tốt cho: Logo, bản vẽ đường và các hình ảnh đơn giản khác cần phải nhỏ. Chỉ thực sự được sử dụng cho các trang web.
JPEG - Mất / Trực tiếp
Hình ảnh JPEG được thiết kế để làm cho hình ảnh chụp chi tiết càng nhỏ càng tốt bằng cách xóa thông tin mà mắt người sẽ không nhận thấy. Kết quả là định dạng Mất dữ liệu và lưu cùng một tệp nhiều lần sẽ dẫn đến việc mất nhiều dữ liệu hơn theo thời gian. Nó có một bảng màu gồm hàng ngàn màu và rất tuyệt cho các bức ảnh, nhưng việc nén mất dữ liệu có nghĩa là nó không tốt cho logo và hình vẽ đường kẻ: Không chỉ chúng trông mờ, mà những hình ảnh như vậy cũng sẽ có kích thước tệp lớn hơn so với GIF!
Tốt cho: Hình ảnh. Ngoài ra, độ dốc.
PNG-8 - Không mất dữ liệu / Được lập chỉ mục
PNG là định dạng mới hơn và PNG-8 (phiên bản được lập chỉ mục của PNG) thực sự là một sự thay thế tốt cho GIF. Tuy nhiên, thật đáng buồn, nó có một vài nhược điểm: Thứ nhất, nó không thể hỗ trợ hoạt hình như GIF có thể (cũng có thể, nhưng chỉ Firefox dường như hỗ trợ nó, không giống như hoạt hình GIF được hỗ trợ bởi mọi trình duyệt). Thứ hai, nó có một số vấn đề hỗ trợ với các trình duyệt cũ hơn như IE6. Thứ ba, phần mềm quan trọng như Photoshop có định dạng rất kém. (Chết tiệt, Adobe!) PNG-8 chỉ có thể lưu trữ 256 màu, như GIF.
Tốt cho: Điều chính mà PNG-8 làm tốt hơn GIF là có hỗ trợ Alpha Trans minh bạch.
PNG-24 - Không mất dữ liệu / Trực tiếp
PNG-24 là một định dạng tuyệt vời kết hợp mã hóa lossless với màu Direct (hàng nghìn màu, giống như JPEG). Nó rất giống với BMP về vấn đề đó, ngoại trừ việc PNG thực sự nén hình ảnh, do đó, nó dẫn đến các tệp nhỏ hơn nhiều. Thật không may, các tệp PNG-24 vẫn sẽ lớn hơn JPEG (đối với ảnh) và GIF / PNG-8 (đối với logo và đồ họa), vì vậy bạn vẫn cần xem xét nếu bạn thực sự muốn sử dụng.
Mặc dù PNG-24 cho phép hàng ngàn màu trong khi nén, chúng không có ý định thay thế hình ảnh JPEG. Một bức ảnh được lưu dưới dạng PNG-24 có thể sẽ lớn hơn ít nhất 5 lần so với ảnh JPEG tương đương, với rất ít sự cải thiện về chất lượng hiển thị. (Tất nhiên, đây có thể là một kết quả mong muốn nếu bạn không quan tâm đến kích thước tệp và muốn có được hình ảnh chất lượng tốt nhất có thể.)
Giống như PNG-8, PNG-24 cũng hỗ trợ độ trong suốt alpha.
SVG - Tổn thất / Vector
Một loại tệp hiện đang phát triển phổ biến là SVG, khác với tất cả các loại ở trên, đó là định dạng tệp vectơ (ở trên đều là raster ). Điều này có nghĩa là nó thực sự bao gồm các đường và đường cong thay vì pixel. Khi bạn phóng to hình ảnh vector, bạn vẫn thấy một đường cong hoặc đường thẳng. Khi bạn phóng to hình ảnh raster, bạn sẽ thấy pixel.
Ví dụ:
Điều này có nghĩa là SVG hoàn hảo cho các logo và biểu tượng bạn muốn giữ lại độ sắc nét trên màn hình Retina hoặc ở các kích cỡ khác nhau. Điều đó cũng có nghĩa là logo SVG nhỏ có thể được sử dụng ở kích thước lớn hơn (lớn hơn) mà không làm suy giảm chất lượng hình ảnh - một cái gì đó sẽ yêu cầu một tệp lớn hơn (về kích thước tệp) với định dạng raster.
Kích thước tệp SVG thường rất nhỏ, ngay cả khi chúng rất lớn, rất tuyệt vời. Tuy nhiên, điều đáng ghi nhớ là nó phụ thuộc vào độ phức tạp của các hình dạng được sử dụng. Các SVG đòi hỏi sức mạnh tính toán nhiều hơn so với hình ảnh raster vì các phép tính toán học có liên quan đến việc vẽ các đường cong và đường thẳng. Nếu logo của bạn đặc biệt phức tạp, nó có thể làm chậm máy tính của người dùng và thậm chí có kích thước tệp rất lớn. Điều quan trọng là bạn đơn giản hóa các hình dạng vector của mình càng nhiều càng tốt.
Ngoài ra, các tệp SVG được viết bằng XML và do đó có thể được mở và chỉnh sửa trong trình soạn thảo văn bản (!). Điều này có nghĩa là các giá trị của nó có thể được thao tác trên bay. Ví dụ: bạn có thể sử dụng JavaScript để thay đổi màu sắc của biểu tượng SVG trên trang web, giống như bạn sẽ làm một số văn bản (nghĩa là không cần hình ảnh thứ hai) hoặc thậm chí làm động chúng.
Trong tất cả, chúng là tốt nhất cho hình dạng phẳng đơn giản như logo hoặc đồ thị.
Tôi hy vọng điều đó sẽ giúp!
JPEG không phải là nhẹ nhất cho tất cả các loại hình ảnh (hoặc thậm chí là hầu hết). Các góc và các đường thẳng và "lấp đầy" đơn giản (các khối màu đặc) sẽ xuất hiện mờ hoặc có các tạo tác trong đó tùy thuộc vào mức độ nén. Đây là một định dạng mất dữ liệu và hoạt động tốt nhất cho các bức ảnh mà bạn không thể nhìn thấy các tạo tác rõ ràng. Các đường thẳng (như trong bản vẽ và truyện tranh, v.v.) nén rất độc đáo trong PNG và nó không mất dữ liệu. GIF chỉ nên được sử dụng khi bạn muốn độ trong suốt hoạt động trong IE6 hoặc bạn muốn hoạt hình. GIF chỉ hỗ trợ pallete 256 màu nhưng cũng không mất dữ liệu.
Vì vậy, về cơ bản đây là một cách để quyết định định dạng hình ảnh:
Và như đã nhận xét, nếu bạn không chắc chắn những gì sẽ đủ điều kiện, hãy thử từng định dạng với các tỷ lệ nén khác nhau và cân nhắc chất lượng và kích thước của hình ảnh và chọn cái nào bạn nghĩ là tốt nhất. Tôi chỉ đưa ra quy tắc của ngón tay cái.
Tôi thường đi với PNG, vì nó dường như có một vài lợi thế so với GIF. Đã từng có những hạn chế về bằng sáng chế đối với GIF, nhưng những thứ đó đã hết hạn.
GIF phù hợp với nghệ thuật vẽ sắc nét (như logo) với số lượng màu hạn chế. Điều này tận dụng khả năng nén không mất dữ liệu của định dạng, ưu tiên các vùng phẳng có màu đồng nhất với các cạnh được xác định rõ (trái ngược với JPEG, ưu tiên độ dốc mịn và hình ảnh mềm hơn).
GIF có thể được sử dụng cho các hình ảnh động nhỏ và các đoạn phim có độ phân giải thấp.
Theo quan điểm về giới hạn chung trên bảng hình ảnh GIF là 256 màu, nó thường không được sử dụng làm định dạng cho chụp ảnh kỹ thuật số. Các nhiếp ảnh gia kỹ thuật số sử dụng các định dạng tệp hình ảnh có khả năng tái tạo dải màu lớn hơn, chẳng hạn như TIFF, RAW hoặc JPEG bị mất, phù hợp hơn để nén ảnh.
Định dạng PNG là một thay thế phổ biến cho hình ảnh GIF vì nó sử dụng các kỹ thuật nén tốt hơn và không có giới hạn 256 màu, nhưng PNG không hỗ trợ hình động. Các định dạng MNG và APNG, cả hai đều có nguồn gốc từ PNG, hỗ trợ hình ảnh động, nhưng không được sử dụng rộng rãi.
JPEG sẽ có chất lượng kém xung quanh các cạnh sắc nét, v.v. và vì lý do này, nó không phù hợp với hầu hết đồ họa web. Nó vượt trội trong các bức ảnh.
So với GIF, PNG cung cấp khả năng nén tốt hơn, pallet lớn hơn và nhiều tính năng hơn, bao gồm cả độ trong suốt. Và nó là mất mát.
Có một hack có thể được thực hiện để sử dụng hình ảnh GIF để hiển thị màu sắc trung thực. Người ta có thể chuẩn bị một hình ảnh động GIF với 256 khung hình được tô màu với độ trễ 0 khung hình và đặt hoạt hình chỉ được hiển thị một lần. Vì vậy, tất cả các khung có thể được hiển thị cùng một lúc. Cuối cùng, một hình ảnh GIF màu thực sự được hiển thị.
Nhiều phần mềm có khả năng làm hỏng hình ảnh GIF như vậy. Tuy nhiên, kích thước tệp đầu ra lớn hơn tệp PNG. Nó phải được sử dụng nếu nó thực sự cần thiết.
png có màu xanh nhạt rộng hơn gif và gif là phù hợp trong khi png thì không. gif có thể làm hình ảnh động, những gì bình thường-png không thể. png-minh bạch chỉ được hỗ trợ bởi trình duyệt gần đây hơn IE6, nhưng có một sửa lỗi Javascript cho vấn đề đó. Cả hai đều hỗ trợ minh bạch alpha. Nói chung, tôi sẽ nói rằng bạn nên sử dụng png cho hầu hết các trang web trong khi sử dụng jpeg cho ảnh, ảnh chụp màn hình hoặc tương tự vì nén png không hoạt động quá tốt trên thoose.
GIF dựa trên bảng màu 256 màu cho mỗi hình ảnh (ít nhất là trong hóa thân cơ bản của nó). PNG có thể thực hiện "TrueColour", tức là 16,7 triệu màu ngoài hộp. PNG lossless nén tốt hơn GIF lossless. GIF có thể làm trong suốt "nhị phân" (độ mờ 0% hoặc độ mờ 100%). PNG có thể xử lý trong suốt alpha.
Nói chung, nếu bạn không cần sử dụng hình ảnh trong suốt Alpha và hỗ trợ IE6, PNG có lẽ là lựa chọn tốt hơn khi bạn cần hình ảnh hoàn hảo pixel cho hình minh họa vector và như vậy. JPG là vô địch cho hình ảnh.
Kể từ năm 2018, chúng tôi có một số định dạng mới, hỗ trợ tốt hơn cho các định dạng trước và một số hack thông minh sử dụng video thay vì hình ảnh.
Đối với hình ảnh
jpg - vẫn là định dạng hình ảnh được hỗ trợ rộng rãi nhất.
webp- Định dạng mới từ google. Tiềm năng tốt, mặc dù hỗ trợ trình duyệt không lớn.
Đối với biểu tượng và đồ họa
svg- bất cứ khi nào có thể. Nó có tỷ lệ tốt trong màn hình võng mạc, có thể chỉnh sửa trong trình soạn thảo văn bản và có thể tùy chỉnh thông qua JS / CSS nếu được tải trong DOM.
png- nếu nó liên quan đến đồ họa raster (tức là khi được tạo trong photoshop). Hỗ trợ tính minh bạch rất cần thiết trong trường hợp sử dụng này.
Đối với hoạt hình
svg- cộng với hình ảnh động css cho đồ họa vector. Tất cả các lợi thế của svg + sức mạnh của hình ảnh động css.
gif - vẫn là định dạng hình ảnh hoạt hình được hỗ trợ rộng rãi nhất.
mp4- nếu hình ảnh hoạt hình thực sự là video clip ngắn. Twitter / Whatsapp chuyển đổi gifs thành mp4.
apng- hỗ trợ trình duyệt khá (tức là không có IE, Edge), nhưng việc tạo nó không đơn giản như gifs.
webp- gần với việc sử dụng mp4. Hỗ trợ kém
Đây là một so sánh tốt đẹp của các định dạng hình ảnh hoạt hình khác nhau.
Cuối cùng, dù là định dạng nào, hãy đảm bảo tối ưu hóa nó - Có các công cụ cho từng định dạng (ví dụ: SVGO, Guetzli, OptiPNG, v.v.) và có thể tiết kiệm băng thông đáng kể.
Sự khác biệt chính là GIF được cấp bằng sáng chế và được hỗ trợ rộng rãi hơn một chút. PNG là một đặc điểm kỹ thuật mở và độ trong suốt alpha không được hỗ trợ trong IE6. Hỗ trợ đã được cải thiện trong IE7, nhưng không hoàn toàn cố định.
Theo như kích thước tệp, GIF có một bảng màu mặc định nhỏ hơn, vì vậy chúng có xu hướng là kích thước tệp nhỏ hơn ngay từ cái nhìn đầu tiên. Các tệp PNG có một pallet mặc định lớn hơn, tuy nhiên bạn có thể thu nhỏ pallet màu của chúng để khi bạn thực hiện, chúng có kích thước tệp nhỏ hơn GIF. Vấn đề một lần nữa là tính năng này không được hỗ trợ trong Internet Explorer.
Ngoài ra, vì PNG có thể hỗ trợ độ trong suốt alpha, chúng là lựa chọn duy nhất nếu bạn muốn có một biến thể trong suốt khác với độ trong suốt nhị phân.
Nếu bạn chọn JPEG và bạn đang xử lý hình ảnh cho một trang web, bạn có thể muốn xem xét bộ mã hóa nhận thức Google Guetzli , có sẵn miễn phí. Theo kinh nghiệm của tôi, đối với Guetzli chất lượng cố định tạo ra các tệp nhỏ hơn so với thư viện mã hóa JPEG tiêu chuẩn, trong khi vẫn duy trì khả năng tương thích hoàn toàn với tiêu chuẩn JPEG (vì vậy hình ảnh của bạn sẽ có khả năng tương thích giống như hình ảnh JPEG thông thường).
Hạn chế duy nhất là Guetzli mất rất nhiều thời gian để mã hóa .. nhưng điều này chỉ được thực hiện một lần, khi bạn chuẩn bị hình ảnh cho trang web, trong khi lợi ích vẫn còn mãi! Hình ảnh nhỏ hơn sẽ mất ít thời gian hơn để tải xuống, vì vậy tốc độ trang web của bạn sẽ tăng lên trong sử dụng hàng ngày.
GIF có bảng màu 8 bit (256 màu) trong đó PNG là bảng màu tối đa 24 bit. Vì vậy, PNG có thể hỗ trợ nhiều màu sắc hơn và tất nhiên thuật toán hỗ trợ nén
Như @aarjithn đã chỉ ra, WebP là một codec để lưu trữ ảnh.
Đây cũng là một codec để lưu trữ hình ảnh động (chuỗi hình ảnh hoạt hình). Kể từ năm 2020, hầu hết các trình duyệt chính thống đều không hỗ trợ cho nó ( bảng tương thích ). Lưu ý cho WIC một plugin có sẵn.
Nó có lợi thế hơn GIF vì nó dựa trên codec video VP8 và có dải màu rộng hơn GIF, trong đó GIF giới hạn ở 256 màu, nó mở rộng thành 2 24 = 16777216 màu, vẫn tiết kiệm không gian đáng kể.