How To Optimize Your Images For Speed

Everybody wants their website to look pretty. That usually means having pretty images. It also means you need to optimize images for speed.

Images are an essential part of a website. But, when used improperly, images can undermine the visitor experience of your website… which undermines the very goal of having a pretty website.

No matter how beautiful the site, if it’s too slow, people won’t appreciate it. When it comes to conversions, slow and steady doesn’t win the race. If your site isn’t loading quickly, then you aren’t going to get the traffic you want.

One of the best ways to get a faster website is to optimize images for speed. So, let’s take a look at your images.

Why Optimize Images For The Web?

Images are vital components of your site. Using images poorly can hurt– after all, people like to “skim” things online. A picture is worth 1000 words, and with that in mind, it is crucial that your site doesn’t sacrifice on image quality, especially when it comes to the experience of the user.

That being said: Images should still be among the first elements you look at when determining how to optimize your site.

Speed is a huge factor in ranking with search engines. With Google’s (impending) Page Speed Update, it will impact mobile searching even more. Slow sites have poor rankings. (And, frankly, annoy visitors!) As we’ve noted before, the amount and size of the elements on your page have a direct result on your site’s load time.

Images tend to have large file sizes. More than text elements, they can drag down your load times. And they don’t have to! Choosing the right type of image, reducing the size of image files, and utilizing a content delivery network are all part of optimizing images for speed and won’t change the experience of your site.

How To Optimize Images For Speed

Here are 4 ways that you can optimize images for speed on your website:

#1- Choose The Right File Type

Just choosing the right file format can help your website load pages quicker. The main battle to consider? The clash of the titans: PNG vs. JPG.

PNG

PNG files have a hefty list of pros to them:

• Lossless data format
• Have great pixel-level detail for high-contrast images
• Support transparent backgrounds
• Can handle text, icons, and graphics within an image
• Are ideal for logos

And they have one glaring con:

• Huge. File. Size.

JPG

JPG files, on the other hand, have a different set of opportunities and challenges. On the plus side:

• Smaller than PNG files
• Optimized for Photography
• Great for photos & realistic images

As far as cons go:

• Defined lines in graphics or text can be blurred
• No transparency support
• Not great for CYMK printing
• Once the image has been changed or compressed, the data can’t be recovered. (This is what’s called a ‘lossy’ data format.)

Tough decision? Well, it may get tougher, because we’ve got another type to consider: WebP.

WebP

The new kid on the block, WebP is a format introduced by Google in 2010. It has an encoding type that allows for both lossy and lossless data formats. Which brings us to WebP’s huge advantage:

• It dramatically reduces file size.
  • Google found that converting to WebP from a standard PNG resulted in a 45% reduction in file size. And when the PNG format was compressed to be as sleek as possible, it was still a 28% reduction in file size.

So why not change every single image on your site right to WebP? There are a few cons to this format too:

• WebP is not supported by all browsers
  • This is a biggy. It’s a Google image system that is natively supported by Chrome, but other browsers like Firefox and Safari don’t support it. (Yet. They are experimenting with it.)
  • On a desktop, Chrome has > 50% browser share worldwide, and has 62% browser share in the US.
  • On mobile, Safari has the edge: 51.88% to Chrome’s 40.51%
  • Feb 2017Mar 2017Apr 2017May 2017June 2017July 2017Aug 2017Sept 2017Oct 2017Nov 2017Dec 2017Jan 20180%12%24%36%48%60%SafariChromeSamsung InternetAndroidUC BrowserFirefoxOperaIEMobilePuffinOther (dotted)StatCounter Global StatsTop 9 Browsers in the United States from Jan 2017 – Jan 2018Source: StatCounter Global Stats – Browser Market Share

This means that it’s important to check your Google Analytics to see who is using what browser to view your site.  Make sure you’re not exclusively choosing image types that your visitors can’t see!

Also, be sure to have a system in place to revert to the legacy file type, (JPG or PNG,) when WebP isn’t supported. It is totally possible to have WebP formats available for the browsers that support it but use jpg or png as an alternate format when needed. That will give you the best of both worlds! This isn’t natively supported in a lot of CMS systems like WordPress, so it will require some custom coding. (SuperWebPros includes this service with all of our sites!)

Data formats depend on what legacy image type you’re converting from

• If you convert from a PNG file, the WebP image will be a lossless data format.
• If you convert from a JPG, it will be a lossy format.

What does this all mean for your site? Be smart when choosing type. If you have a logo with defined lines and a transparent background, look to PNG. A standard photo or image might be fine as a JPG, or ideally a WebP image, to help your site load faster! Keep in mind, these differences in quality are often indistinguishable to the human eye. Can you spot the differences in these 3 images?

This brings us to the next issue aside from type: compression.

#2- Compress Images To Reduce File Size

When it comes to speed, file size is the enemy. Once you’ve determined the right type, how can you reduce the photo file size to help the page load quicker?

We’ve discussed image compression before, but there are some additional WordPress plugins than can help keep your images sleek and swift.

• Smush is an award-winning WordPress plugin that compresses any image in any directory, cutting the unnecessary data from the file
• TinyJPG/TinyPNG compresses PNG and JPG files down to optimize them for speed. It’s great for bulk optimization, and there are no limits on file size.

Embed a call to action: “53% of visitors abandon a site if the load time is longer than three seconds. Is your website fast enough? SuperWebPros can help optimize your site and maximize your traffic. Contact us to find out more!”

#3- Serve from a CDN

Content Delivery Networks provide a means of fast delivery for internet content. This includes HTML, Javascript, Stylesheets, Videos… and, you guessed it, Images.

If a visitor is loading a large file type, like an image, on the other side of the country from where the hosting server is located, that’s a long way to ask that data to travel. The sheer distance adds to load time!

CDNs get around this problem by keeping a file cache on a geographically distributed network. Visitors pull their data from the closest available data center as opposed to the website’s server of origin. Shorter distance- lower latency. Lower latency- faster load times.

#4- Lazy Load your images

We discussed this briefly in our post on Google’s Page Speed Update, but lazy loading images is a great way to improve load times without drastically modifying the content of your site.

When you go to a page, the default is for the page to load all of the content. Images, text, video, whatever elements might be on that page. Once all of that information is pulled up, the page loads.

But there’s only so much of a page your visitor can see at once! Why load the entire mess of data at the beginning? Lazy loading breaks down the process and only loads what is visible. It creates container blocks for image files but doesn’t load them until the visitor actually scrolls down to that spot of the page. (You may notice that effect on our website!)

This has the advantage of not slowing down page load times, and helps the user’s experience feel faster!

Test And Monitor Your Images For Speed

Now that you have 4 steps to optimize your images, it’s important to stay on top of them. Once you’ve streamlined your images, determine a baseline for your load times. (And make sure that it’s as fast as Google expects for a good ranking!)

You can use Cloudinary’s Website Speed Test to help determine just how fast your site is.

Once you have your baseline, monitor your site consistently! Keep your images loading in a snappy manner and keep your visitors, (and Google!) happy.

Does your site take too long to load? We can help with the optimization process and help you convert more traffic! Click here to get started with a free site audit.