Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Introducing The Website Speed Test Image Analysis Tool

Web developers spend their days writing hypertext, but, byte for byte, most of the web is composed of images1. It is hard to overstate the effect that images have on the average web page’s performance; faster websites have broader reach2 and a higher impact3. The first and most important thing you can do to improve the performance of your website’s images is figure out how to measure them.

Enter Website Speed Test4, a free and drop-dead-simple tool that leverages our (Cloudinary’s) image smarts to let you measure, diagnose and (crucially) communicate about the image performance of any website. Better yet, it’s built on top of, and integrated in, Pat Meenan’s WebPagetest5.

Interested? Read on!

Hero image6

What Does It Do? Link

Let’s start by looking at what Website Speed Test specifically does. We’ll start by giving it a URL — say, nytimes.photos7 — and pressing “Analyze.”

Screen recording of the mouse clicking Analyze and the loading process starting8

Tests take a minute or two to run and return a page full of results9.

Measure Overall Performance Link

At the very top of these results, you’ll find the two most important pieces of information in the whole report: a letter grade, which attempts to capture all of the page’s good and bad decisions and reduce them down to a single simple metric, and an image weight comparison which shows you, quantitatively, the cost of all of those decisions.
More on the letter grade in a minute. First, I want to address how the test calculates “cost”.

A screenshot of the summary section of the report10

In order to calculate cost, the tool has to have some sort of optimal baseline to measure against. It has to be able to say, “Here’s what you could have done with your images, but — oops! — here’s what you did, and so here’s what you could save.” Constructing that baseline is a hard problem because images are complicated and quality is subjective. As luck would have it, Cloudinary has spent years building a suite of tools intended to optimally and automatically encode images for delivery on the web. Website Speed Test takes those tools — which have, to date, been used to create performant images — and turns them inside out, into something that can measure image performance. Cool!

OK, so that’s how the test calculates costs. What about the letter grade?

When I first started running tests, I didn’t understand why some websites whose images were an order of magnitude (or two!) larger than the baseline were still getting a B, while other websites, whose total image weight was “only” 1.5 or 2 times heavier than the baseline might get a C or D.

The answer is that the letter grade reflects how many mistakes opportunities for improvement the page contains, but it doesn’t so much care about the magnitude of those mistakes. Let’s say you’ve expertly crafted a page full of dozens of well-optimized images, and then your crappy colleague, Chad, comes along and drops a stinker of a 6 MB stock photo right smack dab in the header. Chad is the worst, but one bad decision on a page full of good ones won’t have a significant impact on your overall grade — even if it does ruin your total page weight.

On the other hand, let’s say you have a page that’s serving up a mix of wildly undersized or overcompressed images to go along with its enormous bloated ones. Its total page weight might not be that bad — but its problems are endemic. As such, it will get a terrible grade alongside its respectable-looking total weight.

The tool provides two metrics because the metrics do two different jobs. The weight comparison counts bytes, and the grade counts problems. Pay attention to both!

Diagnose Specific Issues Link

Now that we have a sense of the overall performance of the whole page, it’s time to dive in, look at individual images and diagnose specific problems.

Each image on a tested page gets its own little mini-report.

A screenshot of the individual image report11
The “C” stands for “Cool image, bro.”

This shows you both what you did (how your image was sized and encoded) and what you should have done (the format, dimensions and optimally compressed file size you could have delivered, instead).
We are again presented with two big summary metrics: a letter grade and a potential savings percentage. But to really understand those metrics, we have to hit “See more.”

Screen capture of the mouse hitting 12
Details, details.

There’s a lot going on in the expanded section of the report. It’s divided into three panels. Let’s break down each of them, from left to right.

Screenshot of the first panel, Current13
Detailed report on every image, provided by the tool after analysis.

First, there’s the “Current” panel, which goes into detail about the image as it exists on the page. It’s here that we get to the roots of all of the letter grades that are being assigned at higher levels of the report. I wrote generally about “mistakes” earlier; in the “Current” tab, we can see the specific mistakes that Website Speed Test is actually checking for. The first three count towards your grade:

  • Format
    Is the image’s format a good match for its content? For example, did we use a GIF for our logo when we should have used a PNG? Would this JPEG have compressed better as a WebP?
  • Fit
    Are the image’s intrinsic dimensions a good fit for the layout and screen? For example, if the image appears at 100 px across on a 2× screen, we should be sending something close to a 200-pixel-wide image. Are we?
  • Compression
    Do the image’s quality settings strike a good balance between visual quality and file size?

