Disclaimer: This website contains affiliate links where I may receive a small commission, at no cost to you, should you choose to purchase a product as a result of clicking a link on this website.
As you browse the Internet, you will notice that many websites use a rotating image effect or “slider” on their website’s homepage. Sliders are being phased out by many web designers. So, here at WP Hubly, we wanted to identify possible image slider alternatives for your website.
Some may feel that the image slider gives them the opportunity to highlight multiple offers, products or services to visitors. Or they may think that they can use the space to have more than one “Call To Action” (CTA). Still, others have decided to use a slider or carousel to display an image gallery or a portfolio of their work.
Even the web design community is divided on the use of a slider. However, more web designers are moving away from using an image slider.
There is a group of influential people on the Internet that feel the image slider should just go away. You can read some of their comments here:
- Sliders Suck and Should be Banned from your Website – Yoast
- 6 Reasons why Image Sliders are bad for Conversions – Instapage
We strongly feel that sliders for the purpose of rotating more than one offer on a home page are not the approach to take. Here is why we feel this way?
Reasons Against Using an Image Slider
Here is our list of why we think you should rethink the use of a slider. We will first start with the effect they have on your users:
- Sliders confuse people, especially when you barrage them with too many offers.
- People ignore a slider because it behaves like an advertisement.
- Visitors will not sit and read every slide in an image or content slider. Many messages will be lost.
How about from a web design perspective?
- A slider will slow down your website because it needs to load additional JS or CSS files and this will hurt your SEO ranking
- Sliders do not work well on mobile devices.
- The slider causes important content to be pushed down so the visitor has to scroll to see it.
In July 2013, a study was done on a few of the website for the Notre Dame University. On the main website (nd.edu) with over 3 million visits, less than 1% of site visitors clicked on a slider. When they did click 89% of those are clicking on the first slide. You can see the results of the test here.
This would seem to indicate that a static image would have worked just as well instead of adding of the additional overhead of loading an image slider into the web page.
We would really like to hear your comments about using an image slider. What do you prefer? What strengths or disadvantages do you see in using an image slider? Please share your opinion with us in the comments section.
Image Slider Alternatives You Can Try
In an effort to provide a better experience for visitors and provide them with content they will actually read, we have provided some professional looking alternatives to using an image slider.
Our goal was to find a block of content that maintained a high level of professionalism. We also wanted to provide a more focused message for that top section of the page as it is the first thing website visitors will see on the website.
Based on the feedback from the Notre Dame study, we also wanted solutions that would increase conversion rates and help with SEO.
Our last goal was that the suggestions needed to scale well across varied devices. So mobile responsiveness was a strict requirement.
With this in mind, here are some suggested alternatives to using an image slider. We hope you find them useful.
The Hero Image
Apple is a great example of how this can be used instead of a slider. They highlight multiple products on their homepage. But each image is rich in colour and clarity. This method is also easier for tracking conversions.
PayPal has taken a revised approach and still used an Image Slider but it is not auto-rotating. Instead, the “Hero” area is using 3 static images in an image slider that a user must click on manually. I am not sure what they are trying to accomplish by using this method. Additional files or resources for the slider still need to be loaded. And the first image is more likely to convert better than images two and three.
If you are looking for more inspiration for using a hero image, you may want to start with HTML5Up. The offer free HTML templates for building a new website. These templates may give you some inspiration for your website.
The Hero Video
A hero video uses a video in the space where the slider would go instead of a static image. The trick here is to find a video, not too large in size but still good quality that loops seamlessly. There is a good example here at The Hidden World of the National Parks.
If you want to know how to do this for your website, you should check out this helpful post on embedding a video background. They also have links to some sources where you can get good quality videos fit for this purpose.
The Cinemagraph
A cinemagraph is what we have used for the featured image of this post. This method was chosen as a website trend that was taking hold last year.
The Budweiser website has a very good implementation of this on their homepage. The only issue we found with this is in the time it took to load.
If you want to create your own cinemagraphs, you can visit Flixel. They have an application that runs on MacOS and iOS that helps you create a cinemagraph and then they will host it for you as well. The Flixel website also sports a cinemagraph as a full page background image on the home page.
Here are some more tutorials on how to make your own:
There is also a lot of information and some helpful links on cinemagraphs at the Cinemagraph website.
The Full Page Background Image
This acts in a very similar fashion to the Hero Image. It provides a couple of options as far as what happens when the visitor scrolls down.
Google has used a semi-full page background for the Chrome homepage (https://www.google.com/chrome/).
The Awwwards website has a great portfolio of websites using a full page background that has been given awards for their design. One of our favorite and cutting edge sites was Vier Antwerp (https://vierantwerp.com/). This site has used the combination of a “Hero Video” and then divided the space into clickable boxes that display a static image when the mouse moves over them. This may be overkill, but I will bet it gets far more attention than an image slider.
Are you Using an Image Slider?
I am sure there may be other image slider alternatives. But these were the few that seem to have taken hold in the industry already.
If you are not sure which alternative to use, look around at some of the websites we mentioned to gain some inspiration for your own website. In the end, there is not a definitive answer as to which method works best.
With web design trends shifting away from using an image slider, we hope you found this information useful.
Please feel free to share your honest and direct opinions about using an image slider. We would love to hear from you.
Hi Scott,
I gave up using image sliders some time ago.
My reason was that they didn’t offer any benefits because either you set the slider to rotate slowly enough that site visitors could read the message, in which case they will have probably scrolled down by the time the second message was displayed and so missed it, or the images rotated too quickly for any of the messages to be absorbed.
So no benefits, and all the downsides that you’ve covered in the post.
Instead of sliders I just use different background images for the top section of different pages. So, for example, the Home page has one background image, the posts pages have a different background image, category pages have another background image and so on.
By making them background images you can overlay different text messages which will wrap as the screen sizes change, so enabling your messages to be clearly delivered whatever device is being used to view the site.
Obviously you can have different messages overlaid as well as the different background images.
I find that minimises the technical debt, with resulting improvements in page load times, and it doesn’t get in the way of the search engines’ spiders.
Cheers,
Martin.
Hi Martin,
I agree, static background images with your text message as an overlay are simple and the best converting alternative to an image slider.
They are also much better from a technical perspective when it comes to page performance.
Thank you very much for your feedback.
All the best,
~s
I briefly had a theme that used a slider. And my site did load pretty slow. For some reason, I didn’t suspect the slider. I got rid of the theme for other reasons, but I’m glad I’m not using it anymore.
I always thought sliders made a site look professional and polished, with an official look. But you know what? The fact that they confuse people and no one even takes out the time to read and go through them just goes to show that they might not be as useful as I thought.
Thanks for this post! I’m going to look into some of these alternatives.
B
Hi Britney,
Thank you very much for the feedback.
Yes, sliders can damage the performance of a website badly. Let me know if we can help further.
All the best,
~s
Dear Scott,
Thanks a lot for the helpful and informative post. I got great insights about image slider.
To be honest at the moment I am not using an image slider and I was thinking about using an image slider for my website but after reading your post I changed my mind and the related articles you linked are very helpful. Thanks a lot for the eye-opener.
The Apple and Paypal examples are very helpful and I got some new ideas for my website and gonna use those instead of using an Image slider.
Great information, you have really given a lot of value here. Thanks a lot for sharing!
Much Success!
Paul
Thank you, Paul.
I am very happy that this information was valuable to you.
Please feel free to share a link to your website once you have decided on which method to implement. I would love to see what you came up with.
All the best,
~s
I used an image slider on one of my website and I did notice it made my website slower, I mean it made loading my site slower than before. Thank you for sharing. These are really good information for me as a newbie especially, I didn’t know. I will definitely check out the the websites you mentioned. Thanks again for sharing, this is very helpful.
Thank you for writing this post. I come from the real estate industry where sliders used to be super common. I used mine to be a rotating portfolio of the types of homes that I sold. Yet, I’ve had a lot of doubts about using them lately for the reasons you mentioned that we should avoid them. So, I have been trying to research the topic a bit more.
I have visited Notre Dame’s website multiple times. It is a great website. Yet, I was not aware of their study. If they found sliders basically worthless or ineffective, I will not question their findings. My websites will never be anywhere near as remotely complex as theirs is.
Thanks for all of the information you shared here.
Hi Sondra,
Thank you for this information.
Our agency has developed many Real Estate websites. We always seem to have a discussion about the image sliders. I certainly understand the reason that many people may want to use them.
There are still creative ways to display multiple images for a property that will allow a real estate website to convert better.
Please let me know if you have any further questions.
All the best,
~s
Thanks for sharing this post, as a new web designer i am looking for ways to make my website more attractive and appealing and i am always happy to see posts like this that allows me to see what the users actually want. I never really was a big fan of sliders myself and seeing this post makes me more hesitant to place them on my website. Thanks for sharing.
Hi, I don’t use a slide image on my homepage also because of the fact that it slows down the loading process.
I prefer to have text content, like title and description and a nice image in the above the fold area. Right below may be a call to action button that’s ok I think.
I still have problems though getting clear images in big size but little pixel and fast loading time for this purpose.
Hi Stefan,
Thank you for your feedback.
Yes, you have discovered what most people never do about using image sliders.
If you are finding difficulty finding good quality images you can use on your website, you may want to try Pexels, Unsplash or Pixabay. But you do not want to use images that are too large or too high in quality. As then you would be back to having performance issues.
All the best,
~s
I have seen plenty of website use image sliders and I always thought that its one of the tools that can give website credibility, but after reading your post it is clear that sliders could, in fact, stunt the reach of your website.
I, myself, have never clicked on a slider for any website I’ve visited, I just never stopped to ask myself why and after going through your post it is so clear that it feels more like an ad rather than part of a website.
I am about to launch my website and this article has been very helpful as I can now avoid these kinds of pitfalls.
thank you
Hi Tshego,
I am very happy that this information helped you out.
The research is very clear and simple. I learned a lot when I did the research for this article. That Notre Dame study seems to provide a lot of valuable feedback for website designers and website owners alike.
All the best,
~s
A beautiful free image slider improves the visual appearance of your website. Thumbnails make it easier to see these nice pictures which you can show in a lightbox as well. Galleries are so popular, it’s hard to find a wordpress site where there isn’t some kind of image slider. Hence there are many tools out there to make a free image slider. They are more or less user friendly and easy to use. Smart slider 3 is one of the best rated word press photo slider plugin available.
Hi Kenechi,
Thank you for your input.
That is a very good idea when using an Image Slider if you must. And galleries are still a very good place where an Image Slider is the best option to display that content.
All the best,
~s
Thank you for sharing with us ¨Professional Alternatives To Using An Image Slider¨ The Notre Dame study is very clear that out ¨over 3 million, less than 1% of site visitors clicked on a slider¨. For me this is very conclusive and I wouldn´t like to take any chances.You suggest in your article alternatives such as the hero image, the hero video, the cinemeagraph, and the full page background image. All of them are based, one way or the other, on the concept of ¨carrousels¨. You mention Apple, Pay Pal, Budweiser, the National Parks, and the Awwwards website as ¨best practices of carousels.These are big names. Good for them, but, as I mentioned at the beginning, I´m not willing to take chances. So what do you think instead making navigation obvious or suggest more content to users. For instance in the overflow pattern, make clear to the user that there´s more content to be had. This could be an overhang, set of arrows, scrollbars, gestural hints, autorotation or something else. Whatever it is, it should be immediately obvious to the user that more content exists off-screen. In the final analysis, do you actually really, really need one?
Hi Enrique,
You hit the nail on the head there and helped to emphasize my point. You do not need an Image Slider on your website.
The suggestion is to use static images, video or a Cinemagraph, which is kind of a combination of an image and a video.
The result of the Notre Dame study was to emphasize, “You should not have invisible content on your website”. If there is more content you want to direct the visitor to see, link to another page with that additional information.
The examples show what is possible. I would guess that PayPal probably sees the majority of click (if any) on that first image. I do not think the other two (hidden) images in that carousel are ever seen or clicked.
Thank you very much for your points. They certainly helped to add clarity.
All the best,
~s
Hello, I love alternative image sliders, I think it’s one the most cutting edge techniques to really improve your content and website value. You can make an impact with your content and really get the message across which is the most important thing to realize as a reader, to be totally engaged in topics to gain information with a good visual concept of an idea.
I Totally agree with you, SEO doesn’t really like these image sliders but the cinematography within the image draws the eyes to the screen which gain more interest.
Is it easy to incorporate these techniques in the web page or does it take a certain type of know how to install it?
Your right about the website slow down due to the constant loading and lagging from these images but what proper ways can I avoid this from happening while installing these amazing alternative images?
Thank you for this great piece of knowledge, I was searching for a new way to display better images without the spinning wheel of loading time.
Jerald
Hi Jerald,
The beauty of using a “Cinemagraph” is that these images can be included into a WordPress post just like an image. And without any of the overhead of an Image Slider.
The image at the top of this post is a Cinemagraph and was inserted as the featured image. Many of the Free Stock images websites offer cinemagraphs. You can try out a few on the links in the article to have a look at some of the other websites that offer them as well.
The goal here is to remove “Image Sliders” and replace them with low sized, lower resource images.
I hope this helps. Let me know if you need more information to help make this clearer.
All the best,
~s