WordPress has lots of plugins. And when we say lots, we mean lots. At the moment of writing this article, it shows 54940 plugins. These plugins have very different purposes, and you can tell immediately if they work or not, right after installing and activating them. But, what happens with those that work on the background? Like ShortPixel Adaptive Images? How can you know if it is doing its job correctly? Let’s see it.
Testing ShortPixel Adaptive Images #
Taking into account that ShortPixel AI optimizes and serves the images right after activating the plugin, the fastest way to know if your images are being optimized is by looking at the source code of the page and see where the image is coming from. So, assuming that you already activated the plugin, do the following:
- Reload the page (F5) twice. Unless a page is visited, the images on a specific page won’t be optimized. So, reload once to “send” the images to optimize and another time to see the results.
- Right-click on the image you want to have optimized.
- Click Inspect or Inspect Element (it depends on the browser).
- The source code will open next or below the page, and the relevant line of code will be highlighted. Look at the URL of the image; it is usually located in the
srcattribute:
-
Does the URL start, like on the previous image, with
https://cdn.shortpixel.ai? Congrats! Your image is optimized correctly.
If you deactivate the plugin and repeat all the process, now the same images will be coming from your own domain:
I have the plugin active, but the images are not optimized. Why? #
ShortPixel Adaptive Images will look for PNG, GIF and JPEG (.jpg) files in certain HTML tags of your page and in the CSS files that are loaded from your own domain, and will change the src (source) attribute value so your image is now served from ShortPixel’s CDN: How does ShortPixel Adaptive Images work?
Files that are loaded from other domains or images served through PHP (.php) are left untouched. That’s why 😉
We recommend you to have a read at this article too, in order to troubleshoot possible issues: I installed ShortPixel Adaptive Images but it doesn’t seem to work
Are the WebP and/or AVIF served correctly too? #
In case you activated the option to serve WebP images (under Settings > ShortPixel AI > Next-gen Images Support), you can also test it using the Developer Tools of the browser. First, press F12.
- Click on the Network tab, and then Img:
- Reload the page (F5) twice, waiting a few seconds in between. Unless a page is visited, the images on a specific page won’t be optimized. So, reload once to “send” the images to optimize and another time to see the results.
- Now you should see all the images with Type
webporavif, regardless of the extension of the file. There’s a chance you will also see some other unusual stuff, likesvg+xmlortext/html. You can ignore those.
In case you are experiencing issues with WebP files, please have a look at ShortPixel Adaptive Images doesn’t serve WebP images, why is that?.
Is lazy loading working correctly too? #
ShortPixel Adaptive Images also has an integrated lazy loading feature. To check if it’s working, follow these steps:
- Press F12 to open again the developer tools.
- Click on the Network tab, and then Img:
- Scroll all the way up until you reach the top of the page.
- Reload the page (F5).
- Now you will see some images loading like this:
- Wait until the page is fully loaded and then scroll down a little bit until more images appear on screen. The Developer Tools will look like this:
As you can see, 3 more images have been loaded. What you see on the Waterfall column in red rectangles is the time you have waited until you scrolled down. This screenshot, for example, showed that we wait a few seconds before scrolling down, and when we did so, josepllui-1.jpg loaded. Then we waited a bit more, scrolled further down and the last 2 images loaded. Lazy loading is working 🙂