• Impact Web Design

Media Optimisation To Improve Your Website Loading Speed

Updated: Sep 14

Today, we will talk about media optimisation!

It's critical for your user experience because it significantly reduces loading time and it's a great way to improve your SEO.


Simply said, media optimisation is a two-pronged battle:


  1. Your Media's Weight And Format

  2. The Omnipresence of ALT Tags

  3. Existing Media


Website-Loading-Speed

1. Your Media's Weight And Format


The 3 historical formats:

  • JPEG: for images with many colors (pictures)

  • PNG: for images with transparency, or little colors

  • SVG: for icons

The new format generation:

  • WEBP: 25-34% lighter than similar jpg


A. Resize The Image To The Appropriate Size (Optional)

  • Resize the picture to the desired larger size (paint, preview)

You can download the Image size info extension to double-check it. If the

"Dimension" of your image is more than the "Displayed" size, you must adjust it

to fit the "Displayed" size.


Dimension-display-image




  • Set the image resolution to 72 PPI

➞ Most of the CMS do it for you




B. Make Sure That You Are Using The Right Format


You can convert your JPEG or PNG to WEBP manually using Convertio. WordPress plug-ins provide this service, but we still recommend that you do it beforehand.


C. Compress The Image Before Uploading

  • You can use Optimizilla or Tiny PNG

  • If you are using WordPress, you can do an additional compression using ReSmush.it (free) or Smush (recommended for its extra features: lazyload etc)

Image-compressor-tool












2. The Omnipresence Of ALT Tags


  • Properly name the file

  • Add an ALT tag (alt-text) and a title

We want to avoid tagging every image anything like: P45dkdii00987s.jpg for example.

Your Alt-text and title can be similar.


The Image size info extension will also allow you to double-check as well if the title of your image is optimised.


3. Existing Media


But what if the media on my website is already there?


Simply use the Screaming frog tool to identify missing alt-text and rename if needed.


screaming-frog-missing-alt-text