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...

    5 Logistics Company Homepages That Make You Scared of Losing Your Package

    Uncover the crucial homepage design errors logistics services must avoid to maintain client trust and ensure a positive online experience.
    Read More

    5 Logistics Company Homepages That Make You Believe In Their Efficiency

    Discover top logistics homepages that showcase industry-leading efficiency, precision, and reliability in a compelling digital format.
    Read More

    5 Healthcare Homepages That Make You Think Twice About Scheduling an Appointment

    Explore how the design and usability of healthcare homepages can impact patient trust and engagement, and learn key strategies for improvement.
    Read More

    5 Professional Healthcare Homepages Where Trust and Care Meet

    Explore top healthcare homepages that combine design, clarity, and patient focus to inspire trust and confidence in your healthcare choices.
    Read More

    5 Non-profit Organization Homepages That Make You Hold On To Your Money Instead of Donating

    Explore common pitfalls to avoid in non-profit homepages to ensure your site captivates and motivates potential donors.
    Read More

    5 Non-profit Organization Homepages That Inspire You To Donate

    Explore five non-profit homepages that brilliantly inspire action and support through compelling design and storytelling.
    Read More

    5 Construction Homepages That Are So Poorly Designed, You’ll Question Their Building Standards!

    Discover why these construction company homepages miss the mark in design functionality, and how to avoid such mistakes in your web presence.
    Read More

    5 Amazing Construction Homepages Blending Functionality and Style

    Explore how successful construction company homepages are designed to exude confidence and professionalism, enticing potential clients.
    Read More