Most people realize the importance of optimizing a site in terms of design, structure, and content in order to give users the best possible experience and increase rankings in search engines. However, there are tricky technical factors that also have an impact on your position, such as site load time, and optimizing your images for speed can improve them.
Site load time wasn’t always a big deal, but Google has made their mission clear: they want the best possible online experience for its users, and that means favoring sites that maximize user experience. For the past several years, site load time has been a significant ranking factor—meaning sites with faster load times rank higher than sites with slower ones.
If you want to improve your ranks in search engines and give your users an all-around better experience, you need to do everything you can to minimize the load time of your site. The best way to do that, and the first place to start, is to optimize your website’s images for load speed.
There are two ways to think about the “size” of an image, and both can have an impact on loading times. First, “size” can refer to the amount of data contained in an image, expressed as Kilobytes (Kb) or Megabytes (Mb). Second, it can refer to the physical dimensions of the image when viewed at 100 percent.
The amount of data contained in an image is the most important factors that influences load time. The more data an image has, the longer it takes for a browser to receive and process that data from a server. While the difference between a 1 Mb image and a 200 Kb image may not seem like much, if all of your images are oversized, the impact on your users’ load times could be enormous.
Images with extra-large physical dimensions are the ones with higher amounts of data. Even disregarding the resolution (PPI and DPI), images with larger dimensions have a higher file size than their physically smaller counterparts. In addition to slowing down from the sheer amount of data that needs transferred, your load times can be impacted by the process your website takes to scale your images down.
Therefore, it’s important to size your images more efficiently. There are several easy ways to resize your images, both in terms of physical dimensions and in terms of file size:
There is no single “ideal” size for images, since many images on your site serve different purposes, but generally, you’ll want to pay attention to the following best practices:
Why size matters even if your CMS automatically resizes images
When an Internet browser reaches a site that contains an image, it first loads the full-size image you uploaded. Then, it processes the fact that it must reduce the image’s size to fit on the page, so it reloads the image as part of the page. Instead of saving time by loading only the processed version of the image, your user’s browser actually loads the image twice—once for the full-sized version and once for the fitting version. Therefore, it’s important to upload properly sized images to your website no matter what.
The type of format you use for your images is also important. Most people are familiar with the JPG file format for images because it is one of the highest quality and most relevant formats. It also tends to have the highest file size because it’s made for big, high-quality images, so if you can get away with using a smaller file format for your website, you can decrease your load times.
For example, the GIF file format supports transparency and can be animated, but it only supports 256 colors. Because of its color and definition limitations, it is a naturally smaller format. You wouldn’t want to use a GIF for a product image or for a flagship piece of photography, but you should definitely consider it for small icons or badges on your site. It won’t save you a ton of data, but every little bit counts.
PNG is typically a larger format than JPG because it features a lossless compression system—meaning, it never loses data integrity no matter how many times it is saved. JPGs do lose data integrity with each save, but because they are much smaller in file size, they are still the preferred file format for high quality images. Still, PNGs can be useful for smaller images, such as menu images.
Other image formats do exist, but these are the key players you need to understand to make sure your website loads as fast as possible.
It bears repeating: data is the most important factor for determining image load times. However, photos generally contain more data than just what reflects the actual image. Meta data, such as the date and time the picture was taken and editing history, is also stored on the image and can interfere with your loading times.
Keep in mind this data can be useful to you, especially if you’re a professional photographer, but if you’re trying to make your site’s images as lean as possible, you should remove this extraneous meta data.
There are a few ways to do this. The most straightforward is to right-click the image in question, click “Properties,” then click on the “Remove Properties and Personal Information” button toward the bottom:
You can also download an automatic tool, such as QuickFix, which does everything for you. There are also WordPress plugins and other web-based tools that can strip the meta data from all the images on your existing site, such as Image Metadata Cruncher.
Once you’ve optimized your current site’s images for speed, you’ll be in a much better position—but you’re still not in the clear. You need to implement and execute a repeatable process to ensure that all new images uploaded to your site meet your speed criteria. For every image you upload, make sure you run through the checklist:
Keeping your images consistent and fast is the best way to keep your site load time down and give your users the best possible experience.