Las Imágenes para Web

Las imágenes que van a utilizarse en páginas web u otros productos digitales deben optimizarse con precisión para conseguir una calidad óptima con el menor peso de archivo posible, consiguiendo así una carga más rápida de las mismas. Para este proceso de optimización de las imágenes, hay que considerar trescaracterísticas básicas de las mismas: tamaño, modo de color y tipo de formato.

1. El tamaño de las imágenes para web o pantalla

El tamaño de una imagen digital tiene una influencia directa respecto al peso del archivo y deberá ajustarse convenientemente para su correcta optimización.
A diferencia de las imágenes que se van a imprimir, donde el tamaño físico y la resolución son los factores a considerar, en imágenes para pantalla el dato a tener en cuenta será el número de píxeles.

Podemos afirmar una imagen digital tiene un tamaño relativo, ya que dependerá del tamaño del píxel de la pantalla donde se vaya a visualizar.

El tamaño del píxel de una pantalla depende de su resolución (relación entre tamaño físico/configuración) y por tanto, una misma imagen se verá más grande o más pequeña según sea el tamaño y la resolución de pantalla del dispositivo donde se vea. A mayor resolución de pantalla, el píxel será más pequeño y una misma imagen se visualizará más pequeña y viceversa.

La resolución de una pantalla puede oscilar entre los 72ppp de los antiguos monitores de 14" con una configuración de 800x600, los más de 90ppp de un monitor de 21" con una configuración de 1920x1080, los más de 300ppp que tendría un Smartphone de 5,5" con 1920x1080 o hasta resoluciones superiores en el caso de pantallas 2K o 4K.

1.1 ¿A qué tamaño se debe preparar una imagen?

Es una pregunta de difícil respuesta y para tomar una decisión habrá que considerar el tamaño al que queremos que se vea y el dispositivo donde se va a visualizar, sabiendo que este dato será variable y que nunca vamos a tener certeza de ello.

Imaginemos que tenemos que regalar una camiseta a una persona que no conocemos y de la que no sabemos su talla. ¿S – M – L – XL?

¿Por qué talla nos decantaríamos?

Basándonos en datos estadísticos actuales, la configuración de pantalla más extendida para equipos de sobremesa es la de 1366x768 con más del 35% de los usuarios (2% en 2009). Le sigue la configuración de 1920x1080 con un 18% (0,67% en 2009) y la siguiente es la de 1280x1024 con un 6% (un 35% en 2009).

Con esta información, podemos afirmar que la resolución de monitor más extendida actualmente está entre los 90 y 100 ppp, aunque hay que ser conscientes de que este dato irá variando.

En cualquier caso, habrá que preparar las imágenes a un tamaño lo más ajustado posible, sin quedarte corto para que no se vea mal, pero sin excederte para que no pese demasiado.

Por eso, si queremos preparar imágenes para pantalla considerando la mayoría de los usuarios, podemos usar como referencia una resolución de entre 90 y 100 ppp y el tamaño físico al que queramos que se vea la imagen, aunque ya sabemos que el tamaño real vendrá determinado por su número de píxeles.

2. El modo de color de las imágenes para web o pantalla

Los modos de color que deben usarse para imágenes en pantalla son RGB, Indexado o escala de grises según sea el tipo de imagen.

Cualquier aplicación que trabaje con imágenes necesita interpretar los perfiles de la misma para mostrarla en la pantalla. Algunos navegadores no tienen en cuenta el espacio de color que se le haya asignado a una imagen y usan por defecto el perfil sRGB, por lo que se considera un espacio ideal para web.

3. El formato de las imágenes para web o pantalla

Para imágenes en mapa de bits o basadas en píxeles, los formatos más recomendados para web son JPG, GIF y PNG. Según el tipo de imagen y sus necesidades será más adecuado usar un formato u otro. Veamos las características básicas de cada uno de ellos.

3.1 El formato JPG

En general, es el formato ideal para imágenes fotográficas o con degradados de color. Una de sus principales ventajas es que comprime las imágenes más y mejor que otros formatos. Aunque comprime “con pérdida" de calidad, consigue comprimir eliminado información que el ojo humano no es capaz de distinguir. Además, al generarlo nos permite elegir el nivel de compresión o calidad de la imagen.

De los modos de color posibles para web, en el formato JPG pueden guardarse imágenes en RGB (millones de colores) y escala de grises.

