Many websites have begun improving user experience and page load speed by dynamically serving different image resolutions dependent on the size of the user’s browser. This means that a user on a large-screen desktop computer may be served an image of one size (i.e. a 800×400 pixel banner), while a mobile user will be served a much smaller image (300×150). This offers advantages to both the website owner (in that bandwidth is conserved) and the end user (in that mobile users have faster page load times, and desktop users still get a high-resolution experience). Below is an example from our own website, with the mobile file size being less than 1/3rd compared to the desktop.
Click on the images below to compare their actual resolution:
The image above is served to desktop clients. The image below is served to mobile clients.
However, this can also pose a challenge for SEO analysts. Knowing that page load speed has become an important metric for organic visibility, and that image file size is a major lever for this, it’s crucial to make sure that you’re analyzing the right set of images to determine if any are oversized. If your crawl of a client website is grabbing the low-resolution images intended for mobile devices, you might miss the fact that oversized images are being served to other users (and potentially to GoogleBot!). This is a fairly unique problem, but thankfully one that can be solved using advanced features of the industry standard crawling tool, Screaming Frog.
Doing the Analysis
One of the best features of Screaming Frog that makes it stand above other similar tools is its rendering options. In essence, Screaming Frog allows the user to choose options about what to do with the URLs it grabs – should it just parse the text, or should it utilize Javascript to render a copy of the page similar to what a normal web browser would see? By using the latter option (shown below), we can specify the window size for Screaming Frog to render as.
Because this information gets passed on to the web server when Screaming Frog is making queries, it allows us to make sure that we’re pulling the right images from the web server to use for our analysis. In our experience, the images that Google will use for its own tools (like PageSpeed Insights) is the desktop size of the image. So selecting either Googlebot Desktop or Large Desktop from the Screaming Frog options will cause the server to deliver us the same set of images that PageSpeed Insights is seeing.
Screaming Frog sees 1280×410 under the GoogleBot Desktop render setting.
PageSpeed Insights (for Desktop) sees the same version.
If you don’t manually set a large window size, it’s fairly common for servers to deliver a smaller scale image to Screaming Frog, resulting in false negatives when looking for large image file sizes. So, for instance, instead of seeing a 700kb banner that you’ll probably want to compress down to a more reasonable size (even for desktop users), you might see a version intended for a smaller window that’s coming in at 200kb prior to compression. And thus, you could miss an opportunity to improve page load speed for desktop users.
Other Considerations
A secondary benefit of this process is that you can use it to determine whether the server is delivering different images sizes as intended. Perhaps a client site is supposed to be delivering scaled down images to mobile users, but are they sure it’s actually working? It can be a major hassle to try to use a mobile device (or scaling your browser size) to manually check for this across different page templates, but by conducting multiple Screaming Frog scans with different window size rendering options, this process is a breeze.
It’s worth remembering that using Javascript rendering in Screaming Frog will take up additional computing resources. So if you’re taking on a fairly large website, we’d recommend doing this on a computer with plenty of RAM (or installing Screaming Frog on a cloud computer!). Alternatively, you could set Screaming Frog to “list” mode and do a spot-check by checking individual URLs.
These are the basics of making sure that you’re grabbing the “right” set of images from a server to conduct image file size analysis. The next step, of course, is deciding the best route to reducing file sizes as necessary – either through a change of format (i.e. from PNG to JPEG2000), using compression, or further scaling down the dimensions of images. Google provides excellent resources on that topic here.