The best way to achieve 100% sharpness is to display an image with it's actual size matching the exact size of the file.
Obviously, if the image is displayed larger than it is, it will be blurry and there isn't much you can do.
But, you might not know that displaying an image smaller than it actually is, will ALSO cause blurriness ! And it does not take much, just one pixel smaller and the whole image gets blurred out :/
Why is that ? Basically, as soon as the image is not the exact same size as the file, the browser has to use an algorithm to map the pixel shown on screen with a pixel from the actual file. This process causes blurriness.
The good news is, you have a bit of control over this algorithm...
Introducing : a CSS property that is not much talked about : image-rendering.
Just add that to your CSS and you'll see the difference :
image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
( WARNING : it looks great on Google Chrome but looks bad on Firefox ! Please test every browsers before using )
( Can be added on specific images or the whole <body> if you want )
( It will also affect background images ! )
