How to Improve Image Quality in Your Blogspot Blog

By default blogger reduce the quality of uploaded images on blogger blogs. Blogger do this to provide better load speed. But blogger don't like reduced quality of images. So, I am here with a trick to improve the image quality in their blogger blog posts. Keep in mind today I will not talk about optimizing the images, its a different process. Now, I have a trick to maintain the quality of images we upload to our blog posts. Today in this article, we will show you how to improve image quality in blog posts.

Important Tips to Improve Image Quality:

• Do not use too much small images in blog posts. Because they doesn't look nice.
• Use photo editing software if image is too much large. Just reduce some pixels. Because image will be take less time to upload.
• Try to use PNG format images for your blog posts.

Improve Image Quality in Blogger/Blogspot

Go to your Blogger Dashboard >> Go to Template >> Edit HTML. Now press Ctrl+F and 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 you have to add the DIV ID or DIV class to improve images quality accordingly. Simply replace#somethinghere from the above code.


Now, click on "Save" button and go to your blog. It's all done :)

Share your experience after adding this code to your blog. Also ask anything related to blogger problems. I am always here to solve them. Please share this post on Facebook, Twitter, Linkedin etc. Thanks and Stay Blessed :)