Daily Tips & Tricks for Web Enthusiasts

Select the Right Image Format

There are four major image formats in common use on the web today. Each format its own strengths and weaknesses, and each is better suited to particular situations than others.

JPEG

JPEG is best for photos. JPEG images use something called lossy compression, which means that some of the original image information is thrown away (lost) in order to make the image smaller.

The JPEG format was specifically designed to find and discard information from photos that we humans are unlikely to notice is missing. This process doesn’t work very well on other types of images, like logos, diagrams, or images containing text.

PNG

PNG is best for raster images that are not photos. PNG files are generally a bit larger than JPEG images, but they use lossless compression, meaning no image information is thrown away (there are exceptions to this, like specifying a lower color depth when saving your PNG, but if you stick to the defaults you should be fine).

That means every pixel of a PNG will be rendered in perfect clarity, with none of the fuzziness that JPEG compression adds. This makes PNG images great for text and other fine details.

GIF

GIF is best for small, self-contained animations. GIF is an older, inefficient format. The only thing it has going for it is animation, and even then there are often better choices available. Video files are often higher quality at much smaller file sizes, for example, and adding animation to a website is often better accomplished using CSS and/or JavaScript.

If you have a meme, though, consider GIF.

SVG

SVG is best for vector images. Where raster images are comprised of pixels, math comprises vector images. When you enlarge a raster image you just see a lot of colorful squares, but a vector image can be scaled up or down infinitely because the math that describes its shapes and lines works at any size.

SVG is a great choice for logos, icons, text, diagrams, illustrations, and the like. The other big advantage SVG has is that they look great on all displays regardless of pixel density. Most of the images you see here at Core Assistance are SVG images.