More often than not, the load time of your web pages is quite important. One of the major reasons for a slow loading web page is images that have not been optimized for the best image size. The faster your page loads, the higher the user engagement and lower the bounce rate for the website. The page load time is also one of the major factors in SEO optimization of the website.

There are several different optimizations that are relevant in making the webpage load faster. One of the major factor is the overall size of your webpage, the larger the size the longer it takes to download and longer the page load time. The overall page size comprises of the sizes of all the code and embedded elements in the page, such the javascript, css files and images.

Of all the included resources in a web page, the images are usually the biggest and largest. The HTML, CSS and Javascript code is mostly text and takes very little of the bandwidth. Making the images as small as possible is the easiest and quickest way to make the pages load faster.

When talking about size, there are two different sizes of image that matter, one is the file size and the other is the image size which is the width and height of the image. Most of the time, the differentiation is apparent from the context in which it is used, but sometimes not. For brevity, we will use the term image file size or file size to refer to the actual size of file and image size for the latter.

The image size does play a factor in the actual file size, but it doesn’t necessarily mean that a larger image size will always correspond to a larger file size. When reducing the file size of an image, you have to be aware of the image quality. It is always the contextual factors that determine how small the image file size should be. Reduce it too much, and the image might load faster but could look bad, grainy and unappealing. This will reduce the overall quality and appeal of the webpage itself.

So, that brings the question What is exactly the ideal file size or best image size when used in a webpage? There is no single correct answer for this, it depends on the image and other factors depending on how you are using it. What then is the best image size for you? The ideal image size and file size, in the strictest sense will vary between websites, webpages and the image itself. Let us look at some of the major factors…

Importance of the Image

You should first assess the importance of the image with respect to the content of the page. Is the image suppose to enhance the content on the page or is the image itself the main content? In many websites such as those that are photography related or fashion blogs, the image itself can be the main feature or content on the page and the text on the page may be just describing or an elucidation of the image.

If the image is an important part of the page content, then it needs to be of good to very good quality and probably larger in size. Due to the significance of the image to the page the user might intrinsically expect a slightly longer page load time. This is probably when a larger file size is acceptable.

If the image is of secondary interest in the page, and is used mostly to enhance the primary content then you might want to go as low as possible with the file size. Usually, technology blogs contain screenshots and other images that work towards explaining and or clarifying the content of the page.

Total number of images

Another factor to consider is the total number of images that you have in a single webpage or blog post. Again some websites like photo blogs or fashion blogs will have more images in a single page than a technology blog. Even on other websites, this could be the gallery page that contain several images.

The larger the number of images you have, the smaller it needs to be so as to keep the overall size in check.

Image size

This refers to the actual image size as displayed on the page and not the file size of the image. Most times the larger image size equates to a larger file size but this need not always be the case. The file size depends on various other factors as well such as image quality and colors in the image.

If the image does not exactly fit into the specified slot in the layout, then the browser will scale the image to fit the slot. If  the image is upscaled, then the quality of the image is compromised while downscaling results excess bandwidth being used to download a larger image file than was necessary. Optimize the image size to correspond exactly to the size as displayed on the page layout. This will avoid the image being rescaled by the browser.

Best Image File Size

The best image size is really dependent on your requirements, mainly the ones mentioned above. Ideally, you would want to keep the total bytes of a webpage under a certain count. According to latest data from Http Archive, the average size of most web pages is around 1250kb. This is really high, you should ideally try to keep your total size to a maximum of 800kb for best performance.

Most web pages will include many different logos and theme specific images in addition to the web page html, css and javascript code. This leaves very little for the images, which is both good and bad. In one hand, it should keep you from adding unnecessary images that are not exactly needed. On the other hand, it might not give you enough room to add several higher quality images.

An optimum file size for good quality web image comes out to be around 100 kb. It should average around 75kb or so. These are usually highly quality photographs that have been reduced to web quality. If you need to publish something substantially higher in file size, then opt for a thumbnail and link the original image to the thumbnail.

The images that are screenshots, clip art, logos and images that do not have a lot of colors in them can be between 30 kb to 50 kb and still maintain a good quality.

There are several techniques that can be used to reduce the file size of an image. Almost all which can be performed using a photo editing software such as Gimp or Photoshop.

As the internet speed gets faster, it gets easier and easier to let your webpages grow bigger. But, if your website target audience is truly global, then you still need to pay attention as many people in many countries still have slower access to internet.