Las imágenes

Explotar correctamente las imágenes

En muchos de sitios web, los recursos multimedia ocupan cada vez más espacio. Estos recursos multimedia, estas imágenes se deben elegir con cuidado y deben estar optimizados lo mejor posible para una carga rápida en todos los dispositivos actuales: pantalla de ordenador, tableta y smartphone. Por lo tanto, hay un trabajo importante por parte de los diseñadores gráficos para elegir la imagen correcta, definir sus dimensiones en función de los dispositivos soportados y determinar un ratio de compresión/peso adecuados.

En las páginas web, las imágenes representan contenido «incorporado», porque no están directamente descritas en el contenido del archivo HTML. Los archivos de las imágenes normalmente se sitúan en un directorio específico, en el directorio del sitio web y se insertan en la página web indicando su ruta de acceso.

Entender los formatos de compresión

1. Comprimir las imágenes

Cuando toma una foto, casi nunca es posible difundirla directamente en Internet sin reducir sus dimensiones y sin comprimir. Las imágenes en bruto son siempre demasiado grandes y pesadas para ser publicadas en Internet. Hay que reducir su tamaño y comprimirlas para reducir su peso.

Actualmente, existen tres formatos principales de compresión de imagen: GIF, JPEG y PNG. La compresión suele aplicarse mediante software específico, una vez finalizadas las operaciones de retoque fotográfico. También existen otros formatos, como el SVG (gráfico vectorial escalable) y WebP, que ofrecen distintas ventajas según el contexto de uso.

2. El formato GIF

El formato GIF, de Graphics Interchange Format, es un formato de compresión de imágenes diseñado en 1987 por Compuserve y no es totalmente libre. Su extensión es .gif. Con este formato, las imágenes utilizan 256 colores como máximo y solo ofrecen un nivel de transparencia. Por lo tanto, los píxeles son opacos o transparentes, lo que implica efectos de escalera muy desagradables en los bordes. Si la imagen inicial tiene menos de 256 colores, este formato es no destructivo, pero si hay más de 256, la compresión es destructiva.

Por lo tanto, el formato GIF se reserva para las imágenes de pequeñas dimensiones, como los iconos...

Insertar imágenes con el elemento <img>

1. La utilización de las imágenes

El elemento <img> se usa para insertar imágenes de ilustración directamente relacionadas con el contenido textual. Desde un punto de vista semántico, este elemento no se usa para aplicar una imagen de fondo en un encabezado o cualquier otra zona de visualización en la página. Para esto, es necesario utilizar una regla CSS.

Observe que la visualización de las imágenes se hace en línea, inline. Es la única propiedad inicial que afecta a este elemento <img> : display: inline-block;. La diferencia entre inline e inline-block es que con esta última visualización podemos utilizar los atributos width y height.

2. El atributo src

El primer atributo prácticamente obligatorio es src. Este atributo permite indicar la ruta de acceso a la imagen que se debe mostrar. La ruta de acceso se indica normalmente de forma relativa a la página que contiene el elemento <img>.

A continuación se muestran algunos ejemplos:

<img src="mi-imagen.png">: la imagen se encuentra en el mismo directorio que la página HTML.
<img src="imágenes/mi-imagen.png">: la imagen se encuentra en un subdirectorio llamado imágenes, ubicado en el directorio que contiene la página HTML.
<img src="../mi-imagen.png">: la imagen está en el directorio padre del directorio que contiene la página HTML.

Pero también puede elegir mostrar una imagen ya publicada en la Web, con una ruta absoluta: <img src="http://www.mi-sitio.org/imágenes/mi-imagen.png">. Es una solución que es necesario utilizar con prudencia, porque hay que estar seguro de los permisos...

Insertar ilustraciones con el elemento <figure>

1. La utilización de las ilustraciones

Las imágenes permiten ilustrar directamente un contenido y los dos están íntimamente relacionados. Puede ser que con las ilustraciones baste y no sea necesario un texto para entender lo que se quiere comunicar. Además, la posición de la ilustración puede ser independiente del texto. Atención: el contenido de una ilustración puede ser una o varias imágenes fotográficas, pero también puede ser un dibujo, un vídeo, una tabla o un extracto largo de código. A continuación se indican las diferencias semánticas entre la utilización de una imagen y de una ilustración.

2. El elemento <figure>

El elemento <figure> permite insertar una ilustración en su página web. Este elemento tiene una etiqueta de apertura y otra de cierre.

<figure>  
   ...  
</figure>

El elemento <figure> es de tipo block, a continuación se muestran sus parámetros de visualización por defecto:

figure {  
     display: block;  
     margin-top: 1em;  
     margin-bottom: 1em;  
     margin-left: 40px;  
     margin-right: 40px;  
}