seo: the importance of serving scaled images in webpages
Almost all web pages or at least a vast majority of them have images in them. Images are an integral part of the web pages these days unlike when the bandwidth and download speed used to be a premium. That also means that images and media files are also one of the biggest resource hogs in terms of the size.
Images can mainly be of three different types: icons, logos, pictures or photographs etc. The icons and logos are usually smaller in size and is also constantly reused throughout the pages. Most often it is the photos or pictures that are large in size and usually just displayed once or twice and not reused across pages.
Reducing the size of the images on the page can provide substantial improvement in the page load times. As we know, page load time is one of the prime factors in SEO. Reducing file size improves the page load times by means of faster download, as smaller files are faster to download. In addition to the download speed, it also consumes less bandwidth and processing time on the server allowing it to handle more concurrent users.
If you have a popular website with a lot of page views, then every byte counts as it can add up pretty quickly. There are several techniques that can be used to reduce the image sizes.
In addition to reducing the size of the images, you should also make sure that the image is scaled appropriately to match the display size. This ensures that you are not only serving images that are optimized but are not serving images that are bigger in size than what is necessary.
Also, note that there are two different things that can be meant by image size, one is the image display size and the other is the image file size. Image display size is the width and height of the image, usually denoted in pixels such as 300x400. The other is the image file size which is the actual size of the file, which is specified in bytes such 130kb. By reducing the display size you are essentially trying to reduce the file size, thus both of these needs to be optimized for best results.
It is probably best to start with an example. Let us say you have an image named myimage.jpg on the page. The image is displayed in a slot which is 300 pixels by 200 pixels. Now if your image, myimage.jpg has a size of 400 pixels by 250 pixels or any size other than the displayed one, then the browser will download the file and then shrink it to display it at the specified size which is 300 pixels.
In this process, you are actually forcing the browser to download a file larger than what is necessary and then forcing it to shrink the file, thus negating the advantages of a larger image file. You can avoid both of these by serving an image file that exactly matches the desired size.
The first thing that you need to do is find the most desired size for your images so that it is best optimized to your requirements. Once you have this optimized file size and also the desired display size, you can work on optimizing the image to match it.
To scale the image or to resize the image, you will need to use an image editor. All image editors, even the most basic ones do have the functionality to re-size the images. You can also resize or crop multiple images to the exact display size. Once you have reduced the image display size to the exact size that is needed, you can work on reducing the image file size using other optimization methods.
Resizing is quite easy in all image editors. Look for an option or menu item usually called resize image. Enter the desired values for the width and height for the image. Another option is to crop the image to the exact size, especially if you wish to preserve the aspect ratio of the image.
Sizing the images to the exact works best for websites with a fixed width layout and image slots that have a specific size across devices and screen sizes. In the case of websites that have a liquid or flexible layout, the display size of the image could potentially vary with the overall display size of the page section and the resolution of the screen size.
In the case of flexible designs, it is best to calculate the display size based on the most popular display size and then work with that. That way you can guarantee that a vast majority of the visitors will get the optimum image, while only the visitors with a higher display size will receive the image that needs to be scaled up.
Testing the Image sizes
Once you have fixed the image display sizes, you will need to verify that it is working as desired. You can use any web page analyzer program to do this. There are quite a few of them available, both on the browser as well as online.
One of the popular tools to use is Page Speed Analyzer from Google. Another site is GTMetrix.com which uses both the Page Speed as well as the YSlow rules.
You are looking for two fields in the analysis, which are Server Scaled Images and Specify Image Dimensions. If these are not scoring a perfect 100, then it will show you exactly which image is under performing and is not optimal. Follow the instructions that are provided.
Other Tips
Although the display size and file size are co-related, you can still end up with a large file in size for a small display size. For example, a 2MB file for 50x50 pixel size, which may or may not be acceptable in your scenario. You will need to reduce the size by other methods in that case, if needed. The process of serving scaled images just ensures that you are still serving the best quality image all other factors being constant.
If you are reusing the same file multiple times on a page (or even different pages) in different slots of varying sizes, then it is best to serve just one size and let the browser scale them as needed. This is much more beneficial than serving the same image in multiple sizes. As long as you use the same image URL with an acceptable expire header, the browser will cache the image and reuse it instead of fetching them from the server. You can ignore the analysis recommendations for the sake of a larger gain.