Here is a simple way to reduce the sizes of the images which Blogger uses as snippet thumbnails in its official default Popular Posts widget.
In the results, I noticed that most of the opportunity to speed up loading was in reducing image file sizes. But looking closely, I noticed that the images the report presented as examples were all snippet thumbnails; not the images from the post itself, which were loading appropriately. All these example images that were eating up load time were coming from
This should be just a small image in the sidebar of the blog. And it's displayed at 440x215 pixels. Good size. But if you right-click and open that image in a new tab, you'll find that it's the full size 1136x556 version of the image. What a huge waste to load this full size image just to display as a small thumbnail. And I had 7 of these in the Popular Posts widget all together.
Now you'll want to scroll down and find this piece of code. This is the most important thing we want to change.
Save the template changes, and that's it! Reload your blog and open those thumbnail images in a new tab, and they should be greatly reduced in size.
Notice any difference between the quality of thumbnails in these two pictures? One is a full size 1400 pixel image, the other a 280 pixel version. But at this small display size, they appear essentially identical.
 |
| Altering the loaded image sizes of Blogger popular posts widget thumbnails |
Background: Why bother editing the thumbnail sizes?
Granted, this isn't really a big deal, but if you find your blog loading slowly, something you might want to look out for is images that are displayed small on your blog but are being loaded full-size in the background. I happened to notice this was happening on my blog when I I ran Google's PageSpeed Insights tool.
div class="snippet-thumbnail post-thumb-XXXXXXXXX...
I realized that these thumbnails that were loading are the thumbnails from my Popular Posts widget I had put in the sidebar. I double checked, and sure enough, those thumbnails that were being loaded were the full size versions of those images; not the reduced sizes typical for a thumbnail. The pictures were all loading full size, but displayed in smaller sizes with CSS. Not ideal.
Here's what I mean.
Look at this sample of a post that appeared in my list of Popular Posts:
So to fix this, I wanted to reduce the size of thumbnail images that load here, which is thankfully very easy in Blogger.
Reduce Popular Post widget thumbnail sizes in blog template
To do this, we need to edit the HTML of your blog template.
Theme > [down arrow] > Edit HTML
Click the little boxes icon to Jump To Widget, in this case the Popular Posts widget
<b:include data='{image: data:post.featuredImage, imageSizes: [280,560,840,1120,1400] }' name='responsiveImage'/>
Those numbers there are the possible sizes of the thumbnails that get loaded. In these newer "responsive" themes this is usually good, rendering up the image sizes to fit the screen. But for thumbnails, we really don't need a 1400 pixel image being loaded.
Be aware that there are probably 3 instances of this code in your blog template. Others will modify the thumbnails displayed for your main blog feed and etc. So be sure you've found the instance that is within the PopularPosts1 widget.
I simply removed all the larger numbers, forcing the blog to load the smallest possible size, 280px, which is plenty big for a thumbnail.
In fact you could manually change that to a smaller number like 140 without much problem. Adjust the size until you find the smallest that maintains clarity on a screen. Really, 280 is probably the best.
<b:include data='{image: data:post.featuredImage, imageSizes: [280] }' name='responsiveImage'/>
Save the template changes, and that's it! Reload your blog and open those thumbnail images in a new tab, and they should be greatly reduced in size.
Judge for yourself:
Notice any difference between the quality of thumbnails in these two pictures? One is a full size 1400 pixel image, the other a 280 pixel version. But at this small display size, they appear essentially identical.
Not a huge thing, but this method can help to reduce some page loading times and maybe even improve SEO. I'm pretty surprised the Blogger themes don't do this automatically, but it seems like they valued clarity over efficiency.
Comments