Photographs Saved as PNG Files

The same picture, several times heavier

Open the largest images on many small business sites and a pattern appears. The home page banner, the slider photos and the team picture are PNG files.

A photograph saved as PNG can weigh several times as much as the same photograph saved as JPEG. On a screen, the two look identical.

On a fast office connection nobody notices. On a phone, the banner arrives a strip at a time, and the visitor waits for a picture that could have been a fraction of the size.

How photographs become PNG files

• Screenshots, which most computers save as PNG by default.
• One graphic needed transparency, so everything was exported the same way.
• Online design tools that download PNG unless told otherwise.
• Text over a photo, saved as PNG to keep the letters sharp.
• The belief that PNG is higher quality, and therefore always better.
• An editing program that remembers the last format used.

The second is the most common on business sites. A logo or a cut-out product needed a transparent background, and the designer saved every image in the batch as PNG to match.

Why the difference is so large

JPEG was designed for photographs. It discards fine detail the eye does not notice, such as tiny variations in colour across a sky or a wall, and stores the rest very compactly.

PNG keeps every pixel exactly as it was. That suits flat colours and sharp edges, where there is little variation to store.

A photograph is the opposite: millions of pixels, each slightly different from its neighbours. Stored without losing anything, it stays heavy, carrying detail no screen will show.

So the gap is widest for exactly the pictures businesses use most: wide banners of rooms, streets, food and people.

What the visitor pays

A visitor on a phone pays for that weight twice: once in waiting, and again in the data on their plan. A home page carrying several megabytes of banners spends both before anyone reads a word.

PageSpeed Insights scores the phone version of a page separately from the desktop one, and oversized images pull that score down.

What PNG is for

PNG is the right choice for logos, icons, diagrams, screenshots of text and simple graphics with a few flat colours.

It is also the format for images that need a transparent background, such as a logo placed over a photograph.

For simple graphics, a PNG limited to a small palette of colours is often smaller still. For photographs, JPEG almost always wins.

Transparency without the weight

Many images saved as PNG for transparency do not need it. If the picture always sits on the same plain background, save it as a JPEG with that background colour filled in.

Where transparency really is needed, crop the image tightly and save it at the size it is shown. A small transparent PNG is fine; a full-width one is not.

A worked example

A wine importer represents a dozen small family wineries from France and Italy, selling to restaurants and wine shops. Its website has a page for each producer and each wine.

The bottle shots had transparent backgrounds so they could sit on the site's textured paper background, which meant PNG. The designer exported everything else the same way, including five vineyard photos in the home page slider.

Each slider photo weighed a few megabytes. Restaurant buyers, often checking a wine on a phone in the lull before the dinner rush, waited for vineyards before they saw a single bottle.

On the office connection where the site was built, nobody had noticed.

The vineyard photos were re-saved as JPEGs at the width the slider actually shows, each a small fraction of its former weight, with no difference anyone could see.

The bottle shots stayed PNG, since they needed the transparency, but were cropped tightly and resized to their displayed size.

Finding the heaviest files

PageSpeed Insights lists the images it could make smaller, with an estimate of the saving for each.

In Chrome or Firefox, the developer tools' network panel shows every file a page loads with its size. Sort by size and the worst offenders rise to the top.

WebPageTest can run the same check over a slower connection, closer to what a phone on the road actually gets.

Or open the site's image folder or media library and sort by file size. Any photograph ending in .png and weighing more than a few hundred kilobytes is a candidate.

Re-saving them properly

Start from the original photograph if you have it, rather than a version that has already been resized.

Resize it to the largest width the site displays, with some extra for phones with sharp screens, then save it as JPEG. A quality setting in the upper middle of the range usually looks identical on screen.

Compare the two side by side at full size. Then replace the file on the site, remembering that a new file name means updating the page, slider or setting that uses it.

Keep the originals in a folder of their own, outside the website, so the next resize starts from the best copy.

Keeping new uploads right

Write the rule down for whoever adds images: photographs as JPEG, logos and graphics as PNG, and a maximum width for each place images appear.

Ask designers to deliver banners as JPEGs, and to say when a file genuinely needs transparency.

It matters at the moment of upload, because WordPress makes smaller copies of each image for thumbnails and other layouts, in the original's format.

A photo uploaded as PNG therefore produces a whole set of PNG copies, each heavier than it needs to be.

The counter-case

Some images look worse as JPEG. Text, sharp lines and flat colours can pick up faint smudges around the edges, and screenshots of software are often clearer as PNG.

A small photo in a sidebar may not be worth the effort either, and a site with few visitors on phones gains less than a busy one.

For any large photograph, though, JPEG is the right format, saved at the size it is displayed.

This week

1. Run your home page through PageSpeed Insights.
2. Sort the image folder by file size.
3. Mark photographs saved as PNG.
4. Check which really need transparency.
5. Re-save the rest as JPEG at display size.
6. Replace the files and update the pages.
7. Write the format rule for future uploads.

Step four is where the biggest savings hide. Many photographs saved as PNG for transparency turn out to sit on a plain background, and can become JPEGs without anyone noticing a change.

Pictures that phones download and never show are covered in images hidden on phones but still downloaded.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.