Antes de colocar una imagen en una página web debemos tener claro en que clasificación se encuentra. Las imágenes utilizadas en una página web pueden ser de dos tipos: de contenido o de decoración. En el primer caso, si la imagen pertenece al contenido y tema tratado en esa página, debería incluirse mediante una etiqueta HTML <img>
, pero si por el contrario pertenece a la decoración de la página, deberíamos incluirla como un fondo mediante la propiedad CSS background-image
.
Para incluir imágenes en el contenido de una página utilizaremos la etiqueta <img>
, que es una etiqueta muy sencilla, que dispone de varios atributos para modificar como se verá la imagen (los atributos src y alt son siempre obligatorios):
Atributo | Descripción |
---|---|
src |
Indica el nombre o la URL de la imagen a mostrar. Atributo obligatorio. |
alt |
Establece un texto alternativo que describa la imagen a mostrar. Atributo obligatorio. |
width |
Indica el ancho de la imagen en píxels (sin la unidad). Se puede hacer desde CSS. |
height |
Indica el alto de la imagen en píxels (sin la unidad). Se puede hacer desde CSS. |
Un ejemplo básico para colocar una imagen sería el siguiente:
<img src="https://lenguajehtml.com/img/logo.png"
alt="Logotipo de HTML5" width="400" height="453" />
Nota que con los atributos width y height se fuerza a reservar el espacio indicado en la página (incluso antes de descargar y mostrar la imagen). Ten en cuenta que la imagen tendrá unas dimensiones concretas y se descargará siempre a máxima resolución. Con estos atributos redimensionas la imagen al tamaño de ancho y alto indicado, pero la imagen realmente tiene su propio tamaño.
Puedes omitir estos atributos siempre que quieras, ya que no son obligatorios, pero se consideran una buena práctica para evitar los molestos cambios repentinos de posición o tamaño en una página.
En el ámbito informático existen múltiples formatos de imágenes (¡muchísimos!) pero no todos son aptos para utilizar en web. Vamos a dar un repaso a los formatos más utilizados y cuales son más apropiados:
Formato | Características | ¿Recomendado? |
---|---|---|
PNG | Soporta transparencia. Compresión sin pérdidas. Imágenes «lisas». | Sí |
JPG | Compresión con pérdidas. Ideal para imágenes con texturas. | Sí |
SVG | Formato vectorial. Ideal para imágenes escalables. | Sí |
GIF | Formato para imágenes pequeñas y animadas. | Intentar evitar. |
WEBP | Alternativa libre de Google al JPEG. Soporta transparencias. | Sí, con precaución |
JPEG2000 | Evolución del JPEG. | No, solo Safari |
JPEG-XR | Alternativa libre de Microsoft al JPEG. | No, solo IE |
APNG | Alternativa libre a GIF. Compatible con PNG. Soporta animaciones. | Sí, con precaución |
AVIF | Formato de imagen basado en AV1. No confundir con videos AVI. | Aún no, poco soporte |
JPEG-XL | Alternativa competidora a AVIF. | Aún no, poco soporte |
Cualquier otro formato no mostrado en esta lista no está recomendado para utilizar en web. Formatos como BMP
, TIFF
, RAW
, NEF
, PSD
, CDR
son formatos no orientados para su uso en la web, además de ser propietarios y muy pesados.
Muchos de los formatos no recomendados de la tabla superior pueden utilizarse hoy si se utiliza un enfoque progresivo con fallbacks, utilizando la etiqueta HTML
<picture>
.
Si quieres saber más sobre formatos de imágenes y como conseguir reducir su tamaño sin disminuir su calidad, te sugiero leer Formatos de imagen: Guía de optimización.
HTML 5.1 incorporará un nuevo sistema para utilizar imágenes en nuestros documentos HTML de forma mucho más flexible que la antigua etiqueta <img>
que nos permitirá mostrar imágenes dependiendo de nuestras necesidades. Para ello, utilizaremos las dos siguientes etiquetas:
Etiqueta | Atributos | Descripción |
---|---|---|
<picture> |
Agrupa una serie de imágenes. Etiqueta contenedora. | |
<source> |
srcset , sizes , media , type |
Mostrará la imagen que cumpla una serie de criterios opcionales. |
Como podemos ver, lo interesante está en la etiqueta <source>
, que tiene una serie de atributos disponibles para utilizar. Vamos a ver para que sirve cada uno:
Atributo | Descripción |
---|---|
srcset |
Serie de imágenes (separadas por coma) que se utilizarán. Atributo obligatorio. |
sizes |
Tamaño específico de la imagen que finalmente se mostrará. |
media |
Condición que se debe cumplir para que muestre la imagen. Ver media queries. |
type |
Tipo de formato de imagen. Opcional. |
Una de las primeras ventajas que nos ofrecen estas etiquetas es la de utilizar formatos diferentes, dependiendo del soporte del navegador. Así pues, podríamos hacer algo como esto:
<picture>
<source srcset="imagen.webp" />
<!-- Formato WebP -->
<source srcset="imagen.jxr" />
<!-- Formato JPEG XR -->
<img src="imagen.jpg" alt="Descripción de la imagen" />
<!-- Fallback -->
</picture>
En este caso, indicamos que el navegador utilice la imagen con el formato WebP. En caso de no soportarlo, lo intentará con el formato JPEG XR. Si tampoco lo soporta, mostrará la imagen en formato JPEG, que es la que está soportada por todos los navegadores, y si utilizamos algún navegador de texto como Lynx u otro que no pueda mostrar imágenes, mostrará el texto alternativo.
Otra ventaja interesante es que con <picture>
podemos crear imágenes responsive que cambien dependiendo de características de las media queries (CSS). Por ejemplo, utilicemos min-width
(tamaño mínimo de ancho de la pantalla) en el siguiente ejemplo:
<picture>
<source media="(min-width: 600px)"
srcset="html5-logo-xl.png" />
<source media="(min-width: 300px) and (max-width: 600px)"
srcset="html5-logo-large.png" />
<source media="(max-width: 50px)"
srcset="html5-logo-small.png" />
<img src="html5-logo-medium.png" alt="HTML5 logo" />
</picture>
De esta forma, estamos indicando que se muestren diferentes imágenes dependiendo de la resolución de pantalla (ancho) del dispositivo:
html5-logo-xl.png
html5-logo-large.png
html5-logo-small.png
html5-logo-medium.png
Nótese que esto sólo hará cambio de imagen efectivo justo en los límites indicados (50, 300, 600). Si se desea que la imagen se adapte proporcionalmente, lo mejor es recurrir a tamaños máximos y mínimos de CSS.
Además, este sistema también permite especificar diferentes imágenes dependiendo de la densidad de pantalla del dispositivo (alto que varía actualmente en las diferentes gamas de smartphones). Para ello, tenemos que usar un descriptor después del nombre de la imagen utilizado en el atributo srcset (si no se incluye, por omisión es igual a 1x):
<picture>
<source media="(min-width: 600px)"
srcset="html5-logo-xl.png, html5-logo-xl-hd.png 2x, html5-logo-xl-fhd.png 3x" />
<source media="(min-width: 300px) and (max-width: 600px)"
srcset="html5-logo-large.png, html5-logo-large-hd.png 2x, html5-logo-large-fhd.png 3x" />
<source media="(max-width: 50px)"
srcset="html5-logo-small.png, html5-logo-small-hd.png 2x, html5-logo-small-fhd.png 3x" />
<img srcset="html5-logo-medium.png, html5-logo-medium-hd.png 2x, html5-logo-medium-fhd.png 3x"
alt="HTML5 logo" />
</picture>
Nótese que en cada etiqueta <source>
, e incluso en la etiqueta <img>
, se puede especificar el atributo srcset e indicar varias imágenes preparadas para pantallas de alta densidad.
Por último, recuerda que la etiqueta <picture>
y la etiqueta <source>
dentro de la anterior son características de HTML5.1 y aún no están soportadas en todos los navegadores. Se recomienda ser cuidadoso con este detalle.