Those three factors are what the test is most concerned with. Below them, you’ll see three others, which don’t actually factor into the image’s grade but are provided to highlight common, specific problems that might require special attention:

  • Color space
    Is the image encoded in a reasonable color space for the web, such as sRGB?
  • Color depth
    Are we using the right number of bits per pixel to encode color values? For instance, sRGB images should always be encoded with 8-bits per pixel.
  • Meta data
    Are we keeping the embedded meta data down to a minimum? Reader, I have seen 20 KB images saddled with 100 KB of invisible meta data. Shine a light!

After handing out grades, the test explains them and tells us what could have been done better. For example, the nytimes.photos image above was too big for the layout; JPEG was a reasonable choice, but we could have used WebP; and we really, really should have dialed up the compression.

What’s better than being told about a problem? Being given a recipe for how to fix it. And what’s even better than that? Being handed a finished solution on a metaphorical platter! So, on to our next panel, “Optimized Image.”

A screenshot of the 14
After analysis, the tool suggests an optimized size and compression for the image. You can download and use it right away.

Here, we can see (and download!) the well-optimized image that the tool generated and measured against. We get a detailed description of the settings that were used to encode it and a few interesting tidbits about the image’s actual content, which Cloudinary has figured out along the way.

Due to limited real estate and relative importance, the last panel is tucked away off screen. So, hit the little chevron and behold, “Format Alternatives.”

A screen recording of the mouse clicking and revealing the last, 15
You can also slide to Format Alternatives to explore options beyond a suggested one.

The test encodes your image in every possible format, in order to determine which one is best. If the “best” format happens to be WebP or JPEG-XR, then you’ll probably need a JPEG or PNG fallback resource, for non-supporting browsers. You can see, download and read details about those alternate versions in this panel.

From Diagnosis To Treatment Link

For all but the smallest and most static of websites, using Website Speed Test as a sort of elaborate “Save for web” like this isn’t going to be very practical. You’re going to need to figure out how to fix the problems that the tool finds in a more systematic way. How you’ll do that will vary widely depending on your workflow and on the problem you’re solving.
To solve compression problems, perhaps you could start using or even semi-automating16 excellent compression GUIs such as ImageOptim17, ImageAlpha18 and Squash19, or break out your terminal and start scripting up ImageMagick20. For problems of fit, you’re probably going to need to do something about your website’s responsive images21. And if the tool shows you that you’re missing out on big potential gains from newer formats such as WebP22, the best thing to do is to start adopting them — making sure to use either server-side23 or in-markup24 type switching, so that you don’t send new formats to non-supporting browsers.

If automating all of this yourself sounds like a tremendous amount of work, well, it is! And there are a number of image hosting services that will gladly automate that work, for you25.

OK, now that we’ve taken a tour of the metrics that the tool provides, the problems that it finds, and the solutions that it offers, I’d like to take a minute to discuss an important (and handy) aspect of how it actually works.

Website Speed Test Is Built On Top Of WebPagetest Link

What is Website Speed Test actually doing during the minute or two after you click “Analyze Images”? Mostly, nothing! Website Speed Test immediately hands the URL in question off to a different tool: Patrick Meenan’s indispensable WebPagetest26. Website Speed Test then sits back and waits for WebPagetest to do all of the hard work of loading and measuring the page and its contents.

Only after the WebPagetest API returns a set of results can Website Speed Test comb those results for images and get to work recompressing, measuring and grading them.

In other words, Website Speed Test stands on the shoulders of WebPagetest and couldn’t operate without it. So, it was exciting, to say the least, when Patrick agreed to integrate Website Speed Test right into WebPagetest!

A screenshot of the new Analyze Images tab in WebPagetest27

WebPagetest has a new tab in its navigation bar: “Analyze Images.” Click it and the current set of WebPagetest results will be shipped off to Website Speed Test for further image analysis.
This is terrific, for two reasons.

First, it means that, if you are already using WebPagetest, then Website Speed Test is only ever a click away. (And once you’re working with an existing WebPagetest result, Website Speed Test works much faster.)

