Reducing Image File Sizes in Blogger Posts

It was recently called to my attention (Thanks, Alan!) that Blogger has a 1MB page size limit when I was asked if there was any way to get around it, especially when including lots of pictures and video.

My first reaction was "Probably not" since Blogger likely imposed the limit to constrain server load and/or so blog viewers don't get the impression that the Blogger service is slow. I still think there's no way around the limit.  But, assuming that the size of linked content loaded with the page counts against the limit, it should be possible to fit more on a page than Blogger's simple controls sometimes directly allow.  In particular, the file size of image thumbnails can be changed.

I had originally intended to explain how one can create their own thumbnail images smaller in both dimension and file size, upload them, and change URLs in posts to point to the smaller images rather than the large ones that are just programmatically sized by the visitor's browser. However, it seems there's a much easier way.

As far as I've been able to tell, Blogger has a bug of sorts with the addition of images to a post. I don't know at this point whether it's related to the browser and/or operating system used while adding the image, to the template used, or to something else. But an easy hack will get around the problem.

The following block shows code similar to that added to a post by Blogger when an image is added to the post. The second block shows the same code reformatted to be a bit more "human readable."

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjirj9gGsjKWuOymg6tuZq6Fhy6rCPj7UcHdZyFX4yjRsHduqXWOluW7A3QkqQEwxG5wA-LW87cp9wArnJWSPIWSiC-JIbzY6AS18WLHBQ1G8s2VFQhVjNfa3X64K1ctKaEMC-_B-IXXFA/s1600/VL_dmesg_comparison.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjirj9gGsjKWuOymg6tuZq6Fhy6rCPj7UcHdZyFX4yjRsHduqXWOluW7A3QkqQEwxG5wA-LW87cp9wArnJWSPIWSiC-JIbzY6AS18WLHBQ1G8s2VFQhVjNfa3X64K1ctKaEMC-_B-IXXFA/s1600/VL_dmesg_comparison.png" width="200" /> </a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="http://.../8DWceGrCEqI/s1600/VL_dmesg_comparison.png" ... >
   <img border="0" height="150" src="http://.../8DWceGrCEqI/s1600/VL_dmesg_comparison.png" width="200" /> 
</a>
</div>

The URL between "<img" and ">" specifies the image to be displayed. The "height=" and "width=" attributes specify the size that the image is scaled to. But the highlighted bit can be adjusted to change the actual size of the image. This bit specifies the width of the image. The height is adjusted accordingly.

In some cases, if the a different size (e.g. "Small") is selected using Blogger's controls, the highlighted bit will be changed to s200. The actual image, and thus it's file size, will then be much smaller. In other cases, though, only the "height=" and "width=" values are changed. In the situation shown above, the full-size image happens to be 1600x1200, and the image was only scaled to be displayed smaller.

To change the actual image size while editing a post, all that's needed to to switch from "Compose" to "HTML" mode, find the code for the image of interest, find the "s" value in that code, and change it to the desired size. Assuming that a "width=" value is specified, you can use that value for the "s" value.

Incidentally, an image of the specified size is apparently generated on-the-fly. I tested for a weird size (s212) from an original 1600x1200 just to see, and it actually generated a 212x159 image! Note that the image is still scaled to whatever "height=" and "width=" values are specified.

To verify that the image actually is smaller, right click on the image on the post page after you've updated the post and select View Image Info, Image Properties, or the like.