• How to Improve Image Quality in Blogger Post?

  
  

  

  Today I bring a trick for bloggers to improve the image quality in their blog posts. I am not talking about optimizing the images, but I am talking about the quality of the images which normally distort after uploading the pictures in blog posts. Blogger's image uploader never shows up the images in their original size we wanted it to be. And if we try to resize it, then it lost their quality. I found a solution that will help us to maintain the quality of images we upload to our blog posts. Let's learn this trick practically. But before I start the tutorial, you may be interested to check a demo of the difference you can get after applying the trick on your blog.

  
  

  Before
  

  
  
  
  

  After
  

  
  
  Have you noticed the difference in both the images? This is what we normally face in blogger. So, it's time to learn how we can improve image quality in blogger.
  
  

  • Related Post: How to Remove Border Around Pictures in Blogger?

  Improving Image Quality in Blogger Post

  
  

  The reason of poor quality is high compression ratio which is used to create the thumbnail. Once we insert a picture in our blog post, we have several options to resize it like Small, Medium, Large, X-Large and Original Size. But I like to resize it manually in HTML. Follow below steps to improve quality of your images in blogger.

  1. Upload an image in blog post.
  
  
  2. Now switch the post editor view to HTML mode.
  
  
  3. Search for the image source code something like below.
  
  

  
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnQEykhDaGk2S3FMVTU7BmRbPnUz3iXuQh9a9o5mkJ6WLQZHR53HuaWgFYM1nwjU0pjs15UECF9o1QCwZ5L1B9tHKP8mWppT_6aijGZ_n54jUnOWcpNX-RxwhzyDq59GCs4dybiz2dFxDb/s320/image-quality.jpg" height="120" width="320" />
  

  
  
  4. The above source code is the URL of a thumbnail and if we try to resize it, then it will lose its quality. To gain image quality back, simply deletes320/ from the image source code. Deleting this code will force the browser to display a scaled image with high definition.
  
  
  5. If you want to display image in its original size, then simply edit itsheight and width.
  
  
  6. That's it.

  
  

  • Must Read: Add Title and Alt Attribute To Optimize Images For SEO

Share on Facebook Share on Twitter Share on Google Plus

About Unknown