Enralados

Los atributos Width y Height en las imágenes

En HTML existen unos atributos para los objetos y gráficos embebidos (incrustados) que le indican al navegador Web las dimensiones exactas de ancho (width) y alto (height) que estos poseen.

Poner el ancho y alto de una imagen no es complicado, se le indica al navegador mediante los atributos width y height respectivamente.

Un ejemplo podría ser el siguiente:
<img src="mi-imagen.jpg" width="220" height="180" alt="Mi imagen" />

El atributo Alt permite mostrar un texto alternativo en caso de que la imagen no pueda ser vista, bien sea porque se usa un navegador sólo texto, porque el visitante elige no mostrar imágenes mientras navega o porque hay un error en la carga de la misma. Es conveniente rellenar el atributo Alt con una frase lo más descriptiva posible de acuerdo con la imagen que se está mostrando.

Cuando a una imagen no se le suministran los datos de ancho y alto el navegador tiene que averiguar las medidas antes de seguir con la carga del resto de la página, lo cual ralentiza el proceso y es más apreciado cuanto más imágenes sin atributos haya. Por el contrario, cuando se le indican las dimensiones el navegador deja el espacio reservado para la imagen y aunque no la encontrase seguiría con la carga normal de la página sin romper el diseño. Por eso, usar los atributos Width y Height de las imágenes es muy importante porque asegura que la página web se cargue rápida y correctamente.

Un mal uso que se le suele dar es para redimensionar las imágenes. Comprendo que es tentador emplear el navegador Web para modificar el tamaño a mostrar de las imágenes. Si tienes una imagen de 1024 x 768 pixeles podrás pensar que nadie te impide utilizar los atributos HTML width y height para adaptarla al espacio que dispones en tu sitio web.

Pondrías por ejemplo algo parecido a esto:
<img src="mi-fotografia.jpg" width="120" height="120" alt="Mi foto" />

Lo puedes hacer perfectamente pero tienes que tener en cuenta lo siguiente:
- El "peso" de la imagen es demasiado grande para que se cargue rápidamente. Las medidas siguen siendo de 1024 x 768 pixeles y el tamaño del archivo no ha cambiado aunque la imagen que se muestre sea de 120 x 120 pixeles. Hay una relación directa entre el tamaño en pixeles de una imagen y lo que ocupa en kilobytes. Cuanto mayor sean estas medidas mayor "peso" tendrá en kilobytes.
- Un navegador Web no es un editor gráfico, cuando redimensiones la imagen podrían obtenerse resultados poco deseables y al modificar las proporciones uno de los lados se verá deformado. Según el ejemplo anterior, usar 102 x 76 pixeles guardaría las proporciones aunque el navegador seguirá teniendo dificultades al cargar un archivo tan grande.

Por norma general un gráfico de las medidas anteriores no debe superar los 20 kilobytes para una carga óptima y en este caso no se cumple.

Tampoco se deben usar los atributos Width y Height para agrandar las imágenes y obtener mayor tamaño que el original, el resultado es bastante decepcionante.

Esto puede parecer obvio entre los diseñadores más veteranos pero es un error que todavía comenten los principiantes.

La conclusión es que siempre hay que poner los atributos ancho y alto de una imagen, y ésta debe mostrarse a su tamaño real. No requiere mucho tiempo redimensionar la imagen con tu editor gráfico favorito y los lectores te lo agradecerán.