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. 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. 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 if a user even scrolls down that far. on demand 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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Saner Method for Keeping Under API Rate Limits

5 Best Online Tools to Compress and Optimize Your Images

AV1 Bitstream Analyzer

Boosting Website Performance: Leveraging Webpack for File Compression and Optimization

Bundlejs: An Online Esbuild-Based Bundler

Delta Compression: Diff Algorithms And Delta File Formats [Practical Guide]

A Saner Method for Keeping Under API Rate Limits

5 Best Online Tools to Compress and Optimize Your Images

AV1 Bitstream Analyzer

Boosting Website Performance: Leveraging Webpack for File Compression and Optimization

Bundlejs: An Online Esbuild-Based Bundler

Delta Compression: Diff Algorithms And Delta File Formats [Practical Guide]

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps