Free SEO Tip – Make Your Site Faster With Optimized Images

User experience – particularly when it comes to website speed – is critical to both conversion rate and search engine optimization (SEO). Faster websites tend to sell more parts, and they also tend to rank better.

There are several ways to speed up your site, but one of the easiest ways is to follow these image optimization best practices:

1. Define the height and width of every image in your HTML. This helps with browser rendering speed, and it’s also a W3C compliance requirement. (Note: W3C compliance is important when considering the Americans with Disabilities Act, but there are also cross-browser benefits, too.)

With responsive sites, you can use the srcset and sizes attributes for the IMG HTML tag, as explained here. This is obviously something you want to do programmatically, so your developer should be able to help here.

2. Avoid browser image scaling. If you add an image to a web page, it should always be added at full native resolution, i.e. if the image is 500px wide on your computer before you upload it, it should be 500px wide on your website. If you upload a larger image and then ask the browser to scale that image, you end up with a blurry picture and excessive downloads…see the blog post never let browsers resize your photos for a more detailed explanation.

NOTE: With responsive websites, many images have to be scaled at least somewhat to make everything work. Still, you can minimize this by using the srcset and sizes attributes mentioned above.

3. Use the right file format for each image. The web’s most common file formats are JPG, JPEG, GIF, and PNG…do you know when to use each format? Do you know how to change the quality of a JPG for each application? This post about how and when to use JPG images is worth reading if you’re doing any web publishing or editing (let alone web design).

4. Optimize your images using Kraken. Image optimization isn’t just about using the right image sizes and HTML markup – it’s also about making sure the images have the right level of compression.

Many times, a JPG image will have too much detail because of camera settings. For example, here’s an image of one of the prettiest cars ever made with the quality set all the way up at 98 (out of 100). This image is pretty big – 283kb:

This is with quality setting 98/100. Image copyright Stahlkocher

Here’s the exact same image with “lossy” compression via the free Kraken.io image optimizer:

This is the lossy version of the same image via Kraken. It’s about 40% smaller (in terms of file size). Can you spot the difference?

Unless you’re extremely gifted visually, you can’t spot the difference between these two images. Yet the Kraken version is 100kb smaller.

Every “extra” 100kb you ask your visitors to download increases download times, slows your site, and costs you money. Kraken is free.

5. Check out Cloudflare. Cloudflare is available as both a free and a paid tool. As a free tool, Cloudflare can compress images, cache copies of the images on a content delivery network, and do some other things to help with site speed. As a paid tool, Cloudflare will detect the user’s device size and send them an image correctly sized for their device.

NOTE: Be sure to read this post for more information about Cloudflare, and website performance in general.

Does Website Speed Really Impact Google Rankings?

In a word, absolutely. Google has said as much:

Although speed has been used in ranking for some time, that signal was focused on desktop searches. Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.

Bing is no different – see their note about “page load time” here.

If you want your site to rank higher on Google, you need to make it faster. Images are one of the best places to start, as they’re usually the biggest pieces of content you make your visitors download.

Featured image copyright: hxdyl / 123RF Stock Photo