How Many Images Per Blog Post or Page? Is There a Limit?

A page with no images can look barren, but one with too many will load slowly, which might result in a high bounce rate. Kissmetrics reports that 40% of users will abandon a site that takes more than three seconds to load, and that each further second of delay results in a 7% loss in conversions.

A page with several, well-optimized images can load faster than one with a single, large image file. Finding that middle ground in terms of site images depends on multiple factors, and there are various techniques that can cut down your image load times.

Let’s take look at these factors, how you can use them to your advantage, and what limits you should observe.

Page design priorities

When it comes to page design and choosing the number of images to feature on each one, your first consideration will be a page’s purpose. If an image is crucial to support your page content, then it needs to stay put; nonessential images are candidates to be dropped or reduced in size.

It’s not the number of images that is critical, but how long they take to load. A page that has fewer images and loads quickly might reach your audience better than a slow-loading page full of attractive images.

Responsive design, which refers to how well your page renders across various screen sizes, is essential for modern sites. Mobile devices generally have slower data rates than desktops, as well as less screen real estate. So, it makes sense to drop some images when displaying pages on a mobile device.

For example, a list of items might feature a thumbnail image next to each item on your site’s desktop version, but the mobile version could benefit in both appearance and speed by omitting these.

Reducing image sizes

An image file shouldn’t have pixel dimensions significantly larger than the biggest resolution at which it will be displayed, as anything more than this is wasteful. Having one image file for large screens and another smaller file for phone screens will speed up mobile loading. Saving a JPEG file at a lower quality will reduce its file size. Striking the balance between quality and speed is up to each individual site owner.

If your images are correctly sized and think you’re ready to go, try running them through a service which will compress them, like TinyPNG or TinyJPG. When you compress your images, you reduce their file sizes without diminishing the quality. It’s a win-win for you and your site visitors.

Delivering images faster

One easy way to do this is by using a content delivery network (CDN). A CDN will cache images at a location closer to the user. It caches images at edge servers, which sit between the web server and the user. An edge server that is geographically closer to the user will deliver data faster. It also reduces the file access burden on the main server.

Jetpack’s image CDN delivers this speed boost to qualifying sites without requiring any effort beyond a one-time setup, and all sites hosted on WordPress.com or connected to Jetpack can use this feature.

Saving time with lazy loading

Another way to improve page loading speeds is to only load images as they’re needed. This is called “lazy loading,” and is particularly useful for long pages, such as blog homepages, where the user doesn’t have to scroll very far down to see recent material.

If an image isn’t located on a part of the page that is being displayed, there’s no need to load it until it scrolls into view. Jetpack sites can use the Lazy Loading Images feature to accomplish this. It also provides you with the flexibility of applying lazy loading to all the images on your site or disabling it for specific images or pages.

Limiting the total number of images

There is no definitive answer to how many website images is “too many.” A page with 10 thumbnails might be reasonable, while one with three huge image files may be too many. The real metric to measure is load time.

A reasonable load time target is two seconds (on a high-speed connection). If your site consistently takes longer than that to load, you should strongly consider paring down its content or speeding up its delivery.

Speed matters the most when using images

The criterion for image overload is the amount of time it takes a browser to load your images, not the number of images featured. Image size optimization and compression can keep file sizes down, allowing for quicker loading. Attacking the problem from the other end, caching, and using CDNs can also boost your delivery speeds. Improvements in each of these areas can mean the difference between a pleasurable viewing experiencing and a bad first impression.

How many website images is too many? Let us know your thoughts in the comments below.

---