What are the Best Sizes for Website Images?

Up to now, you probably didn't care that much what size images you use on your website. After all, today's smart web browser apps automatically re-render the image to fit and look ok. But what if I told you that website speed is a very important factor for SEO and that your website might not show up when people search on Google? and that images are the web page elements that cause the most latency in loading a web page? Now we've got something to talk about, right?

There are a number of factors that affect how fast a website page loads and this post is mostly focused on image size, image formats and image manipulation to achieve faster loading while retaining good image quality, however, once we have gone through best practices of image optimization, we discuss some other factors which you will want to look into as well, in order to increase pagespeed even further.

Google is great about creating tools for SEOs to build better websites so that they achieve better pagerank on the SERPs. By running the pagespeed insights tool against your website, you can get tips on what needs to change in order to have your pages load faster, and consequently, to increase your site speed. Your web site speed is related to the server response time every time a request is made to load your page's content. Like most things in marketing, there are two aspects to pagespeed that matter: user experience and seo rankings. After all, what does it matter if you rank high in search if user experience is lousy?

Google's webmaster guidelines point out that image optimization is the sum of bytes it takes to encode each image pixel multiplied by the number of pixels used to display the image. Therefore, by reducing either of these, you exponentially reduce the amount of data that needs to load for each image, resulting in faster pagespeed.

The first thing we recommend is to make sure images are correctly sized for their intended use on your website. In many cases, images are loaded to a website without regard to whether they are appropriately sized for the website display format, resulting in not only a longer time to access/download the image file, but also, burning cycles while the browser re-renders the image to suit how the page uses the image. Using Google Chrome's Devtools, you can write click and image, choose "inspect element" and see the natural size and display size of the image. If the display size is smaller than the natural size, you are forcing users to utilize excess bandwidth to download, and forcing the browser to burn unneccesary CPU cycles to re-render the image. Using your favorite image editor, you can scale each image appropriately for it's intended use.

If you are starting out with a new page, here are some commmonly accepted image sizes per use case:

Full Width or Slideshow Images - 2560 pixels wide and maintain aspect ratio for height
This width matches the default resolution on most common 27" to 30" wide computer monitors available today and will result in a good visual appearance without sacrificing unnecessary pagespeed.

Lightbox Images, Gallery Images or other Large Images - 1500 pixels wide by 800 high will provide suitable quality for most large images for website viewing while keeping the image pixel count reasonable.

Thumbnail or Smaller Images - Ideally, these should be twice the natural size in order to display sharp on all types of displays. One way to ensure the scale of thumbnail images is correct is to view an existing image on your browser's display, note the natural size by right clicking and then choosing the browser inspect element tool and then use your favorite image editor to change the image resolution to double the width and height in pixels.

The best image file types to use for websites really depends on the use case.

• BMPs are almost never recommended for website images as the file size is enormous.
  
• JPGs are great for most website images, because they tend to be reasonably sized, but some features are lacking, such as transparency and animation. 
  
• PNGs are great for graphics with solid colors and they allow for transparency.
  
• GIFs are great for animations but lack transparency and are limited to 256 colors.
  

You can geek out on all the nitty gritty about every image file format here: http://socialcompare.com/en/comparison/image-file-formats

Vector format images perform much differently from raster format images in web browsers. If you save a given image in both formats and zoom in, you can tell which image format will pass the quality test. Vector images are generally preferred for faster pagespeed as well as retaining the most details regardless of the display size... but not always. Things like logos, or images that have lots of straight lines or geometric shapes do very well in vector format. However, photos that contain a lot of irregular shapes or gradual color changes tend to look better in raster format.

The image quality you choose directly impacts the number of pixels used to describe the image. As an example, if you use Photoshop to export an image, you can choose the percentage of quality to compress images. We don't recommend reducing quality to less than 70%, or else you will start to see pixelation. Below 70% images can look blurry or dull. Test to be sure, but at 70% quality, the viewable image will still appear with the same dimensions, but the idea is that the image byte size is dramatically reduced since there is less information needed to describe the image, therefore, it takes less time for the browser to download, thus increasing pagespeed.

Most people are familiar with Winzip. It's used to reduce the size of a file, or a collection of files, usually so you can email it without getting snagged in the email size filter. Just as Winzip is able to combine info about a file and result in a lower file byte size, PNG Gauntlet will compress images for use on websites. There are also numerous Wordpress plugins that do the same thing. The smaller the file byte size, the less time it takes to load, further increasing pagespeed.

For solid colors on backgrounds or for shadows, gradients, etc, Cascading Style Sheets are a much more efficient way to get the same result without having to load an image file at all. Of course, you have to know CSS, which is a deterent for some, but if you use a lot of solid color images, it might be worth the research, depending on how you build your website, what content management system you use, what tools are available and what kind of help you have to figure it out.

To minify is to shorten CSS or Java code by stripping out comments, removing whitespace and combining files to reduce file size and lower the time it takes to load. See a theme developing here? There are many tools for checking and even automating minifying the code you use on your website. Check out minifier.org for example.

It seems like this would be common sense, but looking at some of the website coding out there, it's worth mentioning. If you are writing your own code, you should write your html in such a way as to prioritize the order in which things get loaded. For example, the images that appear at the top of the page, using a term borrowed from the old newspaper days as "above the fold" should load first in your html, since those are the ones that a browser is going to see first. Then work your way down the page to load the rest.

You can increase pagespeed by turning on browser caching in the html header of your web page. How you turn this on depends greatly on the type of coding you do, whether it's PHP, ASP, JSP.. but essentially the idea is that you signal in your page header that the receiving browser should cache the website files locally for a specified period of time. The result is that when the user clicks to visit that page again, the browser need not download all the associated files over the internet, because it has them stored locally in the cache, thus increasing pagespeed. To understand all the details of browser caching, see: https://thesocietea.org/2016/05/how-browser-caching-works/

I say minimize, because there are cases where you would not want to eliminate page redirects, such as language specific pages for a different country. However, the more hops the browser has to load, the longer it's going to take. Think about the structure of your website to determine if unnecessary landing page redirects are present. Reducing these will help increase pagespeed.


When in doubt, there's tons more pagespeed optimizing tips and SEO philosophy on Google's webmaster guidelines pages.