Archived topic
slow loading hero image
3 replies · Started by kiant123 on October 1, 2021
Hi,
On my category pages and home page i have hero images that appear to be loading slowly when you first enter the page on desktop. As you enter the page you see a grey background appear before the image appears.
I've used tiny png to try and get the filesize down (also using imagify) but was wondering if you have any other tips that you think may work?
Thanks.
Hi there,
Background Images on Container Blocks are displayed using CSS. Plugins like imagify won't work with CSS backgrounds they only work with HTML image elements.
The grey background is the overlay color you have set on the container, its pure CSS so it gets displayed instantaneously whilst the background image has to be loaded.
The first URL you provided the image is over 100kb in size ( 2000px wide ). Ideally Above the Fold Images should be as small as possible. Options to reduce the file size is to rescale the image to a smaller pixel size eg. 1200px wide or use lossy minification when saving the JPEG although this will reduce its quality.
Hi David,
Thanks for your help.
What would you recommend is a good size for these images? 1200px wide by how high? I went with 2000 width in case anyone was looking at it on an ultra wide monitor and full screen, however, if the tradeoff is a slow-loading image then I'm willing to put a smaller image as a compromise.
I'm also seeing this happen on mobile so any suggested resolutions for this also is much appreciated.
Thanks.
For full width images, unless the client explicitly requests high res images for large monitors, i generally use 1200px. By default the background-size is set to cover so they always fill the screen/container no matter the monitor size. You may just notice a drop in quality when viewed on very large screens as the browser scales the image up.
Height is subjective to your design. There are methods of making the container responsive to the aspect ratio of the image, but they can be tricky.
My approach for this kind of design would be:
1. Agree an aspect ratio w x h that will be used for all images.
2. Consider when cropping the image(s) ( if required ) to try and keep the focal point in the center so it don't get clipped on smaller screens. IF all the focal points are left or right then that too is ok, as you can set the background-position to match that.
3. Set the Containers min-height using VW units ( viewport width ) to match the images aspect ratio which is calculated like so:
width / height * 100 = aspect ratio %
You current example that is:
750 / 2000 * 100 = 37.5.
So your min height will be 37.5vw
NOTE: this only works on Full Width Containers.
You can set the Tablet and Mobile min-height differently if required, including changing it to static PX units.
