We've been rolling out a new bespoke imaging solution developed in-house for Scrumpy building on our years of experience building high traffic property and property listing websites including Shortbreaks.com. It's a powerful technology that is completely invisible to both our clients and their customers.
Being an invisible technology it's important to really concentrate on the key improvements for our clients:
- Reduced image weight by up to 20% based on old images
- Improved perceptual image quality
- New layout possibilities
- Up to 80% faster image load times for mobile users
Background
Many visitors will base their perception of the overall quality of a holiday property on the quality of the imagery. It's important that the images on our clients websites are crisp, they load swiftly and they compliment the design.
Design trends right now dictate large format banner images, this means that the main 'weight' of most websites comes from the images on the page. As designs dictate large banner images, our internet connections and the devices we use become more mobile and thus slower, the two don't go together very well. Our new imaging solution is an attempt to tackle this 'weight'.
Our goals were simple but conflicting:
- Decrease image 'weight' to improve page load times
- Increase image quality to improve customer experience
Achieving both goals is a difficult balancing act. Our old method relied on producing several 'styles' of images to use around the site, one for banner images and one for thumbnails, it is a very widely used method. We optimised the old images as they were uploaded by passing them through a variety of tools. The problem with our old method was that adding new 'styles' meant reprocessing old images and any improvements to optimisation techniques meant again reprocessing old images.
The new imaging solution allows us to define 'styles' on the fly, to improve optimisation at any point (new formats, new optimisation tools, tweaked options, etc) and allows us to take advantage of brand new improvements in image delivery.
Image Delivery
We're using the brand new 'Client Hints' specification to help deliver the correct imagery for the target device, this is helping to reduce data wastage and ensures images look great no matter what device is being used. We essentially look at the size of the screen and ensure we never send an image bigger than this to help reduce overall image 'weight'.
We're intelligently selecting the best image format based on browser support, including Google's WebP format. The intelligent format selection means users are now receiving better quality imagery at lower file sizes.
Imaging requests are automatically cached by our CDN, requests are fronted by a global distribution network and the server automatically scales based on current demand.
The imaging system is a project we're excited about getting out in the wild and we're committed to improving and expanding what it can do for our clients websites.
Future Improvements
Upcoming improvements will add fallback 'client hints' based on device detection, fluid image sizing and DPI sensitive imagery meaning that 'High DPI' devices such as the iPhone will receive pixel dense imagery at just the right size.