Dec 21, 2017

How to Get Your Images Sharp on Blogger using IMGMAX Parameters

DISCLAIMER: The images in this post are optimized for a Retina display. If you are viewing this post on a standard screen, the sharpness and quality differences will be less obvious.

If your blogger images are only sharp when viewed "at full size" (when you click on them and load them in a new window) you probably have some code in your image url that is causing it.

Here is an example of the SAME photo url rendered differently in the same blog post:

SHARP (look at the watermark):

BLURRY (look at the watermark again):

What is the difference?

This is the image source code for the first (sharp) image:

This is the code for the second (blurry) image:

 The image URL is the same, but the blurry image no longer contains the "imgmax" parameter at the end of the url (When I compose in live writer or mars edit this suffix is automatically added)

If the size of you original image displayed doesn't match the number (or if that number is missing) blogger can mess up the proper display size making the images look blurry.


So if you are displaying an image that is uploaded at 2200px wide you should have ?imgmax=2200 on the end of the url.

Here is another example:

This image was originally uploaded at 1200px wide.  THIS is the original.

 This is the image displaying at the "medium" blogger setting with NO tag:

This is the image with the CORRECT imgmax tag ("?imgmax=1200"):

And this is what happens if I have the incorrect max width (in this case I used "?imagemax=100"):

It can be super frustrating if you don't know why your images are blurry, but once you do, it is a pretty easy fix!

No comments:

Post a Comment