Optimize slider background images to load WordPress faster

Graphics are one of the best ways to provide information in an interesting and efficient manner, allowing visitors to get a complete story from a single image. Professional-looking images can immediately build trust in your users, and they’ll stick with viewers longer than texts. Why? Because we, humans are visual creatures, we see something spectacular and we are likely to remember them. Just think about the billboard you see every day on your way home: you remember it not by the text it says (have you ever read it anyway?), but by the image printed on it.

Of course, there can be downsides of using (too many) images, the most common is the page-speed, but let’s be honest: you’re looking at a slider, you want to put images on your website, and you expect your slider to handle the speed issues for you. If you have already installed Smart Slider 3 to your WordPress, Joomla! or Magento site, the slider will help you take care of this issues, and it will be easy.

When building a slider, it is really important to use good images. I’m not just talking about the quality, but the image itself. When choosing your images make sure that they match your website’s content. Do you have a website for your law firm? Avoid using pictures about mountains, seas, the sky, or even about animals, rather choose pictures about your company members. Men and women in suits, shots from the courtroom and judge hammers will look thousand times better than any sea could.

Background image used right and wrong
Background image used right (top) and wrong (bottom)

By the way, did you know that there are countless websites where you can get high quality pictures for free? Our favorite places to get free high quality stock photography: Unsplash, Picjumbo, Death to the Stock Photo, Kaboompics.

Background image optimization

Once the image is chosen, there are still some things which should be considered. A jpg file is better than a png one, as it loads faster, also their file size is usually smaller. However, the downside of the jpg images is the lossy compression, which means that the details can get lost, and jpg images can’t deal with transparency either.
The other important thing is the proper image size and quality, you don’t need to use too high quality images. But, you might remember, I said quality is important like three sentences ago! Of course, it is important, as you don’t want to show blurry images to your users, but you don’t need 6000x4000px razor-sharp images either, as after a given quality people’s eyes can’t see the difference. Nevertheless, your website will feel it, so will your users, because the file size will be larger, and the page will need more time to load, which will be especially painful for users with slow internet connection.

When your resize your images, your goal should be either the slider size, or the size the images will be viewed on a fullHD (1920x1080px) monitor. Which usually means 1920px wide images. You shouldn’t really use bigger ones, not just because of the loading time, but because browsers can make them look bad when the images are rendered. It’s worth knowing that browsers are the worst image resizing tools, so when the image has to be scaled down from a really large size the result will be worse than having to scale up a smaller image a little bit. (E.g. a 1500x1000px image won’t look that bad on full HD, as the mentioned 6000x4000px image, because the browsers have trouble with compressing 6000px to 1920px.)

Small image in the slider
Small images was used in the slider, so the browser scaled it up

If the image you are using as the main background image has already been uploaded to your website, and you don’t want to resize it on your computer and upload it back again, there is an option in Smart Slider 3 where the slider will optimize these images for you (the images will be as large as your defined slider size), so you don’t have to do it for each images you have. Smart Slider 3 even allows you to select different image sizes for different devices: you will be able to select other background image for mobile and tablet users, and retina screens. This way your users don’t have to load larger images when they don’t need them. Smart Slider 3 comes to the rescue again, with two different loading options (lazy loading and delayed load) to choose from. Each option will give you the ability to free some speed when your site is loading.

On 20 April, 2016 we released Smart Slider 3 version 3.0.29 which introduced an image optimization feature. From now on background images can be resized (without noticeable quality loss) to slider size at the slider where the optimize option is turned on, and the thumbnails are resized to the size that was set at the optimize setting. A quick test were run to show the difference between a properly sized image and a relatively large one:

Background image optimization turned off Background image optimization turned on
Image dimensions 4000x2667px 1920x1280px
Image size 9.38Mb 2.03MB
Slider dimensions 1920x600px 1920x600px
Slider loading time 2,52s 1,83s

What about the look?

Now let’s say the images you would like to use are just about the right size, maybe they’re a few pixels short on height or width, or you just want to show an impressive portrait, when the slider sizes are landscape, and the images just don’t look the way you would like them to. Let me introduce you to the image fill modes, which can be set for each slider, and you are able to change them individually at each slide.

Background image fill modes in Smart Slider 3
Background image fill modes in Smart Slider 3

What are these fill modes, and when should you use them? Well, the Fill setting (which is the default one) is usually good enough for your sliders, especially when the slider and the image ratios are really close to each other, for example, if there is just few pixel difference on the height or width of either way. It is important to know that if the image is not wide enough, it will be scaled up, which can cause the image to appear cropped. In this case, you might want to take a look at the Fit option, which will make the whole image fit into the slider, making every part to be visible, but the image will keep the ratio. What does that mean? The portrait image will remain portrait, but it will be resized to fit into the slide. The Stretch mode will make the image fill up the available slider space – when you have images with different ratios, your pictures can be distorted. The center mode is great if your image is not really small, but smaller than the slider, and you want to display it in the middle of the slider. The Tile mode is suggested for creating patterns from small images.

Background image fill mode example
Background image fill mode example

Let’s use some texts!

When putting captions or other texts to the slides, it is important to think about their legibility. If you use light pictures and you need your fonts to be light colored, too, you can add a dark overlay to the image so the texts will be more legible. You don’t even need to use an image editor for this when using Smart Slider 3, you can simply set a background color for the slide, and change the image opacity to some lower value to increase the contrast. If the image has too many details in it and that makes the text unintelligible, you can simply add a blur effect to the image. Smart Slider 3 has built in the Aviary image editor, which you can use to edit your images in your website to improve their legibility or make changes without having to upload them all over again.

Images are the backbone of your slider. You can select from several spectacular background animations which will be played when the slides are switched. They can be set for the whole slider (so every slide will use them), or just for individual slides, which will override the global setting. You can also use the Ken burns effect on each background image, even if the slide already has a background animation on it. The Ken burns effect can also be applied on slider-level, or on individual slides. These effects won’t just look fabulous, they’ll draw your users attention to the images, and inspire them to check out the rest of them.

Version Overview

Pro only
  • Background image for the whole slider
  • Aviary image editor
  • Ken burns effect
  • 73 background animations
  • Background image for each slide
  • Fill mode setting on slide and slider level
  • Image optimization
  • 6 background animations

Similar Sliders -

Minimal Dynamic HeightKen Burns slider effectTestimonial – Simple TestimonialSlider with static slide

Related pages