Con respecto al GIF, ofrece mejor calidad en fotografías y degradados y un peso de archivo menor, pero no permite zonas transparentes. Respecto al PNG, consigue reducir, en muchos casos, el peso del archivo y muchas veces de forma inapreciable al ojo humano.

3.2 El formato GIF

Es un formato adecuado para dibujos e imágenes simples, de colores planos, con pocos matices. Tiene la ventaja de que permite el uso de fondos transparentes y animaciones.
El formato GIF almacena las imágenes en modo de color indexado, pudiendo almacenar un máximo de 256 colores, aunque puede reducirse la paleta de colores si la imagen no lo necesita, mejorando y optimizando el peso del archivo.

Respecto al JPG, con imágenes simples de colores planos consigue una mejor calidad con un menor peso de fichero ya que el formato JPG no reproduce bien los bordes definidos y las áreas extensas sin cambio de color. Respecto al PNG puede comprimir el peso del archivo, aunque a veces va asociado a una perdida de calidad evidente, pero permite animaciones.

3.3 El formato PNG

Se trata de un formato muy versátil que combina características de JPG y GIF. Es adecuado para fotografías e imágenes con degradados de color y para imágenes simples con colores planos. Comprime “sin pérdida" optimizando correctamente el peso de archivo. Ofrece bastante buena calidad en todos los casos y admite transparencia, aunque no animaciones.

En formato PNG pueden guardarse imágenes en modo de color indexado (desde 256 colores), en escala de grises y en RGB (millones de colores).
Con respecto al JPG y al GIF, normalmente genera archivos algo más pesados, aunque cuando lo que prima es la calidad es una opción muy a tener en cuenta.

3.4 El formato SVG

Para imágenes vectoriales, el formato SVG es la opción más recomendable. Es posible generarlo directamente desde Adobe Ilustrator y habrá que ajustar su tamaño al tamaño al que deseamos que se visualice, aunque por sus características, un aumento del tamaño no tendría repercusión en su calidad.

Consideraciones de Formato con Imágenes de Ejemplo

Ejemplo 1. Imagen fotográfica

Imagen JPG calidad media - 102 Kb

Imagen GIF máxima calidad - 141 Kb

Imagen PNG - 495 Kb

En este ejemplo se puede ver que en formato JPG con una compresión media, el peso del archivo es bastante menor que en formato PNG sin diferencias de calidad muy evidentes. Respecto al formato GIF, el peso es solo un poco menor, pero la calidad del GIF es notablemente más baja. ¿Cuál consideras que sería la mejor opción en este caso?

Ejemplo 2. Dibujo gráfico silueteado

Formato JPG - 54 Kb

Formato GIF - 46 Kb

Formato PNG - 206 Kb

En este otro ejemplo de imagen en color silueteada con fondo transparente, puede apreciarse que el formato JPG ofrece la peor calidad, además de mostrar el fondo blanco, no transparente. Tanto el formato GIF y como el formato PNG ofrecen el silueteado con fondo transparente, pero la diferencia de calidad entre ambos es notable si te fijas en los bordes o en los degradados sobretodo. También la diferencia de peso de archivo es importante. ¿Cuál consideras que sería la mejor opción en este caso?

Ejemplo 3. Imágenes simples de colores planos

Formato JPG: 28 Kb - 28 Kb

Formato GIF: 4 Kb - 4 Kb

Formato PNG: 24 Kb - 6 Kb

En estos casos, puede apreciarse que las imágenes en formato JPG ofrecen la peor calidad, además de mostrar el fondo blanco, no transparente. Tanto el formato GIF como el formato PNG ofrecen el silueteado con fondo transparente y una calidad similar, pero con una importante diferencia en el peso del archivo. ¿Cuál consideras que sería la mejor opción en este caso?

4. Nuevos formatos de imagen para web

Desde hace tiempo han surgido nuevos formatos de imagen que permiten unos niveles más altos de compresión sin afectar apenas a la calidad. Por el momento, no son formatos aceptados por todos los navegadores, aunque poco a poco irán ganando compatibilidad. Es posible comprobar su compatibilidad en la página can I use.

JPEG 2000

Es un estándar de compresión y codificación digital de imágenes creado en el 2000 con la intención de sustituir el formato original. Puede trabajar con niveles de compresión mayores que los de JPEG. La extensión de este tipo de archivos es “.jp".

JPEG XR

Es un formato gráfico creado y adoptado por Microsoft y ofrece mayor calidad en menor tamaño que el formato JPEG. La reducción puede alcanzar hasta el 50%.

WebP

