Why do smaller images look less sharp on the web?

When you resize a photo smaller, your photo editor (we used Industry standard Photoshop) will need to remove pixels from the image. (smaller images, contain less pixels).

During this “removal” of pixels,  Photoshop is trying to figure out how to best remove pixels, and reassemble the edges in the image.  As part of this process, Photoshop will blur certain edges to accommodate for the removal of pixels.

What we can do about this

There are options we can apply such as “unsharp” mask to sharpen the edges in the photo, however dependant on the image, this can have varying results.   

Vector Images / Icons

Vector style artwork (such as icons), tend to become more fuzzy the smaller they get.  For really “sharp” small icons, the only proper way to make these, is to employ a specialised icon artist (who generates the icon “pixel by pixel”), or to manually redo the edges.  Another option is to also use SVG files ... however older browsers sometimes struggle to render these.