Etiqueta img

La etiqueta img crea una imagen. La ruta a la imagen se especifica en el atributo src. No requiere etiqueta de cierre.

Atributos

Atributo	Descripción
src	Especifica la ruta a la imagen. Atributo obligatorio.
alt	Texto alternativo que se mostrará en lugar de la imagen, si no se encuentra (por ejemplo, si la ruta es incorrecta). Atributo obligatorio. En su ausencia, el validador (programa que verifica la corrección de HTML o CSS) mostrará un error.
width	Ancho de la imagen, en píxeles (en este caso no se indican unidades de medida) o en porcentaje respecto al elemento padre de la imagen.
height	Altura de la imagen, en píxeles (en este caso no se indican unidades de medida) o en porcentaje respecto al elemento padre de la imagen.

Matices

Si no se especifica ni el ancho ni la altura de la imagen, esta tendrá su tamaño real. Si se especifica la altura, la imagen tomará la altura indicada, y el ancho se ajustará para que sus proporciones no se distorsionen.

Si solo se especifica el ancho, de manera similar, la imagen se ajustará en altura para mantener las proporciones.

Si se especifican tanto el ancho como la altura, las proporciones de la imagen pueden distorsionarse (o no, dependiendo de los valores). Si el ancho o la altura (o ambos) son mayores que los reales, la imagen se ampliará, pero perderá calidad.

Se recomienda especificar el ancho y la altura de las imágenes en los atributos (y no mediante CSS) - de esta manera, el navegador cargará las imágenes más rápido, ya que no necesita calcular el tamaño de cada imagen después de obtenerla.

No se recomienda reducir los tamaños reales de la imagen sin necesidad. Por ejemplo, el tamaño real de la imagen es 1000 por 1000 píxeles, y usted le asigna un ancho de 100px. En este caso, la imagen en pantalla se verá de 100 píxeles, pero tendrá un tamaño de mil píxeles y, en consecuencia, se cargará mucho más lentamente.

Ejemplo

Vamos a agregar una imagen al sitio y no especificaremos los atributos height y width. La imagen tendrá su tamaño real:

:

Ejemplo

Intentemos agregar un ancho a la imagen usando el atributo width; la altura debe ajustarse para mantener las proporciones de la imagen:

:

Ejemplo

Y ahora agreguemos una altura a la imagen usando el atributo height; el ancho se ajustará para mantener las proporciones de la imagen:

:

Ejemplo

Agreguemos simultáneamente tanto altura como ancho a la imagen. Las proporciones de la imagen deben distorsionarse (no necesariamente, pero en este caso la altura y el ancho están elegidos para que las proporciones se distorsionen):

:

Ejemplo

Pongamos una ruta incorrecta a la imagen (por simplicidad, la dejaremos vacía). En lugar de la imagen veremos el contenido del atributo alt (parece texto normal, pero si intentas copiarlo, no podrás hacerlo, se arrastrará como una imagen):

:

Véase también