Image Compression Before the Upload

Straight from the phone

A photograph from a recent phone is around 4,000 pixels wide and several megabytes in size. Uploaded as it is, that is what every visitor downloads.

On the page it may fill a space a few hundred pixels wide. The browser shrinks it to fit, but only after the whole file has arrived.

One such photograph makes a slow page on mobile data. A gallery of twenty may never finish loading on a weak signal.

The fix is to resize and compress each image before it goes up, which takes seconds once somebody has shown the staff how.

Why the website does not fix it for you

WordPress and most other systems make smaller copies of every upload for different parts of the page. That helps, but the original stays on the server untouched.

Galleries often link to that original, some themes display it, and a theme that asks for the largest size in a narrow column sends a huge file regardless.

Resizing before upload means the largest file on the server is already a sensible one, whatever the theme does with it.

What to decide for each image

• Dimensions: the width it will actually be shown at.
• Format: JPEG for photographs, PNG for graphics with text or flat colour.
• Quality: the lowest setting that still looks right at full size.
• Orientation: rotated properly in the file itself.
• Location data: removed before the file leaves the business.
• File name: words describing the photograph, not a camera number.

The fourth catches people out. Phones often save a photograph sideways with a hidden note saying which way up it goes, and many browsers ignore the note. Rotating and saving it in an editor fixes the file itself.

How large is large enough

A photograph spanning the full width of the page needs about 2,000 pixels on its long edge. One in a column of text needs closer to 1,200. The site makes thumbnails for you.

Those figures allow for the sharp screens on phones and recent laptops, which show more detail than older ones. Going much beyond them adds weight and nothing a visitor can see.

If you are unsure what sizes your site uses, whoever built it can give you two numbers to work to.

JPEG, PNG and the newer formats

JPEG is for photographs: it handles the gradual changes of colour in a real scene well and produces small files.

PNG is for logos, screenshots, diagrams and anything with text, sharp edges or a transparent background. A photograph saved as PNG can be many times the size of the same image as a JPEG.

Chrome can display WebP, a newer format with smaller files, but Safari, Firefox and Edge cannot, so it needs a fallback set up by whoever builds the site. JPEG and PNG remain the safe choices.

Recent iPhones can also save photographs as HEIC, a format no browser displays. Check that what reaches the website is a JPEG.

Compression without visible loss

Every export tool that saves a JPEG offers a quality setting, usually a slider or a number.

On a scale of 0 to 100, around 70 to 80 usually looks identical to the original on screen, at a fraction of the file size.

Check the result at full size. If edges look smudged or skies look blocky, go up a step. Even a full-width photograph should usually come in at a few hundred kilobytes or less.

Export from the original each time, since every JPEG save loses a little more, and keep full-size originals in the business's photo library rather than on the website.

A worked example

A two-person custom closet company added photographs of finished jobs to its gallery straight from the installers' phones, a few at a time, for three years.

The gallery had grown to more than sixty photographs of several megabytes each. On a phone it showed grey boxes long after the heading had loaded, and some photographs lay on their side.

Each thumbnail opened the original file, and the originals still carried the location where they were taken: inside customers' homes.

The photographs were re-exported at a sensible size, rotated properly and stripped of location data, then uploaded in place of the originals.

Installers now send photographs to the office, where one person runs them through the same export settings before anything goes on the site.

Location data in the file

Many phones record where each photograph was taken inside the file, and anybody who downloads the original can read it.

For a product on a counter that matters little. For a photograph taken inside a customer's home, it can point to the house, which the customer never agreed to.

Most export tools can strip it, and many do so by default when saving for the web. Make sure yours does, and consider switching off location for the camera on work phones.

A routine for staff

The routine only works if anybody can follow it without asking.

Write it down: the folder photographs go into, the tool to open, the export settings and the largest file size allowed. Preview on a Mac and Paint on Windows can both resize a photograph.

Name each file in plain words before upload, and make one person responsible for what goes on the site, so the routine survives when somebody new joins.

Fixing what is already there

Most sites also carry years of oversized images. Whoever maintains yours can list the largest files on the server in minutes, and the worst tend to be a few dozen photographs on a handful of pages.

Those can be resized and compressed in place, in bulk on a WordPress site. Check afterwards that galleries no longer link to enormous originals.

The counter-case

Some images deserve more weight.

A photographer's portfolio, a print shop showing fine detail, or a product that sells on texture may justify larger files on the pages where detail is the point.

And a site with a dozen images, all added carefully by whoever built it, may already be fine. Check before assuming there is a problem.

For everybody else, resize to the space, save at a moderate quality, and make it a habit rather than a clean-up.

Before the next upload

1. Copy photographs into one web folder.
2. Rotate any that are sideways.
3. Resize to the long edge your site needs.
4. Export as JPEG at moderate quality.
5. Remove location data on export.
6. Rename the file in plain words.
7. Check the file size before uploading.

Step three is the one that makes the biggest difference. Most of the excess in a phone photograph is pixels nobody will ever see, and resizing removes them before compression even starts.

The other usual weight on a home page is covered in social media feeds embedded on the home page.

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.