What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG?

Question

When should certain image file types be used when building websites or interfaces, etc?

What are their points of strength and weakness?

I know that PNG &

Answer 1

JPEG is not the lightest for all kinds of images(or even most). Corners and straight lines and plain "fills"(blocks of solid color) will appear blurry or have artifacts in them depending on the compression level. It is a lossy format, and works best for photographs where you can't see artifacts clearly. Straight lines(such as in drawings and comics and such) compress very nicely in PNG and it's lossless. GIF should only be used when you want transparency to work in IE6 or you want animation. GIF only supports a 256 color pallete but is also lossless.

So basically here is a way to decide the image format:

• GIF if needs animation or transparency that works on IE6(note, PNG transparency works after IE6)
• JPEG if the image is a photograph.
• PNG if straight lines as in a comic or other drawing or if a wide color range is needed with transparency(and IE6 is not a factor)

And as commented, if you are unsure of what would qualify, try each format with different compression ratios and weigh the quality and size of the picture and choose which one you think is best. I am only giving rules of thumb.