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.
- Upload an image in blog post.
- Now switch the post editor view to HTML mode.
- Search for the image source code something like below.
- 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 delete s320/ from the image source code. Deleting this code will force the browser to display a scaled image with high definition.
- If you want to display image in its original size, then simply edit its height and width.
- That's it.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjRwOU4hzpWYfPA1MR3rSvqN-VOmK_XiHWHbn_H-UJRySkgv4Y5IzzW2b61T_qaB9fTg92re7c5hsv2ZJ9Zlr2hlFYwA1i_HolA7ATVBuHn7num8XZdvUuchg5R80PwO6eetCFpJVTsVku/s320/image-quality.jpg" height="120" width="320" />
Post a Comment