Etiquetas HTML de Imágenes

Etiquetas HTML
de imágenes
» Etiquetas de contenido externo
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):
Atribut
Descripción
o
src Indica el nombre o la URL de la imagen a mostrar.
Establece un texto alternativo para mostrar en el caso que la imagen no se

alt
pueda mostrar.
Indica el ancho de la imagen. No se debe indicar unidad. Se aconseja hacerlo

width
desde CSS.
Indica el alto de la imagen. No se debe indicar unidad. Se aconseja hacerlo

height
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?
Soporta transparencia. Compresión sin pérdidas.

PNG Sí
Imágenes «lisas».
Compresión con pérdidas. Ideal para imágenes con

JPG Sí
texturas.
SVG Formato vectorial. Ideal para imágenes escalables. Sí
GIF Formato para imágenes pequeñas y animadas. Sí

Formato Características ¿Recomendado?
Alternativa libre de Google al JPEG. Soporta

WEBP No, poco soporte
transparencias.
JPEG200
Evolución del JPEG. No, poco soporte
0
JPEG-XR Alternativa libre de Microsoft al JPEG. No, poco soporte
Alternativa libre a GIF. Compatible con PNG. Soporta

APNG No, poco soporte
animaciones.
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, Mostrará la imagen que cumpla una serie de criterios
type 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:
Atribut
Descripción
o
srcset Serie de imágenes (separadas por coma) que se utilizarán. Obligatorio.

Atribut
Descripción
o
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"> 
<source srcset="imagen.jxr"> 
<img src="imagen.jpg" alt="Descripción de la imagen"> 
</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:
 Dispositivos muy grandes (más de 600px): Muestra la

imagen html5-logo-xl.png
 Dispositivos grandes (entre 300-600px): Muestra la
imagen html5-logo-large.png
 Dispositivos pequeños (menos de 50px): Muestra la
imagen html5-logo-small.png
 Si no cumple las anteriores (o no soporta HTML5.1): Muestra
la imagen 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.
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 srcsete 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.

Etiquetas HTML de Imágenes

Cargado por

Copyright:

Formatos disponibles

Etiquetas HTML de Imágenes

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Etiquetas HTML de Imágenes

Cargado por

Copyright:

Formatos disponibles

Etiquetas HTML

Antes de colocar una imagen en una página web debemos tener

Etiquetas HTML para imágenes

src Indica el nombre o la URL de la imagen a mostrar.

Establece un texto alternativo para mostrar en el caso que la imagen no se

Indica el ancho de la imagen. No se debe indicar unidad. Se aconseja hacerlo

Indica el alto de la imagen. No se debe indicar unidad. Se aconseja hacerlo

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

Nota que los atributos width y height redimensionan la imagen al

Formatos de imágenes soportados

Formato Características ¿Recomendado?

Soporta transparencia. Compresión sin pérdidas.

Compresión con pérdidas. Ideal para imágenes con

SVG Formato vectorial. Ideal para imágenes escalables. Sí

GIF Formato para imágenes pequeñas y animadas. Sí

Alternativa libre de Google al JPEG. Soporta

JPEG-XR Alternativa libre de Microsoft al JPEG. No, poco soporte

Alternativa libre a GIF. Compatible con PNG. Soporta

Cualquier otro formato no mostrado en esta lista no está

Si quieres saber más sobre formatos de imágenes y como

Etiqueta Atributos Descripción

<picture> Agrupa una serie de imágenes. Etiqueta contenedora.

Como podemos ver, lo interesante está en la etiqueta <source>, que

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

type Tipo de formato de imagen. Opcional.

Imágenes con soporte alternativo

En este caso, indicamos que el navegador utilice la imagen con el

Imágenes responsive (contenido diferente)

 Dispositivos muy grandes (más de 600px): Muestra la

Imágenes para diferentes densidades

Nótese que en cada etiqueta <source>, e incluso en la etiqueta <img>,

Por último, recuerda que la etiqueta <picture> y la

También podría gustarte