The Importance of Image Size in Search Engine Optimization

We’ve all been to a website where the page doesn’t load in the first few seconds. We get anxious, ready to move on. Then an image starts to load and it is slowly rendered from top to bottom. While it could be used for dramatic effect, this is usually caused by a gigantic image size and is purely unintentional. The kicker is that Search Engines will decrease rank if they see any of these huge images.

Importance of Image Size in Search Engine Optimization

There are several steps in getting the most out of your photos, but optimizing image size should be the first priority. When search engines crawl a website, how long it takes for each page to load is a huge factor when determining general search engine optimization.

One key thought when going through this process is to make sure the photo is sized for its intended use. For example, a full-screen background image should be processed to a size of around 1920 pixels wide and 1080 pixels tall (the average size of a computer monitor). In addition, most programs have a “Save For Web” option that will lower the quality of image to match what is needed for internet usage.

Lowering the quality may sound counter-intuitive, but most images can be dropped by a quality of at least 40% without seeing any image degradation while lowering the file size astronomically. For example, the image below shows two different exports of the same photo exported at 1920 pixels width. The left column was exported at 100% quality with the file size a whopping 542.4KB while the right column was exported at 43% with a file size of 80.79KB.

It is important to know that a background image (e.g.: the images above) can optimize at a different rate than an inline image, which is why knowing the purpose and the placement of an image is extremely important. Below is an example of how exporting an image at different qualities affects its appearance. For instance, check out the smaller image below with the same treatment exported at 600 pixels width. The column on the left was exported with a quality of 100% at a file size of 120.7KB while the right column was exported at 43% with a file size of 21.46KB. While the file size is smaller still, we can see image deterioration occur in the solid colors (the blue sky).

In current web design trends, images are heavily relied upon, either appearing as background images or being used for featured content. Making sure a featured image is not the size of a background image and vice versa, exponentially helps page loading times.  While these file sizes may not seem very large, knowing whether an image will be used for a background or supporting text can help reduce loading speed and, thus, simultaneously help Search Engine Optimization.