Multimedia

Las imágenes son elementos <img> simples, escalados al ancho del contenido. Envuelve una en <figure> con un <figcaption> para añadirle un pie.

Imágenes internas

Referencia imágenes de tu proyecto; cada archivo que no es una página se copia a la salida en la misma ruta:

<img src="/screenshots/docs.webp" alt="An htmlpress docs page">

![An htmlpress docs page](/screenshots/docs.webp)

Un src, srcset o poster relativo se resuelve desde el archivo fuente de la página, así que sigue funcionando en la URL de carpeta de la página, bajo un prefijo de idioma o en otra <meta name="path">.

Se renderiza como:

Imágenes externas

Referencia imágenes desde URL externas:

<img src="https://picsum.photos/seed/htmlpress/800/300" alt="Placeholder">

![Placeholder](https://picsum.photos/seed/htmlpress/800/300)

Se renderiza como:

Imágenes en Base64

Incrusta imágenes pequeñas directamente con URI de datos:

<img src="data:image/png;base64,iVBORw0KGgo…" alt="banner">

![banner](data:image/png;base64,iVBORw0KGgo…)

Se renderiza como:

Imágenes según el tema

data-theme="light" o data-theme="dark" en un <img> lo muestra solo en ese tema, siguiendo tanto el selector de tema de la cabecera como la configuración del sistema; las terminaciones #light y #dark de Livemark en el src también funcionan. Pon la pareja una junto a otra:

<img src="/screenshots/docs.webp" alt="The docs" data-theme="light">
<img src="/screenshots/docs-dark.webp" alt="The docs" data-theme="dark">

![The docs](/screenshots/docs.webp#light)
![The docs](/screenshots/docs-dark.webp#dark)

Se renderiza como (cambia el tema para alternar):

La copia en Markdown de la página conserva solo la imagen clara.

Zoom de imágenes

Toda imagen de una página se abre a pantalla completa al hacer clic, salvo si la envuelve un enlace; un clic en cualquier sitio la cierra. Funciona igual con imágenes internas, externas y en base64.

<img src="screenshot.png" alt="The docs site">

![The docs site](screenshot.png)

Se renderiza como (haz clic):

Bloques de vídeo

<htmlpress-video type="youtube" url> reproduce el vídeo de su url (una URL watch, youtu.be, embed, shorts o live); sin el script sigue siendo un enlace:

<htmlpress-video type="youtube" url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></htmlpress-video>

::video{type="youtube" url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"}

Se renderiza como:

Bloques de audio

<htmlpress-audio type="soundcloud" url> reproduce la pista de su url; sin el script sigue siendo un enlace:

<htmlpress-audio type="soundcloud" url="https://soundcloud.com/flume/never-be-like-you-feat-kai"></htmlpress-audio>

::audio{type="soundcloud" url="https://soundcloud.com/flume/never-be-like-you-feat-kai"}

Se renderiza como: