IMGCache

This URL API allows you to request a scaled image that is then cached for faster loading. This allows larger images to be embedded into a project without requiring new sizes. We use this on the NodeHost website along with many other sites using the Optimizer. The images provided are WEBP images but you can have it generate JPEG exports if you change the URL to https://tool.nodehost.ca/imgcache_jpeg/?url=.

Using this script if you set your image url in the attribute source and not src and use the class nh_optimizer_img the script on scroll will load the image and it's correct size into view. It will also load the correct image type loading JPEG or WEBP based on browser support. This also works with backgrounds by setting the class as nh_optimizer_bg. The code is small so you can self host or embed directly on page in a script element without any real resource usage. If you don't want us to try and detect scroll movement and load as elements get into view just add the attribute nowait='true' to the element.