5 Ways to Load Less Imagery to Increase Ranking and Client Happiness

The number one issue I see is often a landing page with too many images. Lifestyle images, logos, tags, product images, and more - even text in an image (more on that below).

The more we can reduce the sheer volume of imagery the client’s browser has to download, the faster the page will load.

These pictures add colour and the generation of such often keeps a graphic designer busy, but remember that a search engine can’t crawl images.

1. Scale down your images

Please don’t use a 1330x1900px image for a thumbnail. Scaling your image down to the maximum size to which it will be viewed.

As an example, I went to some yahoo’s website and found a stock image.

This image is 4.7MB and 6016x4016 pixels. It's maximum displayed width, however is 547x365 pixels.

So let’s open this in a free program called GIMP and scale it down.

Look at that, from nearly 5MB to <69KB. It wasn’t easy eating all that humble pie and following my own advice.

2. Compress your images

If you don’t have any image manipulation software with this built-in, a quick google of “free image compression” on Google will reveal many online tools that can do this for you.

An example of one of the many simple-to-use tools. This one called Optimizilla at https://imagecompressor.com

3. Use lazy loading below the fold

If the image is not above the fold (the viewport a user can see without scrolling down) then it might be worth loading it on demand if a user even scrolls down that far.

In a nutshell, instead of forcing the user to load media they may never even see, you can save their time, battery, and page loading time.

If you are using a framework that contains a package manager, then you can probably install a package and tag your images.

For more in-depth understanding, outside the scope of this article here is the top hit currently on Google - https://imagekit.io/blog/lazy-loading-images-complete-guide/

4. Use fewer images

This is a hard idea to ship, especially if working with enthusiastic graphic designers. However, are all your images necessary?

5. Recreate elements using CSS

If you are using images for simple buttons, product flags and banners (that are nothing more than coloured text on a background) then it may be possible to recreate the same effect with some CSS.

Please check out this CodePen mock-up below for a Discount Code Banner in Vanilla CSS

https://codepen.io/mongo0se/pen/bGYeLmB

BONUS - Stop using videos as backgrounds

Please, can we end the videos as backgrounds? Unless your company or site is specifically about video sharing or cinematography, then please don’t devour a visitor’s data allowance with some video of clouds or people shaking hands.

Conclusion and Summary

To summarise all of the above:

• Use less images
  • By recreating them in CSS
• If you really need these images
  • Make sure they are not larger than required by scaling them down
  • Compress them for web use
  • Lazy load images that are not immediately in the viewport