Es un formato gráfico desarrollado por Google que soporta tanto compresión con pérdida como sin ella. WebP admite animación y transparencia. Actualmente, de los nuevos formatos es el que mayor compatibilidad tiene.

Teniendo en cuenta que el formato WebP es de Google y sus diferentes ventajas respecto a los otros formatos, es posible que en poco tiempo se imponga como el formato más usado en la web.

Optimización de imágenes

Con Adobe Photoshop es posible ajustar y optimizar correctamente imágenes desde la opción “Guardar para Web", aunque existen otras muchas aplicaciones que permiten conseguir tasas de compresión mayores sin afectar demasiado en la calidad. Algunas de estas aplicaciones pueden ser compressor.io o kraken.io/web-interface, aunque hay otras.

5. El HTML de las imágenes

5.1 La etiqueta <img>

La etiqueta <img> identifica una imagen en código HTML. Se trata de una etiqueta “sin contenido" y por tanto no tiene etiqueta de cierre. <img src="imágenes/paisaje.jpg" >

Ya hemos comentado anteriormente que las imágenes no se insertan en la página web, sino que se insertan rutas a los archivos de imagen. Se trata por tanto de archivos independientes y externos a la propia página web.

Atributos de la etiqueta IMG

Existen muchos atributos que se pueden colocar dentro de la etiqueta <img> para determinar distintas propiedades. A continuación vemos algunos de ellos:

“src": Es el atributo esencial de la etiqueta <img...> ya que le indica al navegador la ruta donde tiene que localizar el archivo de imagen.
width="..." y height="...": Establece el ancho y el alto de la imagen.
border="...": Coloca un marco alrededor de la imagen.
align="..." : Alinea la imagen respecto al texto contiguo. No alinea la imagen en el contenedor.
alt="...": Es una atributo de accesibilidad. Indica el texto alternativo que aparece en lugar de la imagen si el navegador no puede mostrar la imagen.
title="…": Con este atributo, aparece un pequeño letrerito (tooltip) con el texto que queramos al detener el cursor sobre la imagen.

5.2 El favicon

Un favicon es una pequeña imagen que se muestra junto al título de la página en la pestaña del navegador, en la lista o barra de marcadores/favoritos y en el historial de navegación. Su tamaño es bastante reducido y puede oscilar entre los 16x16 y los 128x128 píxeles. También puede mostrarse una sencilla animación como favicon.

Al tratarse de un elemento corporativo, sirve para transmitir la imagen de marca cuando alguien navega por la página web, además de facilitar la identificación de una página cuando existen varias pestañas abiertas.

Desde hace tiempo los navegadores, admiten el favicon en diferentes formatos de imagen (GIF, PNG, SVG, JPG, ICO), aunque por ejemplo el formato SVG sólo lo admite actualmente (octubre de 2019) Firefox.

Para colocar el favicon en una página se aconseja incluir dentro del <head> de la misma la etiqueta <link> incluyendo el valor “icon" para el atributo “rel" e indicar los distintos tipos de imagen mediante el atributo “type", como en los ejemplos siguientes:


      <link  rel="icon" type="image/png" href="imagen.png">
      <link  rel="icon" type="image/gif" href="imagen.gif">
      <link rel="icon"  type="image/svg" href="imagen.svg">

Si guardas el favicon como un icono con el nombre “favicon.ico" en la carpeta raíz de tu sitio web, no es necesario hacer nada más. El favicon se mostrará automáticamente sin ser necesario utilizar la etiqueta <link>.

Existen varias aplicaciones online para crear un favicon de forma muy sencilla e intuitiva. Aquí os dejo unos links de algunas de estas aplicaciones.

6. Insertar imágenes desde Dreamweaver

Antes de colocar una imagen en una página web debemos asegurarnos que el archivo se encuentra dentro de la carpeta raíz del proyecto. Existen diferentes formas de insertar una imagen en Dreamweaver sin tener que escribir manualmente nada de código.

Desde el menú Insertar>Imagen o desde el Panel Insertar situando el cursor donde deseemos colocar la imagen. También desde el Panel Archivos arrastrando la imagen hasta donde queramos insertarla. Al insertar una imagen, se mostrará un cuadro con unos atributos de accesibilidad, que permite la descripción de la imagen para determinadas situaciones.

6.1 Las propiedades de las imágenes en Dreamweaver

Desde el panel “Propiedades" de Dreamweaver podemos editar las características de una imagen de forma mucho más visual que usando código HTML.

