Designing Image Rich Websites
Designing image rich websites
How Brilliant tackles large amounts of image data within our website builds.
Jon Strube
October 7th, 2018
Written by Jon Strube
We all expect full screen images, HD video and high resolution product photography when browsing online, but providing a high level visual experiences can produce negative factors such as poor page load times and interaction speeds that often users simply will not deem acceptable.

Images are extremely important within web design, they provide usable and memorable experiences that keep the user focused and informed, while visiting your website and then imprinted in their memory when they leave.

In order to keep using great imagery in our web builds, we have adopted a few methods to ensure we can confidently display icons and images they way they should be.

SVG vs PNG
We have spoken quite a bit about how awesome Scalable Vector Graphics (SVG) are and why we are using them whenever there is the opportunity, but just because there is an article dedicate entirely to them, doesn't mean they don't belong here too. SVG's use mathematical data (vectors) to display images, rather than pixel data. This means that they have an extremely small file size and can scale to any size without degradation. If a graphic can be reproduced using vectors then we will to ensure the image loads super quick.

Sprite Sheets
One great trick for speeding up load times of a website is to use a sprite sheet. A sprite sheets is a single image that contains multiple images and icons which is then positioned on the page via CSS (Cascading Style Sheets). The benefits of using sprite sheets are that loading multiple images takes time and resources, however, loading a single image and displaying its components is much faster because doing so reduces the number of server requests and optimizes bandwidth.

Lazy-load Images
Having to load in a web page with multiple photographs and image galleries adds to the pages weight and can have a real strain on the page load, so one of the best techniques to help the page along is to adopt lazy loading. The principle of lazy loading is simple: load an image only when it is visible in the viewport of the browser instead of having the visitor wait by loading the entire collection of images. By loading images only when you need them, the user experience is massively improved. Images can be loaded as we scroll down the page, so the page is only displaying what it needs to at any given point.

At Brilliant we do everything in our power to make sure that we are delivering the best performing websites possible and are always testing, developing and adopting techniques and approaches to improve and succeed.

If you are finding that your website is under performing, loading slowly or not getting as much traffic as you would like then talk to us today, we can help you boost your websites performance.

The Web Design Museum
Mobile-first indexing
Talk to us.
To discuss your Brilliant idea or project, call us on 01279 725358 or send us an email enquiry below…
Request support through our app
Download our Brilliant Helpdesk App!
Brilliant Helpdesk App on the App Store Brilliant Helpdesk App on the Play Store
© 2018 Brilliant Ltd. | Company Information
This website uses cookies
More information