Consideraciones previas:
La caja que contenga la imagen tiene que tener una anchura declarada. Obligatorio. Esta anchura va a ser la base de conversión del tamaño.
Supuesto:
Sea una caja para contener imágenes que se llame
"#contiene-imagenes"
Sea su anchura declarada en el css de
500px (width: 500px;) (este valor será el patrón de conversión)
Sea una imagen de cualquier tamaño (su anchura)
'imagen1.jpg'
Resolución:
Declara en el css una anchura
del 100% (width: 100%;), por ejemplo, para '#contiene-imagenes img'
si en el html haces:
Cita: <div id="contiene-imagenes">
<img src="imagen1.jpg" alt="xxx" title="zzz" />
</div>
tendrás la imagen presentada con 500px de ancho y su alto será proporcional (no se distorsiona la proporción ancho/alto de la imagen).
Consideraciones finales:
Si la imagen mide más de 500px se reduce, pero si la imagen mide menos aumentará.
Todo lo anterior no sirve para imágenes utilizadas como fondo vía css2.
A tener presente que el peso de la imagen (kb) no se ve alterado. Es el que tenga la original.
Un saludo