Blury Images & Blogspot

My sister-in-law and fellow blogger, Amber Richter, has been running into some of the same issues that I have.

Take for example the two pictures here of from her latest deco project (see below).  They're both the same image, but Google/Blogger have an API that conveniently downsizes pictures, to reduce the time it takes to get them to your phone, tablet, PC, or whatever.  Partially it's a hold over from the old days when browsers didn't have good image resizing, but with today's blog readers using phones and tablets, the smaller images make a big difference in download time.

If you use Blogger's builtin WYSIWYG editor, you probably won't end up with issues like this.  But if you use a external editor, or if you're like me and dive straight in to the HTML, you'll probably end up with something like the example below.

Lets dive in and see just what is happening.  Amber took both of these pictures with here digital camera, and the file name of the image is: DSCN0118.jpg

But these two images have very distinct URLs.

Version (1), blurry when shown at 640 pixels wide, URL:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEmuL-GCea_vVwRyd8OExNyt8vdZzrCvOxL4opCt0OXf3pzpwPWlxnL0XkNKgjg0JyA5ca-dzkgr_OWaMWxbm8eWZSsPCekkLqTne-LKX-Trd-OgsNRjsq7C_ahO1C172-6w8s0Koj6A/s320/DSCN0118.jpg

Version (2), nice and sharp at 640 pixels wide, URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEmuL-GCea_vVwRyd8OExNyt8vdZzrCvOxL4opCt0OXf3pzpwPWlxnL0XkNKgjg0JyA5ca-dzkgr_OWaMWxbm8eWZSsPCekkLqTne-LKX-Trd-OgsNRjsq7C_ahO1C172-6w8s0Koj6A/s1600/DSCN0118.jpg

So what the difference?  It's that directory just in front of the file name.  Version (1) is s320 and Version (2) is s1600.  The Blogger API is actually resizing the image on the server, shrinking or expanding the image so that the longest dimension matches the size listed in the path.  Version (1) is being shrunk to 320 pixels wide.  Version (2) is being shrunk also, as the original was probably much larger, but a 1600 x 1200 image is plenty big for the web.

How can you fix it?  If you're using the Blogger on-line editor, switch to HTML mode and search for your image.  It will be in a tag that looks something like:

<img src="http://..../s320/DSCN1234.jpg" ... />

If you're not used to editing HTML, just jump right in and go for it.  Change that "sNNN" directory in the path and up or down the number to get the width you want.  Remember the blog canvas is only about 700 pixels wide, so won't need to go much above that.  If you wanted to go for the perfect fit, set the "s" directory to the same size as the width you need.

If you're using an external editor, the process is the same, just look for that image URL and update the size directory to fit your need.

Hey, give the pictures a click, and you'll see just how they really are different sizes.

Version (1) of the image from the s320 directory, the image is 320 pixels wide but expanded to 640.

Version (2) of the image from the s1600 directory, the image is 1600 pixels wide, and shrunk to 640.