Secondly, you can send any WebPagetest result to Website Speed Test. WebPagetest is a mature, featureful tool. It offers up a whole bunch of useful settings that aren’t available when you initiate tests directly from webspeedtest.cloudinary.com28.
For instance, when you enter a URL into the big box on webspeedtest.cloudinary.com, pages are tested using a single default browsing environment: Google Chrome, with a 1366 × 784 viewport and a device-pixel-ratio of 1x. It’s impossible to get a complete picture of the page’s responsive image performance from that single environment. If the page being tested doesn’t scale images down to fit smaller low-resolution displays, or scale them up to look crisp on giant 5K screens, then we’re missing out on huge performance and UX opportunities — opportunities that Website Speed Test and its single default browsing environment aren’t able to reveal. Wouldn’t it be better to test our page across a wide variety of devices29?

By starting from webpagetest.org and running multiple tests across different environments, using either the (convenient) “Browser” dropdown menu or (powerful) scripts30, we can do exactly that.

Screen capture of the WebPagetest Browsers dropdown menu31
You can choose a specific browser on a specific device and run the test for your images on it, with WebPageTest.

Big differences in results from tests run in different environments are an indication that the tested page isn’t doing anything with responsive images, and probably should.

Hopefully, future iterations of Website Speed Test will implement smarter responsive image testing out of the box, so that these sorts of cross-device problems can be caught and highlighted after a single test. For now, though, integration in WebPagetest provides an access point that lets you accomplish the same thing with a bit of extra work.

Who’s It For? Link

I’ve written most of this article under the assumption that you, reader, are testing your own websites and are looking for problems that you’ll be empowered to solve.

Indeed, that’s primarily what the tool is intended to do: help developers build better websites. It highlights specific problems and offers concrete solutions.

I think that the test will also prove to be useful as a tool for communicating with and convincing stakeholders. Again, image optimization is one of the best things that anyone can do for the performance of a page; it’s also pretty complicated. Website Speed Test excels at reducing myriad nitty-gritty details down to easily digestible metrics — and then progressively disclosing technical detail as needed. This allows Website Speed Test reports to be understood by a wide variety of readers, with vastly different levels of technical expertise. So, whether you’re using it to show a client that their page has the potential to load two or three times faster, or you’re using it yourself to understand the potential impact of 4:2:0 chroma subsampling, Website Speed Test is there to help.

Room For Improvement Link

Website Speed Test is under active development, and this is just a first release. We have a few ideas about where to take it from here. I’ve already mentioned better testing for responsive images. A “Download all” button is in the works, too. If you have your own ideas (or if you find any bugs), we want to hear about them32.

Finally, if you’ve somehow read this far without trying Website Speed Test for yourself, check it out!33

(vf, yk, al, il)

Footnotes Link

  1. 1 http://mobile.httparchive.org/interesting.php#bytesperpage
  2. 2 https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/
  3. 3 https://www.akamai.com/us/en/about/news/press/2017-press/akamai-releases-spring-2017-state-of-online-retail-performance-report.jsp
  4. 4 https://webspeedtest.cloudinary.com/
  5. 5 https://webpagetest.org
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/07/01-Website-Speed-Test-Tool-800w-opt.png
  7. 7 https://nytimes.photos
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/07/02-Website-Speed-Test-Tool.gif
  9. 9 https://webspeedtest.cloudinary.com/results/170629_ZN_15T3
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/07/03-Website-Speed-Test-Tool-800w-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/07/04-Website-Speed-Test-Tool-800w-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/07/05-Website-Speed-Test-Tool.gif
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/07/06-Website-Speed-Test-Tool-800w-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/07/07-Website-Speed-Test-Tool-800w-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/07/08-Website-Speed-Test-Tool.gif
  16. 16 https://css-tricks.com/automatic-image-optimization-hazel-imageoptim/
  17. 17 https://imageoptim.com/
  18. 18 https://pngmini.com
  19. 19 https://www.realmacsoftware.com/squash/
  20. 20 http://www.imagemagick.org/script/index.php
  21. 21 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/#the-fluid-and-variable-sized-image-use-cases
  22. 22 https://developers.google.com/speed/webp/
  23. 23 https://www.igvita.com/2013/05/01/deploying-webp-via-accept-content-negotiation/
  24. 24 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/#the-type-switching-use-case
  25. 25 https://frontend.center/ep5-image-cdns-to-the-rescue
  26. 26 http://webpagetest.org
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/07/09-Website-Speed-Test-Tool-800w-opt.png
  28. 28 https://webspeedtest.cloudinary.com
  29. 29 https://www.smashingmagazine.com/2012/09/establishing-an-open-device-lab/
  30. 30 https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-setViewportSize
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/07/10-Website-Speed-Test-Tool.gif
  32. 32 https://webspeedtest.cloudinary.com/about
  33. 33 http://webspeedtest.cloudinary.com

