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.
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.
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.
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.
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/
This is a hard idea to ship, especially if working with enthusiastic graphic designers. However, are all your images necessary?
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
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.
To summarise all of the above: