La optimización de imágenes para diseño web suele ser el primer paso en el para mejorar el rendimiento y velocidad de página de una web. Se trata de una solución relativamente sencilla que puede reportar grandes beneficios.
Optimizar una sola imagen no es complicado ni requiere mucho tiempo, y puede suponer un aumento de la velocidad del sitio, una mejora de la experiencia del usuario y una mejora notable del Core Web Vitals. No es de extrañar entonces que existan numerosos artículos diseñados para intentar ayudar a los usuarios a optimizar las imágenes de sus páginas web de forma más eficaz.
Hay muchas herramientas que ayudan a optimizar las imágenes para diseño web (a continuación se describen algunas de las mejores).
Sin embargo, como la optimización de imágenes suele enseñarse a los principiantes, las explicaciones sobre cómo hacerlo suelen saltarse muchos detalles cruciales necesarios para obtener los mejores resultados.
Necesitarás saber más para asegurarte de que tus imágenes están lo más optimizadas posible. Esta guía proporcionará a los diseñadores web todos los niveles consejos sobre optimización de imágenes basados en años de trabajo en nuestra empresa de diseño web en Murcia.
De este modo, podrás entender qué es una imagen optimizada adecuadamente, por qué es importante y cómo puedes exprimir al máximo el rendimiento de las imágenes de tu sitio web, su velocidad y su posicionamiento SEO.
Tabla de Contenidos
¿Qué es la optimización de imágenes para diseño web?
La optimización de imágenes consiste en configurar las imágenes de su sitio web para ofrecer a sus visitantes la mejor experiencia posible. Una imagen bien optimizada debe:
- Ser una ayuda visual de alta calidad que tenga un propósito funcional dentro de su contenido.
- Tener un tipo y tamaño de archivo adecuados que equilibren el rendimiento con la calidad de la imagen.
- Encajar perfectamente en una página sin cambios de tamaño o de diseño, independientemente de la pantalla en la que se visualice.
- Estar cargada, de modo que no retrase la representación de otros recursos críticos de la página.
Estos cuatro criterios para una imagen bien optimizada están ordenados de más a menos complicado. Si sólo puede cumplir los dos primeros, no hay problema. Incluso eliminar o cambiar las imágenes que no aportan valor es suficiente para acelerar tus mejores páginas.
¿Por qué es importante optimizar las imágenes para diseño web?
Las imágenes son cruciales para establecer una marca y presentar ideas, personas y productos. Sin embargo, las imágenes siguen siendo uno de los factores que más contribuyen al mal rendimiento y la mala experiencia del usuario.
En mayo de 2022, el peso medio de una página de escritorio era de 2,3 MB. De esos 2,3 MB, alrededor de 1 MB (o el 43%) de la carga de la página eran imágenes.
Dado que las imágenes representan una gran parte del proceso de carga de la página, cualquier optimización que se realice para reducirlas o presentarlas de forma más eficiente equivale a un aumento significativo de la velocidad.
Es esencial que sus páginas sean rápidas porque el tiempo de carga influye directamente en las tasas de conversión. Según un estudio reciente, las tasas de conversión aumentan un 17% por cada segundo que se reduce el tiempo de carga de la página.
A pesar de ser una fuente de disminución de la velocidad de las páginas, las imágenes siguen siendo recursos necesarios en la mayoría de las páginas. A veces no es práctico ni eficaz describir algo sólo con palabras. Las imágenes ofrecen a sus lectores una ayuda visual que les ayuda a comprender los temas o procesos complejos de los que está hablando.
Por esta razón, es necesario asegurarse de que cada imagen que cree esté optimizada para que su página equilibre la necesidad de imágenes potentes y la velocidad del sitio.
¿Qué herramientas ayudan a optimizar las imágenes?
Existen muchas herramientas que pretenden ayudarte a optimizar fácilmente tus imágenes para diseño web. Saber qué hacen estas herramientas y qué hay que tener en cuenta a la hora de evaluar cuáles elegir es de gran ayuda.
Compresores de imagen
Los compresores de imágenes toman los archivos de imagen y reducen su tamaño manteniendo la calidad de la imagen.
Hay dos tipos de compresores de imagen: sin pérdida y con pérdida. Los compresores sin pérdida reducen el tamaño de la imagen sin afectar en absoluto a su calidad. Eliminan los metadatos del archivo de imagen y no afectan a los datos reales de la imagen. Por el contrario, la compresión con pérdida permite reducir aún más los archivos de imagen a expensas de la calidad de la imagen.
La compresión de imágenes es algo que todo sitio web debería hacer, ya que es una forma sencilla de reducir el tamaño de los archivos de imagen. Para elegir el más adecuado para ti, tendrás que decidir si quieres un compresor que te obligue a hacer las imágenes de una en una o que se integre automáticamente en tus sistemas.
Un compresor básico de arrastrar y soltar será la elección correcta si tienes un sitio web pequeño. Algunos compresores de imágenes básicos son:
- ImageOptim: Compresor de arrastrar y soltar nativo de macOS
- Trimage: Compresor de arrastrar y soltar nativo de Linux
- FileOptimizer: Compresor nativo de Windows
- Squoosh: compresor de arrastrar y soltar basado en navegador
Compresión automática de imágenes
Nosotros usamos las páginas que diseñamos con WordPress el plugin ShortPixel Image Optimizer. Hay una versión gratuita con limitaciones y otra de pago, por suscripción o mediante la compra de bonos.
El plugin enviará automáticamente en segundo plano las imágenes cargadas a la nube de optimización, donde serán optimizadas y convertidas, luego las descarga y reemplazará en nuestra biblioteca de medios. Las imágenes optimizadas, idénticas a simple vista con el original pero solo en una fracción del tamaño de byte original, se mostrarán en lugar de las originales.
Tiene soporte para formatos de nueva generación como .webp y .avif que consiguen una notable reducción de tamaño y se ajustan a los requerimientos de Google Pagespeed.
Redes de distribución de contenidos (CDN)
Las CDN (Content Delivery Networks) son redes de servidores distribuidos geográficamente que le facilitan la entrega de tus imágenes porque garantizan que un servidor está cerca de la ubicación del visitante. Cuanto más cerca estén sus recursos de las personas que los solicitan, más rápida será la descarga.
Además de acelerar la entrega de imágenes, las CDN también ayudan:
- Eliminando parte de la carga de ancho de banda de tus servidores.
- Aumentar la capacidad de tu sitio para recibir un gran número de visitantes.
- Reducir el tamaño de los archivos de imagen mediante la compresión y minificación de imágenes antes de la entrega.
- Almacenamiento en caché del contenido para una entrega más rápida.
- Para una mejor optimización de las imágenes, también hay CDN específicas de imágenes, que puede funcionar conjuntamente con un servicio de CDN más general.
La CDN de imágenes mejoran la velocidad de entrega:
- Redimensiona las imágenes automáticamente.
- Convierten las imágenes al mejor formato posible sobre la marcha.
- Recortan automáticamente las imágenes más grandes, centrándose en el punto central de la imagen.
Y lo mejor de todo es que es totalmente automático. Todo lo que tienes que hacer es elegir la CDN adecuada para su negocio (que no es poco).
A la hora de elegir una CDN de imágenes, debes tener en cuenta:
- El precio: Hay CDN de imágenes gratuitas, pero pueden ofrecer poco control, fiabilidad o soporte.
- Características: Algunas CDN de imágenes permiten más personalización o tipos de archivos de imagen compatibles. Asegúrate de elegir una que haga todo lo que necesita.
- Integraciones: Muchas CDN de imágenes pueden integrarse con su CMS para una experiencia de optimización de imágenes sin problemas.
- Velocidad: Asegúrate de que la CDN de imágenes entrega sus imágenes rápidamente para una mejor experiencia de usuario en tu sitio.
- Servicio: Comprueba las reseñas en línea para ver cómo trata a los clientes su servicio de atención técnica.
Dado que muchos de estos factores dependen de su situación, es casi imposible decir de antemano cuál funcionará mejor. Aquí te presento algunas, pero considera cada CDN a través de los factores anteriores para encontrar una que se adapte a tus necesidades .
- Cloudimage: es una de las más transparentes y asequibles. Comienza con plan gratuito y actualiza si es necesario. Cada mes incluye 25 GB de caché de imágenes y tráfico de CDN, junto con alteraciones de imagen ilimitadas.
- Cloudinary: es sencilla de configurar, ofrece un servicio gratuito que es más que adecuado para blogs y páginas web pequeños
- ImageKit: simplicidad de configuración y potencia . Es una excelente opción tanto si necesitas una CDN sencilla como funciones de optimización de imágenes más sofisticadas.
- Amazon Cloudfront CDN: Una de las redes de entrega de contenido más rápidas de Interne. Los clientes pueden recibir datos, videos, aplicaciones y API desde la CDN de manera segura y rápida. También cumple el propósito de un caché, lo que reduce el tiempo de latencia que experimentan los visitantes de su sitio web . Con respecto al costo, pagarás de acuerdo a tu ubicación y uso. Tiene precios bajo demanda. Sin embargo, en comparación con todos los demás CDN, es un poco caro.
Cómo optimizar al máximo tus imágenes para diseño web
Cuando se trata de optimizar imágenes, las herramientas sólo sirven en parte. Estos pasos te ayudarán a optimizar al máximo tus imágenes.
1. Asegúrate de que las imágenes son todas funcionales
En primer lugar, debe asegurarse de que todas las imágenes cumplen una función en la página. Esto no significa que todas las imágenes deban ser gráficos o tablas. Sin embargo, deben ayudar a tus lectores complementando lo que hay en el texto.
Por ejemplo, una imagen de las vistas desde tu hotel puede ayudar a los posibles visitantes a comprender lo que obtendrán si reservan una habitación. Sin embargo, si en la misma página solo hay una foto de París, es simplemente un adorno que no ayuda a los visitantes.
Elimina o sustituye todas las imágenes que no cumplan una función en la página. Eliminar estas imágenes aumenta automáticamente la velocidad de la página y, si no cumplen ninguna función, los lectores no las echarán de menos.
Una vez que hayas decidido qué imágenes se quedarán, añade un texto alternativo descriptivo para cada una de ellas. El texto alternativo ayuda a las personas con problemas visuales a entender qué contiene una imagen. De esta forma, todos tus visitantes se benefician de tus ayudas visuales.
2. Elegir el formato adecuado
Elegir el formato de imagen adecuado influye en gran medida en el tamaño final que tendrá la imagen. Los formatos de imagen influyen significativamente en el tamaño del archivo, la calidad, la escalabilidad y las opciones de compresión.
Hay muchos entresijos técnicos en la compresión de imágenes y el control de calidad, pero puedes navegar eficazmente por el proceso de selección sin sumergirte demasiado. Aquí tienes los formatos más populares con sus casos de uso:
| Formato | Adecuado para | Transparencia | Animación |
|---|---|---|---|
| .jpeg | Fotos y capturas de pantalla | No | No |
| .png | Imágenes con menos colores (256 colores para PNG-8) o transparencia parcial (PNG-24) | Si | No |
| .WebM o MPEG-4 | Animación y movimiento | Si | Si |
| .svg | Formas geométricas simples o ilustración vectorial | Si | Si |
| .webp | Tanto para imágenes estáticas como animadas | Si | Si |
| .avif | Formato de imagen de próxima generación que puede reemplazar a WebP, JPEG, GIF y PNG | Si | Si |
Aunque los GIF se han popularizado para la animación, una forma más eficaz de explorar el movimiento es animar SVG o grabar un vídeo en WebM o MPEG-4. Los GIF son muy pesados (el último ejemplo es de 30 MB para una sola imagen), mientras que un vídeo puede acelerarse por hardware, con lo que la reproducción es más fluida y los colores y la compresión son mejores.
Dos nuevos formatos de imagen, WebP y JPEG XR, pueden introducir importantes ahorros de ancho de banda (25-34% en el caso de WebP). Sin embargo, estos formatos de imagen de última generación aún no son compatibles con todos los navegadores, por lo que es mejor utilizarlos con fallbacks (o con la ayuda de CDN de imágenes).
3. Sustituir iconos por SVG
El uso de iconos está muy extendido, sobre todo en el diseño de productos. Existen numerosos frameworks y bibliotecas de iconos de código abierto disponibles de forma gratuita, lo que populariza aún más el uso de iconos.
Hay muchas formas de utilizar iconos: dos de las más populares son las fuentes de iconos (en las que utilizamos un archivo de fuentes que contiene iconos como glifos) y los SVG (gráficos vectoriales escalables). Las fuentes de iconos están muy extendidas, sobre todo por su facilidad de implementación y uso. Sin embargo, plantean problemas de velocidad y accesibilidad.
Las fuentes de iconos se cuentan como fuentes, por lo que los visitantes no ven nada o ven un glifo que falta cuando la fuente de iconos no se carga. También causan problemas importantes para las tecnologías de asistencia (imagina a los lectores de pantalla pronunciando un completo sinsentido para intentar representar el icono sin los descriptores y etiquetas HTML apropiados).
Desde el punto de vista de la velocidad, la diferencia entre las fuentes de iconos y los archivos SVG puede ser a menudo menor y depender enormemente del contexto (número de iconos y cómo se implementan en el código). Sin embargo, si se sopesan la accesibilidad y la escalabilidad y la propensión a fallos, los SVG tienen una ventaja significativa.
A la hora de crear iconografía, ten en cuenta el contexto: cuántos iconos habrá y si su estilo y tamaño son adaptables. Si se implementa correctamente, la iconografía SVG es rápida, fiable y, lo que es más importante, semántica y accesible.
4. Comprime los archivos
Dependiendo del contexto y de la familiaridad con las herramientas de desarrollo, hay muchas formas de optimizar las imágenes. Aunque la programación no sea lo tuyo, puedes asegurarte de que tus imágenes estén comprimidas.
Si trabajas en proyectos pequeños, pasa cada imagen por una herramienta de optimización de arrastrar y soltar (como algunas de las que se han descrito anteriormente). Como el proceso de optimización es manual, esto funciona mejor para proyectos pequeños que no se actualizan con frecuencia.
Para trabajos más grandes con múltiples proyectos o aplicaciones que dependen en gran medida de las imágenes (Airbnb, por ejemplo), es necesario implementar secuencias de comandos de automatización potencialmente complejas o considerar CDN de imágenes. Estas soluciones tienen implicaciones en el ámbito del desarrollo y, a menudo, un precio elevado, pero merece la pena discutirlas con tu equipo si las imágenes contribuyen significativamente a un rendimiento deficiente.
5. Diseña tu web pensado es la adaptabilidad de las imágenes o usa una CDN
En la era del diseño web responsivo, las imágenes deben adaptarse a distintos dispositivos y tamaños de pantalla. El envío de imágenes demasiado grandes es un problema generalizado (sobre todo cuando se trata principalmente de pantallas Retina de Apple frente a dispositivos de menor resolución). Cuando se sirven imágenes más grandes de lo necesario, aumenta el tiempo de análisis del navegador y los gráficos a escala se ven borrosos.
Hay varias decisiones que puede tomar para abordar este problema. La primera es determinar cómo se comportarán las imágenes cuando cambie la ventana gráfica:
- ¿La relación de aspecto es constante o variable?
- ¿Se van a recortar las imágenes?
Otra consideración es la densidad de píxeles en las pantallas de los dispositivos. Con una densidad que varía del 100% al 300%, es relativamente fácil equivocarse. Las mismas imágenes pueden parecer mucho más pequeñas en pantallas de alta densidad y más grandes en pantallas de baja densidad. Para controlar los medios y garantizar su máxima calidad, hay que proporcionar las dimensiones y la densidad de píxeles adecuadas.
Una solución común para manejar imágenes adaptativas que podrías explorar con tu equipo son las CDN de imágenes. Las CDN de imágenes facilitan la creación de imágenes adaptables y aumentan considerablemente la velocidad.
6. Añadir marcadores de posición o skeleton screens
La velocidad del sitio es esencial, pero también lo es la velocidad percibida. Incluso dar a los lectores una pista de que el contenido se está cargando puede mejorar la experiencia del usuario.
Una forma de mejorar esta percepción de la velocidad es aprovechar las skeleton screens. Acuñadas por Luke Wroblewski, las skeleton screens indican que el contenido se está cargando y que acabará apareciendo. Se implementan presentando un esquema aproximado del diseño y los elementos de una página, a menudo con una animación sutil y relativamente rápida.
Por ejemplo YouTube utiliza skeleton screens para simular la lista de vídeos mientras se cargan.
Trabaja con tu equipo de desarrollo para identificar qué partes de la aplicación son inusualmente lentas, ya sea porque contienen muchas imágenes o muchos datos. A continuación, diseña simplificaciones de interfaz adecuadas que oculten, retrasen o rendericen parcialmente las interfaces para crear una impresión de velocidad. Esta estrategia va más allá de las imágenes y puede aplicarse a pantallas enteras, especialmente propensas a la carga lenta, pero debe utilizarse con precaución.
La optimización de imágenes: resumen
La optimización de imágenes es un aspecto crucial para el diseño web, ya que puede mejorar la velocidad de carga de la página y, por ende, la experiencia del usuario. Aquí te presento algunos consejos finales para optimizar las imágenes para diseño web:
- Tamaño de archivo: Es importante mantener el tamaño de archivo de la imagen lo más pequeño posible, sin sacrificar la calidad de la imagen. Utiliza herramientas de compresión de imágenes para reducir el tamaño del archivo.
- Resolución: Asegúrate de que la resolución de la imagen sea la adecuada para su uso en la página web. Una resolución demasiado alta puede ralentizar la carga de la página y aumentar el tamaño del archivo.
- Formato de archivo: Elige el formato de archivo adecuado para la imagen. Los formatos más comunes para imágenes web son JPEG, PNG y GIF. JPEG es el formato más utilizado para fotografias, PNG para imágenes con transparencia y GIF para imágenes animadas. Como hemos visto los nuevos formatos como .avif, .webp están sustituyendo a estos antiguos formatos.
- Nombre del archivo: Utiliza nombres de archivo descriptivos y significativos para ayudar en la optimización de la imagen para motores de búsqueda.
- Dimensiones de la imagen: Es importante tener en cuenta el tamaño de la imagen en la página web. Asegúrate de ajustar las dimensiones de la imagen al tamaño que se va a utilizar en la página web.
Siguiendo estos consejos, podrás optimizar las imágenes para diseño web y mejorar la velocidad de carga de la página, lo que mejorará la experiencia del usuario en tu sitio web.
