Imágenes animadas, transparencias y fondos de pantalla

Los sitios web utilizan una gran variedad de tipos de imágenes: de ambos formatos, de trama y vector. Esto proporciona a los desarrolladores numerosas opciones, pero plantea la cuestión de qué formato es mejor para cada caso de uso.

A continuación, se repasan casos de uso de imágenes comunes y se ofrecen algunas recomendaciones y consideraciones para cada uno.

Animaciones

Un gráfico animado es cualquier imagen que tenga más de un fotograma e ilustra algún movimiento de una u otra forma.

Muchos formatos son compatibles con la animación (GIF, PNG y WebP), pero debido a la compatibilidad total con los navegadores, la mayoría de sitios utilizan GIF (nota: este formato está limitado a 256 colores con transparencia de 1 bit).

Transparencias

Las imágenes transparentes son útiles si no conoce con certeza sobre qué color de fondo se mostrará la imagen. Mediante la transparencia binaria, un color de la paleta de colores indexada se marca como el color transparente. La transparencia alfa es más avanzada: la información de la transparencia se almacena en un canal independiente, el canal alfa.

Los requisitos de transparencia simple se pueden abordar mediante GIF y su transparencia binaria. Los formatos PNG, WebP, JPEG 2000 y JPEG XR ofrecen capacidades mejoradas mediante el uso de canales alfa.

Degradados de fondo

De la misma forma que puede seleccionar un color sólido como el fondo de un elemento en CSS, también puede seleccionar un degradado como color de fondo. Los degradados son generalmente un color que se disipa hasta convertirse en otro, pero en CSS se puede controlar de qué manera se produce, desde la dirección hasta los colores (tantos como desee), así como en qué punto tiene lugar el cambio de color.

Utilizar un gradiente seleccionado en CSS, en lugar de utilizar un archivo de imagen real, mejora el control y el rendimiento.

Logotipos

Los logotipos son gráficos puros (símbolos/iconos) o se componen del nombre de la organización (un logotipo o marca denominativa).

Los formatos de vector (p. ej. SVG) proporcionan la mejor calidad para los logotipos (aristas lisas, cambio de tamaño sin pérdida de calidad, tamaño de archivo pequeño), pero puede utilizar un formato de imagen de trama (normalmente, PNG) con alta resolución.

Imágenes prediseñadas

Las recopilaciones de fotografías o imágenes prediseñadas se pueden importar en un documento o en otro programa. Las imágenes pueden ser gráficos de trama o de vector.

El formato GIF es adecuado para imágenes de color sólido (como en dibujos animados o imágenes prediseñadas). Las imágenes GIF también se pueden colocar en una página web con un fondo transparente, por lo que puede superponerlas.

Imágenes de archivos intermedios

Las imágenes de archivos intermedios suelen tener una resolución mínima de 300 ppp (puntos por pulgada) y suelen asociarse a las fotografías.

El formato JPEG de alta resolución es bastante popular para archivos intermedios basados en web (originales), ya que equilibra la calidad y el tamaño mediante la compresión con pérdida. Utilice el formato PNG si desea obtener una calidad superior con compresión sin pérdidas. Para habilitar el uso de imágenes correctamente en varios medios (por ejemplo, web e impresión), TIFF (Tagged Image File Format) es la mejor apuesta para los archivos originales. Recuerde que deberá convertir los archivos de TIFF a otros formatos compatibles con la web.

Capacidad de respuesta

Una imagen con capacidad de respuesta es una imagen que se adapta como respuesta a entornos de diferentes condiciones: las adaptaciones pueden suponer, entre otras, la modificación de las dimensiones, un recorte o, incluso, el origen de una imagen. El uso de las imágenes con capacidad de respuesta puede contribuir a mejorar el rendimiento web mediante el envío de archivos de menor tamaño para los usuarios con conexiones más lentas.

El formato JPEG es adecuado para el diseño de compatibilidad entre navegadores. Al visualizar imágenes en navegadores compatibles, los formatos WebP (Chrome y Opera), JPEG 2000 (Safari) y JPEG XR (Internet Explorer y Edge) son una elección excelente.

Sprites

Los sprites se utilizan en un diseño web como una manera de mejorar el rendimiento mediante la combinación de numerosas imágenes pequeñas o iconos para crear una imagen de mayor tamaño denominada hoja de sprite o conjunto de fichas.

Además, se utilizan para los iconos, en cuyo caso los formatos GIF/PNG pueden ser los mejores, pero a veces también encontramos archivos JPEG.

Las hojas de estilo en cascada (CSS) se utilizan a menudo para ayudar a mostrar las imágenes, sin embargo los sprites se encuentran normalmente en formato PNG o JPEG.

Iconos

Los iconos se pueden utilizar como botones o indicadores visuales en un sitio web. De manera similar a los sprites (ver sección anterior), en ocasiones se agrupan los conjuntos de iconos. Hay muchas opciones para este tipo de imágenes según el uso, sin embargo, el formato SVG proporciona el mejor rendimiento y las fuentes de iconos también se podrían utilizar si se gestionan adecuadamente cuando se carga la página. Además, también pueden utilizarse formatos habituales como GIF o PNG. Si carga un conjunto de iconos (ya sea como una fuente o un sprite) asegúrese de medir el coste de la carga de los iconos que no utilice.

Esquinas redondeadas o piezas de diseño

El uso de imágenes para ayudar a corregir los estilos, la altura o el ancho en pantalla o utilizar efectos como las esquinas redondeadas sigue siendo, lamentablemente, algo habitual en muchos sitios web. En resumen, no utilice las imágenes con este fin, en su lugar utilice CSS.

Las esquinas redondeadas son prácticamente compatibles con todos los navegadores y permite algunos ajustes más avanzados, como se muestra a continuación.

Resumen

Elegir el formato adecuado según el caso de uso es fundamental para maximizar el impacto de sus imágenes. Recuerde que cada formato tiene sus ventajas y desventajas: la decisión final tendrá que tener en cuenta todas estas consideraciones.

Obtenga más información acerca de la gestión de varios casos de uso de imágenes online con Akamai Image Manager.