responsive site: img style

Q: For websites with responsive designs/templates, how do you keep small images from being distorted (in other words, enlarged and pixelated = ugly) on smartphone screens?

A: The simple solution is to set the width within the IMG style tag.

For example: Your image is 150px-wide. To lock it at 150px (the upper limit should be the image's actual width so it will still look nice), use:

<img alt="#" src="#" style="width: 150px;">

Up Next: How to center (awkward... verb) an image when the <div> or <p> elements don't work. These alignment tips from w3.org clearly explains it all. It says CSS but we can use the style code within the body's html source which sort of trumps the CSS (if you're using a template) so we can still make style changes per page. OK, here's the fix:

<img src="#" alt="#" style="display:block; margin-left:auto; margin-right:auto; width:#px;">

On a responsive web design, if the image is small (ex. for buttons, badges, etc.), specify width so it doesn't get distorted on smaller screens.

For reference, W3C on the IMG Element (HTML5). Also,

The img element is a void element. An img element must have a start tag but must not have an end tag.