For the past 7 years, sliders (or carousels if you want) are something almost every website has. It’s a common practice. Something that we are all used to. It’s the first thing your visitor is going to see on your website. It’s make-it-or-break-it moment. The slider images have to make an excellent first impression, or you are going to lose your visitor forever.
When I’m looking through the websites our customers made with our WordPress themes, I often see poorly prepared slider images. Most of the time photos are too big or too small. The text on the slider is not visible enough, and the images are not optimized, so the page itself loads extremely slowly.
My heart breaks a little bit when I see an overall good website with a good copy, but crappy slider images. I decided to stop this madness by sharing some simple tricks.
1. Choose the right photo
First and foremost. Choose the right photo. Choose an image that is descriptive enough and has enough of white space. Take a look where the text on the slider appears and choose the image that has as little visual noise as possible in that area.
2. A high-resolution photo is a must
Use the resolution that is recommended by the theme maker. In the past 4 years, I’ve seen a gazillion websites with small resolution photos stretched all over the screen. You cannot miss if you choose an image that is 1920px wide. Nothing discourages your visitor more than a pixelated photo in the slider. Excellent resource of free, high-quality photos is Unsplash. If you have a budget, I recommend you buying premium photos on Shutterstock. The investment will pay off.
3. Darken or lighten the photo
A good trick how to make a text on your slider more visible is by darkening (or lightening) the photo. This could be done in Photoshop or any other photo editing program. For this tutorial, I will use free design app called Canva. After you sign up to Canva, click “Create a design” in top left corner. Then in the top right corner click “Use custom dimensions” and input the dimensions recommended by your theme developer. If there is no recommended resolution, go to the demo site of the WordPress theme and inspect the photo (or change your WordPress theme provider with us 😛 ).
Click “Design!” and go to the “Uploads” in the left menu. Upload your slider image and drag & drop it on the board. In the top menu, click on “Filter” and reduce the “Brightness” and “Contrast” for 10-20%. If the color of the text on your slider is white, you want to make your photo a little darker to improve contrast. If you have black text on your slider, you want to do the opposite.
Make a step further. Colorize your photo in your brand colors by moving “Tint” (Hue) carousel a little to the left or right.
4. Semi-transparent color overlay
Sometimes you just cannot find a photo with enough white space for the text or your client want you to use an over-saturated image where your text wouldn’t be visible enough. In that situation, the most straightforward thing you can do is to make a semi-transparent color overlay.
To do that, go to your Canva app > Elements > Shapes and drag & drop the first white or second dark rectangle to your board (where it says free). Resize that rectangle from edge to edge and color it to the black in the top left corner. Then in the top right corner set transparency for your rectangle to ~50%, depends on how much contrast you need.
5. Add inner glow to your photo
Another great trick to make your slider photo more interesting is by adding black semi-transparent inner glow. This method will make your site look even more professional. It will put the focus on the center of the screen. In Canva app, this effect is called “Vignette” and you can find it in top menu “Filter” > “Advanced Options.” When you are satisfied with your slider photo, you can save it by clicking “Download” button in the top right corner.
6. Choose the right file type
When you are saving your edited slider image, it is important (due to the file size) to choose the right file type. Don’t worry; the rule is simple. If your slider image is an actual photo, save it as .jpg. If it’s anything else than a photo (i.e., pattern, icon, doodle), save it as .png. This is important because you want to have your slider images as light and optimized as possible.
7. Page speed matters a lot
For both Google and your visitor. Slider images are the biggest images (maybe even files) of your website, so it is important to have them optimized. Great tool for decreasing an image size is TinyPNG. Their simple drag & drop interface allows you to decrease the size of the image without losing quality. See the ultimate guides for image optimization and page speed optimization.
Bonus tip: Use the recommended size of slider image
When we are developing WordPress themes, we put extra effort in choosing the right size and ratio of the slider photo. The photo itself has to work well on every screen size. I see a lot of cases where users use different sizes from recommended. Most of the time, the photos in slider take too much vertical space.
This is s not a problem for the functionality of the slider itself, but if your visitor has to scroll a lot to get to the content, it does nothing good regarding user experience.
If you still want to use bigger images than recommended, please at least have in mind a good old above the fold rule.
The slider is the first thing your visitor is going to see on your website. Make their user experience better by implementing some of the tricks above. It will not take you much time, but it will improve the happiness of you, your client and your client’s visitor.