When working with web, you must realize that it’s not only about JPEG and Gif. But there are also various file types that every web designer should know. Here is short guide about types of files that might help you know about them better.
GIF: The Graphic Interchange Format
GIF is one of the most popular formats that surely everyone knows it. The GIF format is a type of bitmap. But it is quite different from JPEG or PNG since GIF files are limited to a maximum palette of 256 colors. Moreover, there is no way for you to mix all those colors.
These colors will be surely not enough as complex photographs typically have thousands of tones. This is why this color range is lost during the GIF conversion process.
But the good thing is, with wide color variation, you can keep file sizes small. This will be good for even the slowest of internet speeds. GIF have provided the web’s only transparency option for many years. You can also find this option in PNG and SVG also.
This has made GIF good for simple animations, small icons, and graphic with low pixel-to-pixel variation.
JPEG
JPEG or better known as JPG is a 16-bit format. It means that it can blend red, blue, and green light to produce millions of color. It is also very ‘photo-friendly’. This is why JPG becomes a standard format when it comes to most digital cameras on the market.
You can also choose the flexibility on how much you can compress your image from 0% to 100%. Generally, compression setting will shrink your file 60%-75% while keeping your image looking decent on most screens.
Even though, JPEG is well suited to compressing and rendering photography. But, it is less useful for ongoing editing of an image. A loss of quality can be occurred, when you export a JPEG, and it will get worse with more export. This is the reason why pro photographers generally shoot in lossless RAW format. JPEG is perfect when it is used for still images, photography, images with complex colors and dynamic.
PNG
Some people say that PNG is like a combination between both the GIF and JPEG format.
PNG-8
In many ways, PNG-8 is similar to GIF and has the same maximum color palette which is 256 colors. Besides, it has better transparency options and usually exports slightly smaller file sizes. Unfortunately, PNG-8 has no animation function.
PNG-24
With PNG-24, you can have images with millions of colors. It is almost similar with JPEG but it offers the ability to preserve transparency. You are likely to get larger files because PNG-24 is a lossless format file type. However, PNG-24 is your best option if image quality is more important than file size.
Compared to JPEG, PNG-24 is quite less ideal for web sharing. Its files are not as universally compatible with every app and platform. However, it is capable of being edited without diminished qualities.
In PNG-24, you can have web graphics that require transparency. It’s also color heavy and complex photographs and graphics. Moreover, images that require re-editing and re-exporting.
SVG
SVG is quite different from other three formats mentioned above as it is not a pure bitmap format. Instead it is a vector format which is resemble to Adobe Illustrator’s Al format and EPS. It is steadily becoming an attractive option for web and UI designers.
Some people think of SVG as “HTML for illustrations”. Therefore, SVG is best-suited for displaying logos, icons, maps, flags, charts, and other graphics created in vector graphics applications. For instance, like Illustrator, Sketch, and Inkscape. Your SVG can be edited in any text editor and modified by JavaScript or CSS and written in an XML-based markup. Besides, SVG is very ideal for responsive design as vectors can be scaled to any size while retaining crisp image quality.
Moreover, you can also embed bitmap graphics inside your SVG file, just as you might embed JPEGs in your HTML. You’ll be happy if you know, you reduce file size when compared to something like the JPEG or PNG. Bear in mind that the larger the file, the more complex your SVG will be.
You will also have logos and graphics being implemented in web design and retina screen display.