Images can be resized if you define them relative to font-size:
Code:
img {width:2em}
<img alt="" src="test.png" />
I would only do that if it was an inline image such as a special symbol within the sentence.
Instead, I would define the image based on how much screen real-estate I wanted it to take up - in percent:
Code:
img {width:95%}
<img alt="" src="test.jpg" />
If you are using an svg image then it will scale without getting over-pixelated and fuzzy. For all other image types I put some protection in the css to prevent that. I set max-width to the maximum size in pixels I want the image to expand (usually I set the actual image width here)
Code:
img {width:95%; max-width:400px}
<img alt="" src="test.png" />
I would also add in other styling to make the image look good...of course, all that is strictly to what YOU think looks good. Here is an example:
Code:
div.image {margin:2em auto; font-size:.6em; text-indent:0; text-align:center}
div.image img {display:block; margin:0 0 .25em; width:95%; max-width:400px}
<div class="image"><img alt="" src="test.png" />Caption for this image</div>