Optimising CSS background images for Web. HERO banner optimisation tutorial

A fast and easy way to optimise images in CSS background-image rule

Dmitry Pokidov
Jan 29, 2019 · 6 min read
Image for post
Image for post
Optimising image for a HERO banner through CSS

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-image property 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:

Image for post
Image for post

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!

Image for post
Image for post

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.

Statista.com

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:

Image for post
Image for post
Measuring performance with Chrome Developer Tools

Now, let’s refresh a page and find our banner image:

Image for post
Image for post
Measuring performance with Chrome Developer Tools

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:

Performance report for a Hero banner

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:

Optimising Hero banner through optimiser Pixboost

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:

Performance testing
  • 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.

pixboost

Website Performance Optimization

By pixboost

Monthly newsletter about all the things web performance. Covers what, why and how! Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Dmitry Pokidov

Written by

I’m a CTO of pixboost.com — boosting performance and conversion of your online store.

pixboost

pixboost

Website Performance Optimization

Dmitry Pokidov

Written by

I’m a CTO of pixboost.com — boosting performance and conversion of your online store.

pixboost

pixboost

Website Performance Optimization

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store