How to Improve Image Quality issue in Blogger

Socialize It →

Tweet

3

Advertisements

Being a blogger user, you might have noticed that sometimes blogger compromised on the image quality. By default when you upload images to your posts, blogger reduces the quality of the image so that your site loads faster than it normally does. Recently, we got a query from a user asking for how to improve image quality in blogger so that he can provide high quality images on his blog. In this day and age when websites are getting professional it is essential to take care of each and every element. Therefore, today in this article, we will show you how to improve image quality issue in blogger.

Tips to Improve image quality:

1. Do not use blurry images that are highly pixelated make sure they are of high resolution and are taken from good camera as well. 
2. Adopt one width and try to resize your images using any photo editing software and then upload it to your site. This keeps your images quality better as well.
3. Make sure that the image that you upload should be in PNG format, JPEG image usually increases the sizes of the image that alarms blogger to compress it in smaller format. 

How to improve image quality in Blogger?

The first step is to login into your Blogger account and go to Template >> Edit HTML. Now in the template coding, search for </head> and just above it paste the following piece of code.

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
  // change the dimension variable below to be the pixel size you want
  var dimension = 90;
  // this identifies the PopularPosts1 div element, finds each image in it, and resizes it
  $('#PopularPosts1, #somethinghere, #related-posts').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
    image.attr('width',dimension);
    image.attr('height',dimension);
  });
});
//]]></script>

Now to improve image quality you have to add the DIV ID or DIV class so that it could fetch all the images in it and improve its quality accordingly. We have added most of the common IDs and Classes. However, you can have your own as well by simply replacing #somethinghere from the above code.

Once everything is done, save the template by pressing that orange “Save” button located at the top of the screen and now the quality of your images won’t let your site down.

We hope this tutorial may have helped some of our user in improving the picture quality of their posts, popular posts, recent posts, and etc. In case you have same problem before then do let us know what your solution to the problem was, and let us have a meaningful conversation that could benefit each and every of our users. If you liked this post then, feel free to share it with your fellow blogger friends at Facebook, Google+ or twitter.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).