A Guide to Image Optimisation for the Web

Image Optimisation is an important part of building a fast website,
this is a guide to help you serve up images that are optimised for viewing on the web.

A Guide to Image Optimisation for the Web

A Guide to Image Optimisation for the Web 1460 730 A Design Day

So why is the size of images important?

You have probably come across the well-known saying “Your site should be fast” and ask yourself what else can I do? Speed of a website is a keen focus not only by Google for better search ranking, but also by your end user.

We live in a mobile first world and a fast loading website is key to having a successful site. So we are going to outline some of the best practices to keep your website running in top condition just by using optimisation for images to help your site load faster than ever before.

Starting with a new website, gives you a head start. A blank canvas, right from the off gives you a huge advantage, and you will see why later in this article.

Know your image formats

Information on image formats and how to use them in websites.

  • PNG – useful for smaller images that need a transparent background
  • JPEG – The standard for images on the web
  • GIF – Useful for looping images instead of using video
  • WebP – A relatively new image format that was introduced by Google for a highly compressed image format. (Only certain browsers at this time can load webp images)
Using Photoshop for web safe images

So now you know the basics of image formats, how to optimise them?

By using photo editing software, we reduce the size of large images while trying our best to keep the original image quality as clear and sharp as possible. We use Photoshop CC, but there is other software you can use such as Affinity Photo, Gimp, and some online tools as an alternative to paid software.

We will use an image that is a PNG format 3840 x 2160px, and we are going to reduce its size while keeping as much quality as possible. We are using Photoshop for our method.

Steps we take.

  1. Firstly, open your image in Photoshop
  2. To save the image for web go to File > Export > Web Safe Image (Legacy)
  3. A panel will open. Select PNG and change to JPEG and Medium or High Quality (Dependent on quality desired)
  4. Click Progressive
  5. Select Metadata as None
  6. In Image Size select 3840 and change to 1200 for example, the attributes are linked and will change both settings together and will become 1200 x 675px
  7. Check file size on the left circled on pic
  8. Click save, that completes a web safe image
Optimise Settings

That’s it you have just achieved your first web optimised image for your site.

But there is more we can do to get the best results for your site, we will be using WordPress as an example and will give a guide to tools available for WordPress that can further shave a few kb’s of the final size and also the use of WebP images and how to get them.

Recommended WordPress Plugins for Image Optimisation.

  • EWWW image optimizer – While EWWW I.O. will automatically optimize new images that you upload, it can also optimize all the images that you have already uploaded, and optionally convert your images to the best file format, now includes WebP conversion. (Free and Paid)
  • Optimus – Optimus reduces the file size of uploaded media files automatically. Depending on the image and format, reductions in size of up to 70% are possible. Includes WebP conversion when using Cache Enabler with this plugin. (Free and Paid)
  • WP Smush – Resize, optimise and compress all of your images with the incredibly powerful and 100% free WordPress image smusher, brought to you by the superteam at WPMU DEV! (Free and paid plans)

There are 100’s of image optimisation plugins but we recommend these three for ease of use, and compression performance.

WebP Images

More on WebP images

WebP format is an innovative image format offered by Google, which provides both lossless and lossy compressed images on the websites. Using WebP format, web developers can create low sized yet good quality images, which in turn helps websites to be more responsive and optimised. You can easily find use of WebP images on Google Play Store.

WebP is intrinsically supported by Google Chrome and Opera web browsers. It is also supported by different software tools and libraries. Therefore, if you open websites which have WebP images in other web browsers like Firefox, it will show the images in normal format like .png or .jpeg. Websites like Google Play Store use WebP image and can be only found if accessed using Chrome or Opera.

A word to the wise, on existing sites.

If you have an existing site with 1000’s of un-optimised images, and want to optimise those. It’s a whole different process, and you have two real options.

  1. Install Image replace tool – You will have to go to WordPress media library, select an image to replace with a new optimised version without breaking links to the image in the database. Time consuming for 1000’s of images.
  2. The other option is to get in touch with us to help with with batch replacing images with optimised images, without breaking your site.

Important note if you run a caching plugin on your website remember to clear the cache if replacing images with optimised versions.

So that is our small guide to image optimisation, let us know your thoughts. Ask questions, and share the article to help others.

Leave a Reply

    Studio Hours

    Monday – Friday 9am – 5:30pm

    Contact Number

    0115 698 0662

    Address

    Suite 955, 109 Vernon House Friar Ln, Nottingham, NG1 6QD

    CONTACT US

    Let's Start a project together

    We are always looking forward to our next project, if you are in the stages of looking for a web designer for your brand, then please get in touch.