Origen: Este cuadro determina la ruta hacia el archivo de imagen. Es el equivalente al atributo “src" de HTML. Desde este casillero podemos cambiar el origen de la imagen insertada para cambiarla por otra.
ALT: Es el equivalente al atributo “alt" de HTML. Se trata de un atributo de accesibilidad que sirve para aportar una información alternativa sobre el contenido de la imagen en el caso que ésta no se pueda ver.
Dimensiones: Muestra las dimensiones en píxeles de la imagen. Desde aquí podemos modificar su tamaño cambiando el ancho (An) y el alto (Al) y también puede hacerse arrastrando los puntos de control de la imagen. Recuerda que lo recomendable es que la imagen esté ya optimizada.
…

Alineación de una imagen respecto al bloque de texto donde se coloca

Cuando se coloca una imagen dentro de un bloque de texto intervienen las opciones de “alineación de la imagen respecto del texto" mediante el atributo "align". Este atributo no sirve para alinear horizontalmente la imagen dentro de su contenedor y si para alinearlo respecto al bloque donde se integra. El valor predeterminado es “alineación con línea base", aunque puede variar en función del navegador.

Desde la versión de Adobe Dreamweaver CS6 esta opción desaparece del panel de Propiedades ya que se recomienda que todo lo relacionado con el posicionamiento y colocación de las imágenes se realice mediante CSS, pero puede aplicarse directamente este atributo desde el código.

Con este atributo lo que se modifica es la colocación de la imagen en relación con el bloque de texto donde se encuentre, pudiendo quedar integrada a un lado u otro del bloque (left - right) u otros valores. Si colocamos una imagen al inicio de un párrafo y aplicamos en el código HTML, dentro de la etiqueta <img> el atributo "align="right" o "left", vemos como cambia la posición de la imagen dentro del bloque de texto, aunque la etiqueta no haya cambiado de lugar.

Tambien es posible definir un espacio entre la imagen y el texto que la rodea, aunque igualmente esto se recomienda hacerlo con CSS. En versiones antiguas de Dreamweaver aparece en el panel de propiedades, pero en versiones posteriores ha desaparecido y podemos aplicarlo incluyendo los atributos “vspace" y “hspace" dentro de la etiqueta <img>.

7. Introducción a la creación de GIFs Animados

A continuación se explica de forma básica cómo crear GIFs animados sencillos usando Adobe Photoshop. La mayoría de los GIFs animados están basados en una simple secuencia de imágenes o “fotogramas".

Lo primero que hay que hacer antes de crear la animación en Photoshop es un sencillo “storyboard" teniendo claro el contenido y la secuencia de la animación.

A partir de esto, habrá que preparar en un documento de Photoshop, todas las imágenes y el contenido que vayan a ser parte de la animación en capas diferentes y desde el Panel “Animación" o “Línea de tiempo", según versión, seguimos estos pasos:

Añadir un cuadro por cada “fotograma" que vaya a contener el GIF.
En cada uno de los cuadros o “fotogramas", debemos dejar visible la capa o capas con contenido del “fotograma", estableciendo el orden deseado en la animación.
Establecer el tiempo para cada “fotograma".
Indicar el número de veces que queremos que se repita la secuencia completa.
Probar el resultado y reajustar el orden o los tiempos si es necesario.
Para producir una suave transición entre un “fotograma" y el siguiente se puede “Intercalar" cuadros de animación entre fotogramas (por defecto 5).
Modificar el tiempo de los cuadros generados según tus preferencias y comprobar el resultado. Puedes seleccionar varios cuadros a la vez y modificar el tiempo de todos.
Guardar en formato PSD para mantener las capas y toda la información de la animación antes de guardar el archivo como GIF animado. Para una correcta optimización posterior, es importante que ajustes el tamaño del documento.
Para guardar el GIF correctamente debes ir a la opción de “Guardar para web". Ajustar las distintas opciones del panel para optimizar correctamente el archivo, comprobando el resultado. Debes probar modificando las distintas opciones posibles y chequeando los cambios en el peso del fichero y la calidad del mismo para una buena optimización.
Es posible la creación de GIFs animados más elaborados y complejos haciendo uso de las opciones de “Intercalar" cuadros entre fotogramas, determinando sobre que parámetros queremos intervenir (posición, opacidad o efectos). Tener presente que para producir movimiento o cambios de posición de un elemento en la animación, éste debe estar en la misma capa, variando su posición en diferentes “cuadros" de la animación.