Monday, June 16, 2014

How to Improve Image Quality in Your Blogspot Blog

Author: Gagan Masoun
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.

See Also How To Tag Images In Blogger Blog To Drive Traffic?

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 :)

3 comments:

  1. Wow! I couldn't add more. I never thought PNG could be possible to use and you have a point about reducing the pixels for a quicker uploading time.

    Gagan, though I am not savvy when it comes to coding, I will surely gonna bookmark this since it is helpful. I have friends who use Blogger and it may help them to improve their image quality on their blogs.

    Thanks for the information!

    This comment was left in kingged.com where this post was already “kingged” and shared for Internet marketers.

    ReplyDelete
  2. Hi Gagan,

    Thanks again for providing other great article. I am using blogspot for one of my blog. I will definitely try the above code to improve the quality of images in my blog.

    ~Diana

    ReplyDelete
  3. There are numerous online tools such as: compressjpeg, tinypng and many others are available on internet to reduce image size. But somewhere the Image Quality also reduces. so i think this code oriented tricks will be great to improve Image Quality in my Blogspot Blog.

    Hey Bro thank you so much for sharing this step by step tutorial related to improving Image Quality in Blogspot Blog. This trick looks very simple and i hope it will help a lot to increase my blog loading time.

    keep updating Gagan...!! I found this article on kingged.com

    ReplyDelete