s72-c Thumbnail Size And Blurry Image Problem

A common post snippet thumbnail issue that affects blogger themes is a blurred and stretched thumbnail issue, which at a glance, this issue is similar to blogger image quality loss.

Blogger blurred image issue is due to the s72-c format used to store images inside JSON and XML feeds, which is in a dimension of 72px width and 72px height. This 72px squared image format will be blurred and stretched when the images are enlarged to comply with page setting using CSS elements. Hence, this format affects the image or photo resolution, and resulted blogs to show low quality post snippet thumbnail images.

Main Image — An example of blurred and stretched blog thumbnail image.

How to identify the problem?

s72-c thumbnail size format is not the only reason which affect the quality of blog thumbnails. Blurred and stretched images could happen due to a low quality picture resolution or a few other elements. Therefor, you must identify the source of thumbnail image problem before making any correction to the template. This may help you to take the correct solution and to avoid from making other errors on the template. There are 2 methods to identify s72-c issue on your blog.

Template check : Open blog homepage. Right click on the homepage and click view page source. Check for any thumbnail image url in the markup.
On-page image check : Open blog homepage. Right click on any of the post snippet thumbnail images on the homepage, and click copy image address to copy the image url.

You can identify the cause of blurred and stretched blog thumbnail images on your blog is due to s72-c issue if "/s72-c" is included in your image url (for an example: url:"https://lh3.googleusercontent.com/-xxxxxx/s72-c/image.jpg" ).

s72-c problem is easy to solve. The solution recommended in this post will auto resize blog featured thumbnail images for post snippets, and it requires a one-time process which is shown below.

How to resize default thumbnail resolution in Blogger?

Blogger image resize operator is the best method to fix blurry and stretched post snippet thumbnail problem. ResizeImage operator can ensure that the thumbnail is displayed in the suitable size. It prevents this problem to repeat, without any javascript

Steps to add resizeImage operator to template.

Where to add resizeImage : Use ctrl+f and search for <b:if cond='data:post.thumbnailUrl'>, which is in <div class='post hentry'> tags. The tag may similar to the markup below.

HTML

<b:if cond='data:post.snippet'>
   <b:if cond='data:post.thumbnailUrl'>
      <div class='thumbnail'>
         <img expr:src='data:post.thumbnailUrl'/>
      </div>
      <div class='snippet'>
         <data:post.snippet/>
      </div>
   </b:if>
</b:if>

Add resizeImage operator markup : Replace your <b:if cond='data:post.thumbnailUrl'> with the markup below.

HTML

<b:if cond='data:post.thumbnailUrl'>
   <a expr:href='data:post.url'>
      <img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 991, )' expr:title='data:post.title'/>
   </a>
</b:if>

Explanation on ResizeImage Operator Method

The quality of thumbnail images can be improved by re-writing the resizeImage operator based on it's syntax of resizeImage(imageUrl, newSize, optionalRatio). You can opt to set a new width for images by changing the value of newSize. As for an option element to improve thumbnail images, you can add optionalRatio to set an integer ratio of width to height for the resized image as shown in the examples below.

Example for new image size at 600px with ratio 1:1

<img expr:src='resizeImage(data:post.firstImageUrl, 600, "1:1")' />

Example for new image size at 900px with ratio 4:3

<img expr:src='resizeImage(data:post.firstImageUrl, 900, "4:3")'/>

Other recommendation

As an additional step to improve the quality of the thumbnail, a pre-set image dimension which is included in a picasa image url should be deleted. In the example below, a picasa image dimension is /w140-h140-p. https://lh3.googleusercontent.com/xxxxxxx/xxxx/w140-h140-p/icon-96x96.png