How To Optimize Your Images For Speed

Images can make a website. They can also break it's search rankings. It doesn't have to be that way.

Table of Contents
    Add a header to begin generating the table of contents

    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:

    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.

    Duke Kimball

    Duke writes words, good. When he's not crafting content for The Pros, he's crafting stories, enjoying craft beer, or gourmet coffee. He is Portlandia.

    Also from the Pros...

    Top 10 Most Critical Security Risks For Business Websites

    Small businesses get hacked. Here are the most common risks to watch out for.
    Read More
    graphic_blog_illustration--ultimate-guide-to-securing-business-website

    The Ultimate Guide To Securing Your Business Website

    Small businesses get hacked. Here's how to keep your website secure.
    Read More

    What Google’s Speed Update Means for Small Businesses

    Google’s just announced a new speed update, set to impact all of their mobile traffic by June of 2018. Is your business website ready?...
    Read More
    Hands Holding A Tablet With SuperWebPros Logo and Text: 5 Keys To Successful Content Hierarchy

    5 Keys To Successful Content Hierarchy

    Have a lot of information to share? Here's how to make it accessible to customers.
    Read More
    Boost Your Website’s Performance With Images

    How To Boost Your Website’s Performance With Images

    Great images make a website stand out. Make them performant and watch your SEO grow.
    Read More
    titles and meta descriptions

    How to Write Killer Titles and Meta Descriptions that Engage Visitors and Juice Rankings

    Learn how to write titles and meta descriptions for your webpages that will help to potentially improve your search engine rankings...
    Read More
    On Page SEO

    On-Page SEO: A Super Simple Guide

    When most people think of "SEO," they think of on-page SEO. Here's what it can - and can't - do.
    Read More

    Why Marketing Campaigns Fail

    Jesse Flores of SuperWebPros joins the Morning Blend to talk about why marketing campaigns fail and how to help yours succeed.
    Read More