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.](https://cdn.hackernoon.com/images/PG9GJ9It2FOXrr2T8EAC6UYf0Vj1-nk93ebq.png)

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

\
 ![](https://cdn.hackernoon.com/images/PG9GJ9It2FOXrr2T8EAC6UYf0Vj1-vlb3ewk.png)

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

\
 ![](https://cdn.hackernoon.com/images/PG9GJ9It2FOXrr2T8EAC6UYf0Vj1-34c3evn.png)

## 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](https://cdn.hackernoon.com/images/PG9GJ9It2FOXrr2T8EAC6UYf0Vj1-cdd3ea7.png)

## 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

\


CodePen

Google

2022 - HackerNoon Contributor of the Year - Game Development

2022 - HackerNoon Contributor of the Year - Philosophy

2022 - HackerNoon Contributor of the Year - Self Improvement

clintveasey.co.uk

Nominated for 2022 - HackerNoon Contributor of the Year - Philosophy

Nominated for 2022 - HackerNoon Contributor of the Year - Game Development

Nominated for 2022 - HackerNoon Contributor of the Year - Self Improvement

Full Stack Web Developer

Too Long; Didn't Read

Web Development & Ecommerce Writing Contest

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

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

Too Long; Didn't Read

Companies Mentioned

@cveasey

RELATED STORIES