How I Optimise Images For A Website Using Photoshop and ImageOptim

We all know the speed a website loads in is important — both from a search engine optimisation (SEO) point of view, but also for the best user experience.

According to statistics, 53% of visitors abandon a site if it takes more than 3-seconds to load.

A key hurdle that a client often faces when adding new content to their site (i.e. a blog or news post) is keeping image sizes small, and how to achieve this.

This tutorial runs through the process I undertake for optimising images for a website.

What’s required: Photoshop or image editing application, ImageOptim or an image compressor (see below)

What’s an ideal file size?

How to check the file size of an image:

If you’re a client of Domin8 Designs and uploading an image to your website, Webflow displays the file size for you and will often flag if it’s too big.

How to optimise your images for a website:

Step 1. Consider the dimensions required for the image

This helps inform the dimensions for the optimised image. For example, if the image used for the header of a website is scaled to be really small, then it will appear pixelated and blurry.

Similarly, if a smaller image such as a blog thumbnail is 5000px wide (which is big) when on the actual site it will only be displayed at around 500px, then the file size will be unnecessarily large.

At Domin8 Designs we often use:
~2000px wide for full background images
~1600px wide for header images
~800px to 1000px wide for general images
~500px for thumbnail only images

Step 2. “Save For Web” in Photoshop

The premise of this step is to:

1) use the “Save For Web” feature to make the image size smaller; and
2) change the dimensions.

If you are using Photoshop:

Step 2A: start by opening up your image as normal then going File > Export > Save For Web.

This will open a new dialogue box (see the images below) which is specific for saving optimised images.

The three key things in this area are:

Step 2B: Making sure the file type is a JPEG (commonly used) and changing the quality if required;
Step 2C: Changing the dimensions if required;
Step 2D: Checking the file size.

Change the preset to JPEG High and edit the quality if required.

Edit the image dimensions (as per step 1 of this tip) to an appropriate amount.

Check the approximate new file size is below the 300K mark.‍

Once done, hit the “Save…” button and save the optimised file to an appropriate location.

Step 3. Further Optimisation

If you’re not a Mac user or don’t do this regularly, then I’d recommend the online website Compressor.io, where you can upload your file and re-download a compressed version.

ImageOptim users can drop and drag multiple files in and it’ll process them all at once. It also re-writes the original file, so there’s no need to save again.

Step 4. Check the final file and upload

If you’re happy with the newly optimised image, you can upload it to your website and enjoy a faster load speed.

In summary…

If you times this by 3, 5, 10 images per page, per website, that’s a significant amount of download required and therefore speed saved on.

I hope this quick tip helps both clients of Domin8 Designs and those who manage their own website alike to upload optimised images.

Further resources: Google’s “Optimize Image” via Page Speed Insights

Originally published at https://www.domin8designs.com.au.

Founder and owner of Domin8 Designs and Domin8 Media, a website and videography studio based in Hobart, Tasmania.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store