Is there a number for a website having too many photos? We all know a webpage that has no image can be boring, but one with too many photos can risk being slow. A slow website can result in a high bounce rate which can lead to a user abandoning the site. According to a report, if a website takes more than three seconds to load, around 40% of its traffic will leave the website. And each further delay of a second can result in a 7% loss of users.
A website with well-optimized images can have too many photos that are quicker to load than a large single photo file. There are multiple factors and different techniques that can help you cut down photos load time. Using these techniques will also answer your question: can a website have too many photos?
Check out these techniques to learn how to use them to find the right balance of photos on a page and the limitations you need to know.
Priorities to designing a website page
Before you can start designing the web page and selecting the number of photos for each one, you need to understand the objective of the page or its purpose. If the web page requires photos then it’s okay to add them. However, if the images are not an integral part, then it is best to drop them or reduce the photo file size.
The number of images is not the right question, but how much time it takes for the page to load is. For example, a page with five photos loads faster compared to a page with nine photos. So a quicker load time page will reach the audience better. But it does not mean you can’t use the nine photos page. You would just need to optimize your website for a better load time.
Now, as most of the traffic comes from smartphones, every website should have a responsive design. You would need to understand that multiple smartphone and tablet devices have different screen sizes. A mobile phone has a lower data speed if running on 3G or below. It means that it will take time for the site to load the images. So, when optimizing the web page for a mobile screen, it is best to drop a few of the photos.
Here’s a quick example for a desktop website where you can show thumbnail images next to the item. For the mobile version website you can remove the thumbnail images and just give a list of the item. It will help the site load faster and make it easy to read for small screen-size phones.
Reduce the file size of photos
It is wasteful to use an image with a higher pixel dimension than the screen resolution. Use multiple images for different screen sizes which will help speed up the loading time. You can save a JPEG of an image at a lower quality which reduces the image’s file size. The quality of the image used should be at the owner’s discretion.
For example, you can have a 4K resolution image for your audience viewing your webpage on a 4K screen. Still, if the audience is viewing your webpage from a smartphone, it’s best to reduce the resolution accordingly. Showing a 4K image on a smartphone would require a lot of data. A 4k photo and a 1080 HD photo on a smartphone will not pixelate the photo unless the audience zooms in. So if you have a website that needs to show the great detail of your product, then sure, you can use a 4K photo on your smartphone. However, if you just need to show how the product looks without any details. Then, lower resolution photos work as well as a 4K photo.
If you don’t have photoshop software installed on your PC to reduce the size of your photos. Use online services like TinyPNG or TinyJPG to compress the image size. Compressing images online will reduce their file size without compromising the quality. So, it can be beneficial for both you and your website visitors.
Cache images for faster delivery
Use a Content Delivery Network or CDN to load faster images on your webpage. A content delivery network caches images at a server nearer to a user. These edge servers communicate between the web server and the user to show cache images. So if an edge server is placed in North America then users from Canada and USA will get the images faster. It is useful for many other reasons as well. You can use CDN to reduce the file sizes saved on the main server.
If you want to use a CDN delivery system then you can use Jetpack’s image network. It will boost the speed of your site without any hassle. You would only need to set up an account and add your website domain. Jetpack supports all websites that are hosted on WordPress.com
The lazy loading feature saves time
Lazy Loading is a widely known feature and Facebook was the first of few sites that adopted this method. This technique is best for long or infinite scrolling websites. Many blog homepages and thread/forum sites use ‘lazy loading’ because the images are loaded when the user scrolls down to them.
To better explain, this is how lazy loading works: A normal website that does not have lazy loading would first load everything from the server (all the content and images) before showing anything to the user. In the case of lazy loading an image is loaded as they’re required. So if an image is placed way down a website and the user has not reached that part, the page will not display or load the image.
Once the user scrolls into view, only then are the images loaded. You can use the Jetpack to plugin the Lazy Loading Images feature on your website. The great part of using Jetpack’s Lazy Loading Images plugin is that it gives you the ability to pick & choose images for lazy loading. If you have too many photos on your website then we recommend using the lazy loading features.
Restrict the number of photos on a page
Though there are no rules or particular answers to if you can have too many photos on a website? As we said before, your KPI for measuring ‘too many photos’ should be the load time of your page. The rule of thumb or best practices recommends using ten photos for each page. You can also use three large-format size photos for each page.
The acceptable load time for a website is under two seconds if the user has high-speed internet. If your site takes more than three seconds to load. The best way to check the load time is to use the incognito mode as the browser will save the photos and get wrong results. It would help to look at how many photos you have uploaded to the web page. You could also switch to speeding the delivery process of images.
Want to load the images faster? You would need to optimize your website for speed
To calculate the image overload time is to check the seconds it takes for a browser to load an image rather than the number of images used on a webpage. Photoshop tools or online websites can manage the image size with compression that will keep the sizes of the photos down, allowing for a quick load time. For example, a web page with eight optimized photos can load faster than a web page with three big file-size photos.
If you do not want to reduce the file size, afraid that it will also reduce the quality then you can choose CDNs to help increase the speed of your website. If you’re using all the techniques mentioned in the list compression, CDNs servers, and lazy loading, we can guarantee your website will open in under two seconds, even if you have too many photos.
Conclusion
Yes, we know there is a huge urge to show as many images as possible. Because we believe that will have a huge impact on the reader on how the great content is. But do you know what is going to happen?
We are emotionally connected with the content that we have created and we love every piece of it. We want the same connection the reader needs to have with our website. So they would look at each of the images to understand what the author is trying to communicate. But in reality, it does not happen; rather the user will look at the first image and then move on to the second or third.
By the time the user gets to their fifth image, they will notice the endless pool of photos popping one after another. They would want to scroll down the page as quickly as possible just to get to the end. And after reaching the end there would be a sign of relief and this is not the emotion we are going for. So it’s best to limit photos and speed up the load time of your website.