Types Of Image Formats | Best Image Formats For Web

List of Image Formats In Photoshop

First of all, Ask a Question to your self Can you figure out the difference in these images below ??

I hope You Found !! Now , When coming to quality of the image the very first question comes into a designers mind is which image quality to choose best image format for web pages design to keep the quality high and size low or for a 3D rendering map to keep the image in High resolution.

So what to do then ? How to select the image …. PNG vs. GIF vs. JPEG vs. SVG – when to use ?

lossy image compression

There are also different color depths i.e (palettes): Direct color and Indexed color ,Direct means that you can store many of colors that have not been directly chosen by the author Indexed means that the image can only store a limited number of colors usually 256 as by the color combination chart, called color map

Lossless image compression

Lossless means that the image is made smaller, but at no state of being harmed or damaged to the quality, means the image is made (even) smaller, but at a detriment to the quality.

If the saved image is in a Lossy format over and over, the image quality would get progressively worse and critical.

GIF image format

Coming to GIF Graphics Interchange format ,is an 8 bit format which means the maximum number of colors supported by the format is 256. There are two GIF standards, 87a and 89a (developed in 1987 and 1989 respectively, which is used in the case of animations , which is series of layers showing some moment in the image

GIF or Indexed only : GIF uses lossless compression, in which the image can be saved again and again without any loss of data.

The file sizes are much smaller than BMP, as compression is good , but it can only store an Indexed palette i.e INDEXED ONLY ,in which it can store only 256 colors . GIF images can also be animated and have transparency as well .

For Logos, line drawings, and other simple images that need to be small it can be used and for websites animation also GIF can be used.

Image Formats Jpeg

Next we have is JPEG : (Joint Photographic Experts Group) JPEG is a standardised image compression mechanism. JPEG is designed for compressing either full-colour (24 bit) or grey-scale digital images of “natural” (real-world) scenes. It’s Lossy / Direct .

JPEGs images designed to make detailed photographic images as small as possible by removing information that the human eye can’t notice with naked eye ,so it’s a Lossy format, and saving

the same file again and again will result in more data loss over time. It has a palette of thousands of colors ,so is great for photographs, but the lossy compression means it’s bad for logos and line drawings , Not only will they look fuzzy, but such images will also have a larger size which are not useful on the web compared to GIFs!

Overall good for Photographs.

PNG Image Formats

PNG : PNG8 : PNG stands for Portable Network Graphics. It was created as an open format to replace GIF, because the patent for GIF was owned by one company and nobody else wanted to pay licensing fees. It also allows for a full range of color for indexing and better compression. So its Indexed

PNG is a newer format, and PNG8 in terms of the upgradation of Indexing, for GIFs, however, it has a few drawbacks:

1.No support for animation

2.It has some support issues with older browsers like IE6.

3. Important software like Photoshop have very poor implementation of the format.

4. PNG8 can only store 256 colors, like GIFs.

Overall The main thing that PNG8 does better than GIFs is having support for Alpha channel Transparency.

Image Formats png

PNG24 : Its is Lossless and Direct ,

PNG24 combines Lossless encoding with Direct color (thousands of colors, just like JPEG). It’s very much like BMP in terms of direct, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG24 files will be bigger than JPEGs (for photos), and GIFs/PNG8s (for logos and graphics),so one must think of using it keeping in mind the size of them.

Even though PNG24s allow thousands of colors while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG24 will likely be at least 5-10 times

larger than a equivalent JPEG image of it, with very little improvement in visible quality, same as PNG 8 it also supports alpha channels.

vector image formats for the web

SVG , Scalable Vector Graphics (), when we talk about scalable images , ve ctor also comes in mind, so keeping in mind SVG is Lossless / and Vector format.

A filetype that is currently growing in popularity is SVG, which is totally different from all above discussed. it’s a file foformat whichas all the above, This means that it’s actually comprised of lines and curves instead of pixels. When you zoom in on a vector image, you still see a curve or a line.

When you zoom in on a Raster image, you will see pixels, so it works perfectly alright when you wanted to use for logo or banners which may be stretching on some platforms , so the problem of pixel stretching will be no more .Also, it can be edited with any editor using XML or JavaScript in the inspection .

So next time before choosing to keep in mind ! In short, a table will help you this .

Thanks For Visiting my Blog , I m Divya Popli Programmer ,Designer and Blogger By Choice .I love to Help People With All technical related Queries So whenever you stuck next time Plz feel Free To contact :)