Optimising CSS background images for Web. HERO banner optimisation tutorial
A fast and easy way to optimise images in CSS background-image rule
What would you say if I tell you that there is a way to make all your CSS background images not only look good but to perform well in almost no time?
Optimised CSS background images always make a website look robust and professional. Besides, Google Search loves fast and efficient sites, ranking them way above others.
In this post/tutorial, I will show you:
- how to build a simple hero banner using CSS background images;
- how to maximise performance through hero banner optimisation.
Let’s do it!
What is CSS background images and why use them?
CSS background images are images that are using a special CSS rule called background-image. It applies an image to the background of an DOM element.
The
background-imageproperty specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. w3cschools.com
Hence, is essential for the image to be the same size as an element, so that it would be possible to scale it. But let’s talk about it later, in a step-by-step tutorial.
CSS background images are especially useful because it is possible to add other elements on top of an image. Some examples would be:
- text
- call to actions
- any other elements like forms, for instance.
One of the most popular use cases of a CSS background image use is a hero banner.
Why so?
Firstly, it allows to automatically scale an image to the size of a web page, and secondly, to place title and, possibly, call to action on the hero banner.
Below is an example of a hero banner:
All the examples from this article are accessible on my demo website: www.midday.coffee
Hero banner step-by-step tutorial
Let’s see how we can implement hero banner using raw HTML and CSS, add a background-image rule, and make it both desktop and mobile friendly.
Step 1. The markup for example below is quite simple and clear. We are creating a <div> element with class=”banner”, and two nested <p> elements as a header, and a subheader.
Step 2. As you can see we haven’t set an image for our hero banner yet. We’ll use CSS background-image rule to do that:
The main bits are at the top of the snippet here:
- background-image is used to set URL of the background image,
- background-size is set to “cover” value to always scale the image to fill the entire div,
- height is necessary here because an element doesn’t know anything about image dimensions, therefore we have to set them manually.
Now, we can play around with the example to see how it behaves when we are changing the size of the browser window. As you can see, the hero banner always stretches to the entire screen width.
Step 3. Lastly, let’s make it mobile-friendly as it’s consuming too much vertical space and the text is a bit off.
In the snippet above we use media query that tells a browser to override banner CSS when the browser window width is below 576 pixels.
Performance is a king
Let’s dive in deeper and make our hero banner a real hero!
By now, we should have a complete and functional example of the hero banner. Therefore, we can dig a bit deeper and see how our image behaves on the different devices.
In 2018, 52.2 percent of all website traffic worldwide was generated through mobile phones, up from 50.3 percent in the previous year.
More on performance testing of images here.
Step 1. Firstly, let’s see how our hero banner performs. Two main factors to look at are the size of the image and its load time.
Let’s use Chrome Developer Tools to capture those values.
To open Developer Tools press F12 in Chrome Web Browser.
Then go to the Network tab and set throttling to Fast 3G, so our measurements will not depend on the Internet connection:
Now, let’s refresh a page and find our banner image:
The values that we are interested in are in the columns “Size” and “Time”.
Let’s transfer them to the table which becomes our performance report:
We are recording values for desktop and mobile screens as we are anticipating to use responsive images for our hero banner.
Please note, we are always using the same image so that we could copy desktop values to the mobile column for now.
Step 2. It’s time to optimise our background image. In this article, we are using Pixboost service to save us some time, but you could opt out to optimise and resize image manually and upload them to your hosting. Keep in mind that Pixboost does not only provide images resize and optimization functions but also:
- Support of next-generation format — Webp
- Lazy Loading
- embedded CDN to deliver an image to the browser
- No need to store different variations of the source image
- Support of HTTP/2
Step 3. Let’s update URL of the background image, so it would be optimised:
This is how to set up an URL: URL-based integration.
Optionally, you can resize and optimise your hero banner image by using other software like Photoshop or Gimp.
Step 4. Let’s rerun our performance test, capture and update the results:
- As you can see we’ve just made the image 25Kb lighter which is 31%.
- Also, by using CDN, we cut more than 1 second (34%) from load time.
Isn’t it impressive?! Let’s keep going!
Step 5. We still have the same results for desktop and mobile though. It doesn’t make a lot of sense given that desktop screens are much bigger than mobile.
Let’s fix that.
From our media query that we introduced earlier, we can see that the maximum width of the screen is 576px. Also, we set the height of our hero banner to 400px, so our maximum size of the image will be 576x400px. That means it’s a maximum size that we need to service to all mobile devices.
All we need to do is to add a separate background-image property to our CSS mobile breakpoint:
We are using “fit” operation that will resize the image to the exact size. Let’s see how our performance looks now for desktop and mobile:
Yay!
We were able to reduce image size to 28.7 kb and time to 725 ms. That’s exciting news for users of our website!
More info on Pixboost usage here: Pixboost optimisation tool overview.
That’s our final performance report with the results:
Conclusion
CSS background images is a powerful tool that you can leverage to create place images on your website. It’s especially handy in cases when you need fluid layout and overlay elements on top of your images.
Saying that you still need to watch out for the performance of your images.
You can use solutions like Pixboost to dramatically improve the performance of your images along with the performance of the website, conversion rate and SEO rank.
In the next article, we’ll explain how you can boost the performance of background images even more by using Pixboost.js library with lazy loading feature.
