How do I reduce image size not quality?


JPEG optimisation for Creatives



How do reduce image file size without reducing quality?

As the number of pixels increase, so does file size. There are countless articles about image compression and file dimensions.

The more you read, frankly, the more confusing it gets. Unless you are a professional photographer (and sometimes even if you are!) - there is always a lingering doubt that you are processing images to get the best from them on your website, and minimising the file size.

Don't Systems like Squarespace already do this?

Squarespace and some other platforms are clever in how they deal with images. They generate a plethora of different sizes from the single uploaded original, the website software then picks the closest size to that needed and does the minimum 'inerpolation' to it which results in the best image presentation.

That's great - but the original file size might be larger than it needs to be to look exactly the same. How can you possibly know?

The Challenge

Squarespace (currently) suggest uploading images of 2,500 pixels so they can be displayed on larger screens. This can result in large file sizes. The cost is measured in page load speeds, and since this is one of the measures of your site performance, a smaller file size, whilst maintaining 2,500 pixels is highly desirable.

This is known as compression. Maintaining the dimensions of an image but reducing the actual number of bytes is the objective.

Images that are suitable for printing from contain a lot of information that cannot be seen on screen, and so for screen use, the file is larger than it needs to be.

  • Redundant pixels can be jettisoned,
  • Excess 'meta' data can be removed,
  • File history and none destructive edit information can be removed.

Is it possible?

The answer is YES! (this would be a bit of a pointless blog post otherwise!)

We found a professional photo compression tool, used by photographers around the world to prep images for the web. It makes no visible difference to images and creates images that are indistinguishable from one another, but reduces the file size by an astonishing amount.

We use JPEGmini

It's so easy to use, there's a great free trial that gives you plenty of image processing to see how effective it is on your images and the best bit - simply drag your folder of 'website candidate' images to JPEGmini on your desktop and it will process the images according to your settings, and put the processed images where you want them.

The previous paragraph would be meaningless if it didnt work! Fortunately JPEGmini does work. How it works is outside the scope of this tip (it's voodoo!)... our take on it is this: This software is the most effective way we have found of reducing file size whilst in no way compromising the image quality on screen.

It's a brilliant tool and an essential part of the Isoblue Tool Kit.

You can download a free trial here

Image processing - Done well.

Even if you use Photoshop, or Lightroom - JPEGmini still has a role to play as part of your workflow. That's how effective it is!.

Images dimensions are increasing, the emphasis on quality images on websites is paramount, as the design potential offered by increasing broadband speeds, web tech, CSS, and HTML5 means focus on file size is essential. For us, we find that JPEGmini removes inefficient file size as a cause for concern.

It's great to be able to say that a product is 'Brilliantly simple, and simply brilliant.

Chris Bampton. The Isoblue Partnership December 2018