Optimised Image vs Unoptimised Image

How To Optimise Images for the Web

Last Updated on

We’ve all been there, we come across a website that has an image that takes forever to load, and that sucks! It might even be your website that has this problem… Ouch! Fortunately for you, you can avoid all the bad side of Google and the internet just by optimising your image library, although there is just one problem when you optimise your images, your quality gets reduced… But don’t fret, we’ve got the techniques and methods that let you reduce the size of your image and keep the quality great so you can proudly display your images. Let’s dive into how to optimise images for the web!

 

What And Why Do I Need to Optimise Images?

Large images slow down your web pages, what in turn makes the user experience on your site suck, meaning Google will slowly push your website down to the bottom of their search engine. But when you optimise your images you decrease the file size of the images, using either a script, plugin or by manually doing it through Photoshop, which in turn speeds up the loading time of the page, making your users happier and Google too!

Optimising your images also brings some great benefits! What benefits you might say? There are numerous benefits. According to HTTP Archive, as of April 2019, images make up an average 21% of a total webpage’s weight.

Average page size composition
Average Bytes Per Page (KB)

Let’s take a look at the main benefits:

  • It improves page loading speed. Meaning your visitors are less likely to leave your site because the page takes too long to load.
  • It improves your SEO results. When you use a great SEO plugin for WordPress like YoastSEO your site will ultimately rank higher in search engines, large image files takes a lot of bandwidth and time to load and Google wants to provide the best experience to the user, this means it will rank sites that have fast page loading times for its users to see first, this is why it’s a huge benefit to optimise your website images.
  • Uses less of your hosting bandwidth, saving you money and enabling those with a slow internet connection or limited connection to connect to your website worry-free.
  • Uses less storage on your hosting plan, saving you money and making it even faster to back up because of the lower file size.

Images now make up on average 49% of a web page’s overall composition! An increase of 28% from 2018!

How to optimise images for the web

The end goal of optimising your images is to find that balance between the lowest file size and most acceptable image quality. There are multiple ways to optimise your images, for static websites that are made out of just HTML, CSS and JavaScript you’ll either have to use an online image optimizer or optimise them yourself using Adobe Photoshop, though if you’re using WordPress you can use a plugin that will automatically optimise your images or do them manually (though we prefer plugins, much faster and saves you a lot of time!)

 

Choosing the right file format

Before you dive straight into optimising your image, you’ll need to make sure you’ve chosen the best file type for your image, there are several of them:

  • JPG – JPG is the recommended file format for most images, this format uses lossy and lossless optimisation. You’re able to adjust this file type for a good quality level and a small file size.
  • PNG – This format is recommended for logos, graphics that need transparent backgrounds, this file type produces higher quality images but also a larger file size.
  • GIF – GIF is good for short small animations, but has a limitation to only use 256 colours.
  • WEBP – is a perfect solution for those who want high-quality pictures with a smaller file size but has limited support between browsers though but there is a plugin to handle this for you so you can take advantage of this new format (more on this later)

There are plenty more formats, but these are either not universally supported by browsers or aren’t very good for optimising for the web. We recommend using WebP, JPG and PNG.

 

Quality, File Size and Size

Here is an example of what could happen if you compress an image too much. The first image is using Imagify our preferred WordPress image optimiser, the second one we compressed using Optimizilla at the lowest quality possible.

Image That Is Optimised with Imagify
Photo by Matthew T Rader from Pexels. Image Compressed with Imagify. JPG – 72KB
Image optimised using Optimizilla
Photo by Matthew T Rader from Pexels. Highly Compressed Bad Quality. JPG

As you can see the first image looks great! Whereas the second image well… Not so great. We always aim to try and keep the image size below 100 KB, that way you’re not going to be taking up nearly 50% of the page’s composition just from an image!

 

Lossless vs Lossy Compression

It’s important to understand the different compression that can be used to reduce the image size, these are lossy and lossless.

Lossy – This is a compression that removes some of the image data, this degrades the image significantly, so you’ll need to be careful to how much you reduce the image but the results is a now much smaller image size. You can use tools such as Adobe Photoshop or Affinity Photo and other image editors to adjust the quality of an image.

Lossless – This is a compression that compresses the data. This has a very little visual impact on the image quality, but it requires the images to be uncompressed before they can be rendered onto your screen (but don’t worry, your browser handles all of this for you!). You can perform lossless compression on your desktop using image editing tools like Adobe Photoshop or online using sites like Optimizilla.

We recommend trying both out and see the results for that specific image if one suits you more then go with it! Just make sure to make the image acceptable with the quality, after all, we’re after the best image quality and the smallest file size!

 

Image Optimisation Tools and Programs

There are a range of image optimisation tools and programs for you to use, both premium and free, so you can all take advantage of the results of optimising your images! some you can do manually or others that do it all for you:

How to optimise images for the web - Optimizalla Image Optimiser
Optimizilla Image Optimiser

WordPress Image Optimisation Plugins You Can Use

With WordPress, you don’t have to go through the hard manual time-consuming labour of optimising your images and there are plugins that do it all for us! Some optimise the image as you upload it and they’ll even optimise all the current images you’ve got on your website! A super time-saving feature especially if you have a large gallery that is full of unoptimised images on your website.

It is important you don’t solely rely on the plugins you might need to do a little resizing of the images, we recommend making the images no larger than 1920×1080, then uploading them to WordPress and having the image plugin do the work of optimising it for you.

Best Practices

We recommend also doing some good web practices that will help speed your website up even more!

  • If you’re using a WordPress plugin, use one that compresses and optimises the images externally on their servers, this saves your website the hard work, reducing the load time on your website,
  • Use vector (SVG’s) images whenever possible alongside your JPGs and PNGs.
  • Use a CDN to serve your images extremely fast to visitors across the globe.
  • Remove unnecessary image data.
  • Save your images in the proper dimensions.
  • Use web fonts instead of placing text within images, they look much better when scaled and take up less space.
  • Automate the image optimisation process as much as possible
  • Lazy load images for even faster page rendering times
  • Save images as “optimised for web” in tools like Photoshop
  • Use WebP in chrome where possible.

Once you have formatted and optimised your images and followed best web practices, your site will be liked more by search engines such as Google, browsers, networks, your pocket and most importantly your visitors!

Have you ever optimized your images? Do you format them by hand, plugin or some crazy super automated machine? Is there another tool you’d recommend others to use? Want to let us know how we did on teaching you how to optimise images for the web? Comment it below! Also, teach your friends how to optimise images for the web by sharing this article around!

If you enjoyed this article on how to optimise your images for the web then you’ll love our article about the basics of web design!

Want to work with a top web design agency? We offer WordPress development solutions, eCommerce Solutions and more! Get a free consultation today!