¿Cómo colocar imágenes en una página HTML? ¿Qué formatos de imagen debo utilizar?

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.

Etiquetas HTML para imágenes

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.
alt Establece un texto alternativo para mostrar en el caso que la imagen no se pueda mostrar.
width Indica el ancho de la imagen. No se debe indicar unidad. Se aconseja hacerlo desde CSS.
height Indica el alto de la imagen. No se debe indicar unidad. Se aconseja hacerlo desde CSS.

Un ejemplo básico para colocar una imagen sería el siguiente:

<img src="http://lenguajehtml.com/img/html5-logo.png" alt="Logotipo de HTML5" width="400" height="453">

Nota que los atributos width y height redimensionan la imagen al vuelo, esto es, 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.

Formatos de imágenes soportados

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».
JPG Compresión con pérdidas. Ideal para imágenes con texturas.
SVG Formato vectorial. Ideal para imágenes escalables.
GIF Formato para imágenes pequeñas y animadas.
WEBP Alternativa libre de Google al JPEG. Soporta transparencias. No, poco soporte
JPEG2000 Evolución del JPEG. No, poco soporte
JPEG-XR Alternativa libre de Microsoft al JPEG. No, poco soporte
APNG Alternativa libre a GIF. Compatible con PNG. Soporta animaciones. 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 muy pesados, propietarios o no orientados para su uso en la web.

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.

Etiquetas HTML 5.1 para imágenes

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. 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.

Imágenes con soporte alternativo

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.

Imágenes responsive (contenido diferente)

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:

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.

Imágenes para diferentes densidades

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.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).