How to Determine When to Use JPGs vs. PNGs for your website

If you are not a graphic designer, like me, when you see all these different digital photo options, it can be confusing on what to use when?! Cos apparently, it makes a difference.

JPEGs tend to have a smaller file size and load faster than PNG. However, every time you save a JPEG, it loses image information and can become pixelated. PNG’s don’t lose their quality but can slow down your web pages. PNG also allows you to include transparent elements, which can come in handy for your website, particularly for icons. An example below from a previous post.

There are many other options other than JPEG and PNG, so why focus on just these? They are better suited for web pages than most alternatives. A few reasons are;

Image compression – they both compressed, which allows for faster loading times, ideal for the web.
Small file size – the compression process means that these options take up less room on servers.
Integration – many web tools assume you will be using JPEG and PNG options.

So how do you determine when to use either option?

JPEG is a perfect format for;

Complex images – although JPEG loses quality when compared to a PNG image, it is almost unnoticeable with complex images such as photos.
Photo albums – when sharing photos in bulk, the smaller file size will load the images way quicker.
Opaque images – JPEG doesn’t allow for transparency, so if the picture doesn’t need it, it is a comfortable fit.

PNG is better used for;
Images with hard lines – pixelation is very noticeable on images with hard lines, such as logos and text; sticking with PNG here is a good idea.
Portfolios – PNG’s do provide the best in quality for photographers or designers that need to showcase their talents at the highest level.
Transparent images – if you want a shot to ‘blend into’ a page, PNG is the only way to go.

There is also the introduction by Apple of the new HEIC format in their iOS 11 update. Here is a great article giving those details comparing with a JPEG. https://heic.imobie.com/heic-and-jpg.htm

Hopefully that gives you some insight into choosing images for your website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s