↑ Back to top Tweet itShare on Facebook

Eric is a Developer Evangelist at Cloudinary and lives on beautiful Orcas Island. He loves visual communication, learning through teaching and building, and the web.

  1. 1

    Alain Alemany

    July 13, 2017 4:27 pm

    Testing it ASAP. Thanks Smashing people!

    1
  2. 2

    This tool took 10+ minutes to analyze website and result is “We couldn’t find any images on this page”.

    1
    • 3

      Eric Portis

      July 13, 2017 7:14 pm

      It’s possible the Website Speed Test or Web Pagetest is struggling a bit under load. Can you share a URL?

      0
  3. 4

    Lola Bernabe

    July 13, 2017 6:43 pm

    I love this, thanks for sharing!

    0
  4. 5

    Is there a way to define which images you wish to compare?

    The reason I ask is that we don’t want to use webp type images due to compatibility issues so it would be good to avoid having those ones appear in the results.

    0
  5. 6

    Stijn Vogels

    July 14, 2017 9:12 am

    Thank you Eric. I’m always in the market for testing new testers. After going through a handful of websites, this image analysis tools seems to perform as expected. One thing I don’t understand yet is why I’m being suggested to rescale my images. I’m sure the point of this tool is not to make images visually smaller, correct? Perhaps I need to re-read your blogpost again. But this part wasn’t clear for me.

    0
    • 7

      Eric Portis

      July 17, 2017 3:43 am

      It’s possible that your images are being shrunk down by CSS, eg if you’re using `max-width: 100%:` or similar.

      Do you happen to have a URL that I can check out?

      0
  6. 8

    I am a bit disappointed when after reading this article I tried out the thing myself. It just display’s “We couldn’t find any images on this page” on the pages I wanted to test. So at the moment, cute idea but doesn’t work.

    1
    • 9

      Vitaly Friedman

      July 14, 2017 4:56 pm

      Thanks for reporting it, Michiel — it looks like there were too many simultaneous requests. The tool works fine for me now — please give it a try!

      0
      • 10

        Still the same error here, “we could not find any images on this page”
        I’m testing with a very basic page, pure html and css so if it cant handle that, this tool is not for me.

        0
  7. 11

    Cool concept, but after four failed attempts I conclude that it does not work. Sorry.

    0
    • 12

      Vitaly Friedman

      July 14, 2017 4:57 pm

      Ouch, it looks like there were too many simultaneous requests, so the server experienced difficulties. The tool works fine for me now — please give it another try!

      0
  8. 13

    Works for me now. Great tool!

    2
  9. 14

    Wait… I’m completely mind blown

    So you mentioned that I could upload an image to your servers, get the image link coming from your CDN, and the image is automatically changed to its best format without any human intervention whatsoever? And now this image I am using is dynamically changed if I log in to cloudinary.com?

    0
    • 15

      … if I log in to cloudinary.com and wish to increase its Brightness/Contrast for example?

      0
  10. 17

    Cool! I have tried it just now. Most of features are good. But one question left, how can I test a website required users login?

    -1
  11. 19

    Agustin Amenabar L.

    July 21, 2017 1:36 pm

    The problem is the complexity of automation, it is complicated. You really need a Backend service, the default compression for JPEGs sucks, even in Photoshop (Most knew this already). MozJPEG is not easy to setup, and WebP is still obscure, specially for a regular Frontendev.

    Of course many will hail Cloudinary and it’s competitors as the solution, but really… it’s not for every one. I don’t like depending on third party services when I can avoid it. But fear not!

    There are open source alternatives to Cludinary!

    So if you prefer to roll your own check these out:

    * https://github.com/andrieslouw/imagesweserv (open source version of a payed service)

    * https://github.com/thumbor/thumbor (full featured service)

    * https://github.com/flyimg/flyimg (I participate here, simple and small)

    1
  12. 20

    Yet another promotional post that isn’t labeled as such. I’m starting to wonder why I keep reading this site. Maybe it’s finally time to delete its shortcut.

    -1
    • 21

      Vitaly Friedman

      August 2, 2017 5:25 pm

      Oh, why would you say that, Bevans? I don’t think there is anything promotional about it? The tool is freely available to use, and I myself contributed to making it available for everybody to use. Would love to hear your thoughts!

      0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top