I had a couple of questions last night about images on Blogger appearing blurry and more pixelated than normal.
I then noticed tweets and comments on the Blogger forum saying the same thing. I don’t know if anything has changed or if it was just a glitch on Blogger this week but here’s how to fix it.
How to improve the quality of your Blogger images
Upload your image to Blogger as normal. Click over to HTML mode in the post editor and search for the image source code. You’ll see the image code within the code for a link. The size is typically on medium to begin with so this is what it will probably look like
<a href="//4.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_o/TNEsvz8Ey78/s1600/DSC_0003.JPG" imageanchor="1">
<img border="0" height="213" src="https://3.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_s/aTxsg4rR8W8/>s320/DSC_0003.JPG" width="320" /> </a> The s320 is your resolution and it determines the quality depending on the size of the image.
Notice how the link has a value of s1600, so when you click on the image it appears bigger and in better quality. An image with the width of 320px will look fine with s320. An image with the width of 800px will look awful with s320.
How to change the quality
The main options are s320, s640 and s1600 which is the highest quality. You can change that part of the code to be s1600 so it’s
<a href="//4.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_o/TNEsvz8Ey78/s1600/DSC_0003.JPG" imageanchor="1"> <img border="0" src="https://3.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_s/aTxsg4rR8W8/s1600/DSC_0003.JPG" width="800" /> </a> or you can remove s1600/ to set it to original so it’s
<a href="//4.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_o/TNEsvz8Ey78/DSC_0003.JPG" imageanchor="1"> <img border="0" src="https://3.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_s/aTxsg4rR8W8/DSC_0003.JPG" width="800" /> </a> How to ensure the best quality
Apart from above, there are a couple of other ways to ensure you’re images are showing in the best possible quality.
Resize your images
Always resize your images before uploading to Blogger and choose “Original Size”.
I know it’s tempting to upload them all and then resize them using Bloggers resize options or using code to manually or automatically alter the size but photo editing software does a way better job than browsers when resizing images.
Plus, allowing your browser to resize it will slow down your loading time. If you are manually or automatically resizing your image by adding the height and width values make sure you are using the correct method and that they are to scale.
If you aren’t sure of the scale just add a width value without the height. The height value will be set automatically. This will ensure that your images aren’t being stretched or squished to fit both constraints you set.
I have a huge list of Photoshop alternatives that will do it for you. There’s loads of apps available in the Apple store for this too, including ResizeIt which is free. You can batch resize multiple images in certain programs to make the process quicker.
Turn off Auto-Enhance
Make sure Google Auto-Enhance is switched off. Even if you turned it off a few months ago, double check as it does sometimes switch back on.
Save file in correct format
Make sure you’re saving your images in the correct file format. If saving it for the web on Photoshop or a similar program, double check the compression and quality.
