JPG, PNG, GIP or SVG? Image Formats and when to use them
Although in digital worlds images look quite similar, differences in formats can be quite large.
Jpg, png, gif, svg are formats that are most often used. In this post, I will explain to you what they are and when to use them.
This is the most often used format and can be used in photos, images … rarely you can miss with this format.
The format is also ok for use on various devices and browsers. But have a disadvantage – e.g. does not allow a transparent background, resizing image can damage quality…
PNG-8 and PNG-24
The second most common format is PNG, which is most often used when we need a transparent background. It can also be handy when you share graphics and photos on Facebook – in cases when we don’t want to lose the quality of the photo (when uploading Facebook shrinks jpg images, which also affects the quality).
The biggest difference between png-8 and png-24 is in the number of colors used and the size of the image. If you have 256 different colors in the picture and you don’t need a transparent background, then png-8 is ok, and this will probably take up less space on the disk.
If there are more colors and you need a transparent background, choose png-24. For a transparent background and png-8, there can be very noticeably edges in the picture.
Do you remember when we were drawing a cartoon at school – on each paper we draw the sequence of events, then put it all together, flip them and got a cartoon?
Well, that’s exactly the GIF, only in digital form.
GIF is a sequence of images that appear sequentially in a given time – this looks like as animated picture.
It is most commonly used in moving graphics or animated pictures.
Among all listed formats above, this is the only vector based one – a picture consisting of vectors (not pixels) – this means that quality doesn’t change when changing the size of the graphic.
Then why not use always everything?
Usually, these are slightly larger files, so they are not the best in large quantities for the website – this would mean slower website. SVG is the best to use with: logo, icons, lines, signs… but this format is not for photographs.
These are just some of the most often used formats in the digital world. In each case, you first need to consider what you need and then choose the right format.