3 Image Types for Web + Why It Matters

Believe it or not, how you save your images and what file types you choose can make a huge impact in how they perform online. Designers, photographers and more use different image types for web — including display ads — and there’s a strategy behind all of the madness.

Here’s the logic:

JPG

JPG or JPEG is our go-to file type for online images. JPGs leverage lossy compression — meaning data is lost from the image file as you edit. Ultimately, this allows you to display your image in the smallest file size possible, but can make editing difficult as the image degrades. Generally, though, we love this compression in the online world because it means we can build smaller web pages and optimize for faster loading.

Ditching the jargon, JPG files are flat and solid. They do not contain layers and only hold the most basic of data needed to create your image. They also will not support transparency, animations or irregular edges.

PNG

PNG files use lossless compression to maintain all image data while you edit. The trade off is that your images are likely to be quite a bit larger than a JPG file of the same image. Designers tend to take advantage of PNG files to create images that include transparency. But, because of their larger size, we recommend you use them in moderation to avoid increasing your page load times too much!

GIF

Last up, we have GIFs. If basic animation is what you’re after, that’s where GIF files excel. Add an attractive, simple effect to draw attention to your message — it’s shockingly effective. The catch, though, is that GIFs use a maximum of 256 colors. This makes them most useful for simple illustrations and solid colors. The don’t look quite as nice when you image contains a lot of gradients or is more photorealistic.

GIFs aren’t terribly large by nature, but complex animations or excessive colors can certainly make them heavy. Naturally, that’s going to lead to longer load times and slow down your site. So, when saving GIFs, be sure to take those things into consideration to keep them in an efficient range!