Ediciones ENI Editorial | líder en informática
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, hay tres principales formatos de compresión de imagen: GIF, JPEG y PNG. Esta compresión se hace con software dedicado, después de las operaciones para retocar las fotos. Hay otros formatos de compresión, pero no se soportan totalmente por los navegadores. Por ejemplo, los formatos JPEG 2000 y WebP de Google.
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, botones y logos, que tienen grandes áreas...
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.
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 de autor y puede ser que la imagen se haya eliminado del sitio web en el que estaba ubicada.
3. El atributo alt
El atributo alt permite guardar el texto alternativo a la imagen, que se muestra si esta no se puede cargar. Su utilización también es prácticamente...
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;
} 
