Visual content is the “secret weapon” when you’re trying to communicate with your audience online, whether you’re building a gorgeous website, educating with an infographic, or using video to sell your products and services on the web. 

The problem? Choosing the right image file format can feel like war.

The ideal image file formats depend on the how they’ll be used online. Are you trying to save space, and improve load times? Do you need a high quality, editable image? Do you want an animation?

The “big four” - JPG, GIF, PNG, and SVG - have been competing for decades. So which should you use on the web? We break down all four, so you’ll get it right every time.

JPG / JPEG

JPG (Joint Photographic Experts Group) was created in 1986. This image format takes up very little storage space, and is quick to upload or download.

JPGs can support millions of colors, so this file type is ideal for real-life images, like photographs. They work well on websites, and are the best choice when posting on social media channels. In fact, most digital cameras and smartphones save your pictures as JPGs.

The JPG is “lossy” - which means that when the data is compressed, unnecessary information is deleted from the file permanently. That means that some quality will be lost or compromised when any file is converted to a JPG.

Think of JPG as the default file format for uploading pictures to the web, unless they need transparency, have text in them, are animated, or would benefit from color changes (like logos or icons).

GIF

GIF (aka, Graphics Interchange Format) came on the scene in 1987 specifically to take the pain out of sending images to or from slow connections, or low bandwidth.

GIFs are “lossless” - meaning that a GIF retains all the data contained in the file, but they are smaller than JPGs, specifically because they only accommodate up to 256 indexed colors.

GIF was intended for small, simple graphic icons, but with one important caveat - they can be animated! There is no audio associated with a GIF, but they are still a powerful way to bring motion to your online channels. 

PNG

PNG (Portable Network Graphics) was invented in 1995 to replace the GIF and to get around some pesky patent issues. If the size of your file is not a pain point, and you’re working with a more complex image, PNG is probably the best choice. 

PNG-8 is similar to GIF in that it supports 256 indexed colors, as well as transparency. PNG-24, like JPGs, can support up to 16 million colors. PNGs are most often used for static images, like a JPG would, however they can support animation.

Like the GIF, PNG is lossless, so you do not lose any data during compression, and they’re ideal for detailed graphics, or when you’re working with files that are still being edited. It’s the only raster format of the four that supports transparency!

SVG

The latest of all the file types, SVG (Scalable Vector Graphics) is a vector image file format released in 2001, and is more powerful than other file formats suitable for the web. Unlike raster formats seen in JPG, GIF, and PNG, an SVG image remains crisp and clear at any resolution or size. 

That’s because an SVG is drawn from mathematically declared shapes and curves, not pixels. SVG’s can be animated, support transparency, and any combinations of colors or gradients.

SVG is a lossless file format like GIF and PNG, and they tend to be fairly large files when compared with other formats for the web.

So, which should you use?

If you’re uploading vacation pictures to Facebook, JPG is the winner. You want to make a short, hilarious animation from your favourite movie scene? GIF. If you’re going to be using high quality images, detailed icons or need to preserve transparency, PNG is the winner. SVG is ideal for high quality images and can be scaled to ANY size.

Many people choose file formats based on file size restrictions - adding pictures to your website that will load as quickly as possible to improve SEO, for example.

Pagecloud’s website editor supports all four formats, but the image optimization is done for you automatically. Just drag and drop, and the image is automatically optimized. Try it now!

Tags

Web Design

Photography