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.
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.
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.