Don’t send me hate mail just yet! Hear me out. We all love to design websites with lots of full screen pictures because they look great. But they slow down the loading of pages A LOT. And it’s very important for websites to load quickly.
Let’s start with those three letters that get us all excited whilst simultaneously striking fear into our hearts: SEO. Search Engine Optimisation. The internet (well the blogs and advertising all over the internet aimed at us business owners) would have us believe that SEO is the be-all and end-all of all our marketing efforts. That without adequate SEO our websites are pointless. I disagree, but that’s a post for another day. SEO is important, and page load times play a big part in climbing the organic ranking ladder.
More pictures mean slower load times.
The reason that search engines penalise websites that take too long to load makes a lot of sense. We don’t like to wait. So Google (and others) reward sites that load more quickly. Think about how long you’ll actually wait for a site to load. Two seconds? Three? Maybe six if you really want to see the site and you’re already “sold”. Think about the last time you googled (that’s right it’s a verb now) a service or product and followed a link from one of the first five results. If the site didn’t load in two to three seconds then I doubt you hung around. You hit back and went to the next link on the list. We’re impatient and want quick results when searching for a product or service.
Slow sites have a high bounce rate.
Bounce rate refers to visitors that click through to your site only to leave before they do anything useful. The higher the bounce rate the worse your chances are of converting a new client or customer. If potential clients leave your site before it even loads then they are unlikely to buy from you.
Many things influence a site’s load time, but one of the biggest culprits is too many high res pictures.
Although a site looks great having seven sections per page separated by full screen photos, not many visitors will get to see the site before hitting that back button.
Designs still look great with smaller images.
A great way to reduce image size is to design with less (or no) full screen images. If pictures are designed to take up only half the screen width or placed as floating little blocks surrounded by lots of white space, then the image size can be smaller with lower resolution. This not only speeds up the load time of the page, but also works really well with a minimalist design that favours breathing space.
Instead of reducing the quality of the images, we can simply reduce the size of the image on the page. That way we maintain a beautiful, crisp picture and keep the image size as low as we can.
Pictures don't only mean photos.
All design elements are pictures that add to the size of a page. So each special little shape or wildflower sprig is added to the page as an image and adds to the overall size of the page that needs to be loaded on the visitor’s browser.
A colour as a background on a section or column is not an image. That is simply added using CSS (a simple coding language) and is quick to render. On this blog post right now there are lots of pictures. But none of them are full screen and none of them are full width so they are smaller in actual size. Also each “picture” section is not a photo. Some of them are simply columns with a background colour and a design element overlay. Now because my blog posts are focused on the words and not the images, my posts actually have less pictures than the average blog post of sites that I build. There are no galleries of high res photos on here. This is because my posts focus on what I’m good at: writing. And because I made the conscious choice to keep the pictures to a minimum to help speed up the page load times.
As a WordPress web developer I work hard to stay on top of new information regarding best practices for image optimisation and caching. As such I use a number of plugins that help me to optimise all images on each site I build and to efficiently cache the sites to serve them to the browsers as quickly as possible. I set down guidelines as to what size you, as designers, should save images out at for best display and speed on all screen sizes and I check these before uploading pictures to the media library on the shiny new website.
Consider alternate layouts and design sites with better user-experience and conversion rates.
I know “content is king” and images are queen (so more important, obvs), but large high res images in mulitple places down a web page mean slower loading times. Period. And slow load times mean less conversions. So consider hopping on the new web design trend for 2020 of large, bold text over solid colour backgrounds as the hero, with secondary, smaller images scattered around. I you have any questions at all about how best to optimise images for websites, then pop me an email. I’d be happy to help 🙂