Pixel Level Precision

I've heard a number of people claim recently that Blogger doesn't give you much control over the size of images you can add to your post. Essentially they give you small, medium, large, x-large and original size. In theory this gives you full control as you could resize your images outside of blogger and then display them at original size. The problem with this of course is that you might not know what size would work best until you have uploaded your image. The solution is to switch to the HTML view where, if you know what you are doing, you can have full control over the size of your image right down to the pixel.

So for those of you who would like more control but have never messed around with HTML before I'll walk you through the steps using an image about dead pixels.

I chose to upload the image to be displayed at a small size and to the left. Blogger generated the following HTML to achieve this (note Blogger puts it all on one line but I've separated it out to make it easier to read and refer to):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznpxj-ACnxUWDExnR4EzI4kGQ-JuD2TzBjYMWega3VV51nQZPVQ50jILnN727oC58SDzIIdlTPclNODNu8oLG_OP1V2wM0YJ1FUaxF6JAW9wp3iDcEXgl4eEZcX8oVI780PbsW1yqCec/s1600/dead-pixels.png" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em">
<img border="0" height="150" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznpxj-ACnxUWDExnR4EzI4kGQ-JuD2TzBjYMWega3VV51nQZPVQ50jILnN727oC58SDzIIdlTPclNODNu8oLG_OP1V2wM0YJ1FUaxF6JAW9wp3iDcEXgl4eEZcX8oVI780PbsW1yqCec/s200/dead-pixels.png" />
</a>
</div>

Essentially Blogger has put the image (line 3) inside a link (starts on line 2 ends on line 4), so that when you click on the image you get a larger version, which in turn is placed inside it's own section (a div tag starting on line 1 and ending on line 5). Fortunately we can ignore everything but the image on line 3.

If you look at line 3 you will see that the width and height of the image are explicitly set to 200 pixels and 150 pixels respectively. Now if you change one of these values you will obviously need to change the other one to ensure that your image maintains the same ratio of width/height. Fortunately you don't actually need to do any maths! I'm not sure why Blogger explicitly sets both dimensions of an image because by default all browsers maintain the aspect ratio of an image when only the width or the height is set. So depending how you want to specify the size you need to delete one of the values and change the other. I usually find it easiest to delete the height and alter the width.

So let's change remove the height and change the width to 400 pixels to give us:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznpxj-ACnxUWDExnR4EzI4kGQ-JuD2TzBjYMWega3VV51nQZPVQ50jILnN727oC58SDzIIdlTPclNODNu8oLG_OP1V2wM0YJ1FUaxF6JAW9wp3iDcEXgl4eEZcX8oVI780PbsW1yqCec/s1600/dead-pixels.png" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em">
<img border="0" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznpxj-ACnxUWDExnR4EzI4kGQ-JuD2TzBjYMWega3VV51nQZPVQ50jILnN727oC58SDzIIdlTPclNODNu8oLG_OP1V2wM0YJ1FUaxF6JAW9wp3iDcEXgl4eEZcX8oVI780PbsW1yqCec/s200/dead-pixels.png" />
</a>
</div>

As you can see the image is now larger and still has the right aspect ratio. Success? Not quite yet. What you might not be able to see overly well in this example is that the new larger image isn't actually as sharp as it should be.

To try and make sure that your blog loads as quickly as possible Blogger tries to keep down the amount of data it needs to transfer to your computer. One of the ways it does this is by resizing the images before it sends them to you. If you look again at line 3 you will notice that the end of the image URL looks like /s200/dead-pixels.png. The 200 in the URL tells Blogger which size version of the image to send, in this case 200 pixels along the longest edge. So you now have a 200 pixel wide image being scaled up to 400 pixels wide by the browser which is why it doesn't look as sharp as it should do. Fortunately it is easy to change the URL to give us an appropriate size image.

I'm not sure of the full range of valid sizes but I do know that you can specify any sizes up to 1600 in multiples of 200. So for this example we can specify that we want a 400 pixel wide image:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznpxj-ACnxUWDExnR4EzI4kGQ-JuD2TzBjYMWega3VV51nQZPVQ50jILnN727oC58SDzIIdlTPclNODNu8oLG_OP1V2wM0YJ1FUaxF6JAW9wp3iDcEXgl4eEZcX8oVI780PbsW1yqCec/s1600/dead-pixels.png" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em">
<img border="0" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznpxj-ACnxUWDExnR4EzI4kGQ-JuD2TzBjYMWega3VV51nQZPVQ50jILnN727oC58SDzIIdlTPclNODNu8oLG_OP1V2wM0YJ1FUaxF6JAW9wp3iDcEXgl4eEZcX8oVI780PbsW1yqCec/s400/dead-pixels.png" />
</a>
</div>

As you can see changing the URL to ask for a more appropriately sized image gives us a much sharper photo as the browser doesn't need to stretch it to the requested size.

The trick of course is to choose an image size that balances the trade off between sharpness and download speeds. I always go for a URL pointing to the smallest image that is the same size or larger than I want to display. This ensures that the browser never has to stretch the image and crushing it downwards doesn't have quite such a dramatic effect on sharpness.

Hopefully all that made sense and will allow those of you who aren't too comfortable editing HTML to have better control over the images you use in your posts. If there was anything that wasn't clear or didn't make sense leave me a comment and I'll try and help.