Bienvenidos a otro artículo de nuestro blog de Desarrollo y Marketing Digital. Hoy trataremos el tema de por qué es tan importante optimizar imágenes para web, si es que estás pensando en desarrollar un sitio web o quieres mejorar el rendimiento del que ya tienes.
No hay duda de que las imágenes son un recurso inestimable para tu web. Además de cumplir una función meramente estética, sirven para otros usos muy interesantes y prácticos, como mostrar datos complejos de forma sencilla, separar párrafos de texto o mostrar los trabajos de tu portfolio.
Las fotos y los gráficos son una parte importante de la mayoría de los diseños de sitios web y ayudan a que tus visitantes tengan una buena experiencia de usuario.
Sin embargo, tener imágenes demasiado grandes puede afectar a tu sitio web. Las resoluciones más altas conllevan un mayor tamaño de archivo, lo que también implica tiempos de carga más lentos. Es decir, las imágenes suelen ser la causa de un mal rendimiento del sitio. Y recuerda que el objetivo de añadir imágenes a tu sitio web es crear una mejor experiencia para tus usuarios (o incluso aumentar las ventas y las conversiones), lo cual es difícil de conseguir con una web lenta.
Entonces, ¿cómo equilibrar el rendimiento del sitio con el diseño visual? Optimizando las imágenes.
Hay un montón de pequeñas cosas que puedes hacer a lo largo del proceso de creación de imágenes para optimizar el tamaño de los archivos, teniendo en cuenta las necesidades específicas de tu web.
En esta guía paso a paso para la optimización de imágenes, vamos a cubrir:
- ¿Qué es la optimización de imágenes?
- ¿Por qué es importante la optimización de imágenes?
- 7 formas de optimizar las imágenes para web
¿Qué es la optimización de imágenes?
En términos generales, la optimización de imágenes es el acto de disminuir el tamaño del archivo sin perder calidad. Puedes optimizar tus imágenes en la fase de creación (por ejemplo, utilizando las opciones correctas de exportación en Photoshop) o directamente en tu sitio web (por ejemplo, utilizando lazy load para mostrar medios en tu web). El objetivo es reducir la cantidad de datos que el usuario tiene que descargar, para que pueda obtener el contenido que busca más rápidamente.
¿Por qué es importante la optimización de las imágenes?
La gente tiene poca capacidad de atención cuando se trata de navegar en internet, por lo que es importante hacer que tu web cargue completamente en dos segundos o menos. Y uno de los factores más comunes que ralentizan tu sitio son las imágenes.
Si aprovechas las buenas prácticas de optimización de imágenes, mantendrás el tamaño de tus archivos pequeño y el tiempo de carga rápido, creando una mejor experiencia para los visitantes de tu sitio.
Sin embargo, hay otra razón por la que la optimización de las imágenes es importante, una directamente relacionada con los resultados de tu negocio. Además de ralentizar tu web, las imágenes ocupan espacio en el disco del servidor que las aloja. La mayoría de los proveedores de alojamiento imponen un límite de ancho de banda por plan, lo que significa que no tienes recursos ilimitados, y tus imágenes ocuparán rápidamente ese espacio.
Aunque no es el fin del mundo si excedes ese límite, es posible que te cobren una tarifa por exceso o, peor aún, que cierren tu web. Si optimizas tus imágenes, podrás aprovechar al máximo el almacenamiento de tu sitio y evitar ese límite de ancho de banda.
Ahora que sabes lo importante que es la optimización de las imágenes, vamos a hablar de cómo hacerlo. Esta guía paso a paso cubrirá todo, desde consejos para Photoshop hasta prácticas de desarrollo.
Cómo optimizar las imágenes para la web
Esta guía paso a paso cubrirá todo lo que puedes hacer para optimizar las imágenes, comenzando en Photoshop y terminando en acciones internas en tu web.
Sigue estos pasos para optimizar tus imágenes y obtener un mejor rendimiento de tu web:
- Comprueba la velocidad actual de carga de tu web.
- Elige el tipo de archivo de imagen más adecuado.
- Cambia el tamaño de las imágenes antes de exportarlas.
- Comprime las imágenes para reducir el tamaño del archivo.
- Automatiza la optimización de las imágenes con un plugin de WordPress.
- Utiliza la técnica del blur up para cargar primero una imagen en menor calidad.
- Utiliza la lazy load (“carga lenta”).
1. Compara la velocidad de tu web
Antes de hacer todo este trabajo para optimizar tus imágenes, comienza por realizar una prueba de velocidad en tu sitio. De esta manera, al final, serás capaz de ver el impacto que has hecho.Estas son algunas de nuestras webs para medir el tiempo de carga que recomendamos usar:
Estas herramientas están basadas en el navegador, así que sólo tienes que abrir el enlace e introducir la URL de tu web para obtener un informe rápido sobre la velocidad y el rendimiento. En esta guía vamos a centrarnos sólo en la puntuación general que te dé la web que has elegido para hacer la medición de velocidad, pero verás que además de esto, es habitual que te sugiera otras acciones complementarias que puedes llevar a cabo para mejorar el tiempo de carga.
2. Elige el tipo de archivo de imagen más adecuado
Cuando termines de crear imágenes (ya sea guardándolas desde tu cámara o exportándolas desde una herramienta como Photoshop), tendrás la opción de especificar el tipo de archivo. Los tipos de archivo más comunes para su uso en la web son JPEG, PNG y GIF. Todos ellos tienen sus propios pros, contras y mejores prácticas que tener en cuenta al insertarlos en tu web.
JPEGs
Las imágenes JPEG son las más adecuadas para mostrar fotografías complejas en color en tu web, ya que permiten obtener una imagen de mayor calidad con un tamaño de archivo menor. Este tipo de archivo funcionará bien para la mayoría de las imágenes que quieras utilizar en su sitio, con una excepción importante: las imágenes con fondo transparente. Para estos casos, es mejor usar el formato PNG (el cual describiremos a continuación). Cuando utilices una imagen JPEG para tu web, considera exportarla como “Progresiva”. Esto permite al navegador cargar instantáneamente una versión simple de la imagen antes de cargar completamente la resolución completa en el sitio. Si trabajas en Photoshop, encontrarás esta configuración cuando exportes como “Guardar para web”.
PNGs
Si no hay muchos colores en tu imagen (como ilustraciones planas o iconos), o quieres que sea transparente, te recomendamos exportarla como PNG. Asegúrate de tener las dimensiones correctas de la imagen y busca la opción de guardar como PNG-24 (u 8, si no hay pérdida de calidad).
GIFs
El tercer formato de imagen más común para la web son los GIFs. Sólo admiten 256 colores, así que tendrás que ser selectivo con este tipo de archivo. Para optimizar los GIFs para tu sitio web, piensa en cuál será la duración de los mismos, si es necesario que se reproduzcan en bucle y cuántos necesitas realmente en una página o sitio determinado.
3. Cambia el tamaño de tus imágenes antes de subirlas
Una de las formas más fáciles de optimizar las imágenes para la web es cambiar su tamaño antes de subirlas. Especialmente si trabajas con imágenes en bruto de una cámara digital, las dimensiones suelen ser mucho mayores de lo que realmente necesitas.
Por ejemplo, supongamos que estás añadiendo imágenes a un artículo de tu blog. Si tu tema de WordPress muestra las imágenes a 500 x 500 pero estás subiendo imágenes con una resolución de 1024 x 1024, todos esos píxeles extra sólo están aumentando el tamaño del archivo y disminuyendo la velocidad del sitio sin proporcionar un beneficio real.
Al recortar tus imágenes antes de subirlas, reducirás el tamaño del archivo, lo que ayudará a que tu sitio se cargue un poco más rápido y a ahorrar espacio en el disco para más imágenes.
Para cambiar el tamaño de la imagen, sólo tienes que abrir el programa de edición de imágenes que prefieras. Photoshop funciona bien, o también puedes utilizar herramientas más sencillas como Vista Previa (para Mac), Paint (para Windows) o Canva (una herramienta del navegador).
4. Comprime las imágenes para reducir el tamaño del archivo
Una vez que tengas tu imagen final, guardada en el formato adecuado y recortada a un tamaño apropiado, hay un paso más que puedes dar para optimizarla antes de subirla a tu sitio: comprimirla.
Este proceso te ayudará a reducir el tamaño del archivo sin perder la calidad de la imagen. Hay dos tipos principales de compresión: con y sin pérdidas.
La compresión sin pérdidas mantendrá el mismo nivel de calidad antes y después de la compresión. La compresión con pérdidas descartará algunos elementos de la foto, pero normalmente de una manera que el ojo humano no notará.
Si ves que una imagen específica en tu sitio se carga y aparece lentamente, puede ser una señal de que necesita compresión, redimensionamiento, o ambos.
Para comprimir tus imágenes, todo lo que necesitas es una herramienta de compresión. Algunas de las que recomendamos son:
- Squoosh: Es muy práctica, porque te permite ver en tiempo real el resultado final de tu imagen comprimida y ajustar el nivel de pérdida de calidad.
- TinyPNG: Una herramienta gratuita basada en el navegador para comprimir imágenes PNG y JPEG.
- ImageOptim: Una aplicación gratuita de código abierto para comprimir imágenes.
- JPEGmini: Una aplicación de recompresión de fotos para Mac y Windows.
- RIOT: Una aplicación gratuita para Windows para optimizar imágenes.
5. Automatiza la optimización de imágenes con un plugin de WordPress
Llegados a este punto, puede que estés empezando a pensar que la optimización de imágenes es mucho trabajo, ¡y puede serlo! Pero también hay una forma fácil de agilizar algunos de estos pasos, y es instalando un plugin de optimización de imágenes en tu web WordPress.
Hemos recopilado para ti algunas recomendaciones, y cada una tiene características únicas. Pero en general, un plugin de optimización de imágenes comprimirá y redimensionará tus imágenes cuando las subas a tu web WordPress. Esto significa que puedes saltarte esos pasos en lugar de hacerlos manualmente, lo que supone un gran ahorro de tiempo.
Este método también es bueno si estás construyendo webs para clientes. A veces, para el usuario final y los creadores de contenido puede resultar un engorro tratar de recordar todos los pasos del proceso de optimización de imágenes. Al instalar un plugin que haga la mayor parte del trabajo por ellos, ayudarás a garantizar la velocidad y el rendimiento del sitio que has construido una vez que lo entregues.
Para optimizar las imágenes en un sitio de WordPress, recomendamos estos plugins:
Nota: Antes de elegir un plugin, asegúrate de testear primero cómo funciona. Algunos podrían desempeñar muy bien su función de comprimir imágenes pero en cambio, sobrecargar demasiado tu servidor, así que deberías tener en cuenta estos detalles.
6. Utiliza la técnica blur up para cargar primero la imagen en menor calidad.
Incluso después de todos los pasos de optimización anteriores, hay casos en los que todavía puedes estar trabajando con archivos de gran tamaño o muchas imágenes en una página, lo que reduce la velocidad de tu web. En esos casos, a veces es útil no sólo optimizar las imágenes, sino optimizar la experiencia de carga para que los visitantes del sitio piensen que los archivos multimedia se cargan más rápido de lo que realmente lo hacen.
De eso tratan los dos pasos siguientes: dar la apariencia de que las imágenes se cargan más rápido, para que los usuarios no se queden mirando una página en blanco mientras se cargan los archivos.
Una forma de hacerlo es cargar primero una imagen de menor calidad (LQI). Al cargar una versión más pequeña de la imagen antes de cargar el tamaño completo, se ofrece al usuario algo que mirar mientras espera que se carguen todos los demás elementor. Esto da la percepción de un tiempo de carga más rápido, aunque técnicamente todo se cargue al mismo ritmo.
Una forma popular de hacer esto es la técnica blur up, que puedes aprender a implementar con este tutorial en CSS-Tricks.
7. Utiliza la lazy load (“carga lenta”).
Al igual que el blur up, hay otro truco que te ayudará a dar la apariencia de que las imágenes se cargan más rápido: La lazy load (literalmente, “carga perezosa”).
Cuando alguien visita tu web, lógicamente comienza a verla por la parte superior de la página. Es probable que le lleve un momento desplazarse por toda la página, especialmente si está interesado en el contenido. En lugar de tratar de cargar todas las imágenes a la vez, la lazy load carga primero las imágenes que están dentro de la vista del navegador, mientras que para el resto de las imágenes carga primero un marcador de posición, hasta que el usuario se desplaza a esa sección de la página.
La lady load es una gran técnica por sí sola, y aún más poderosa cuando se combina con el resto de estos consejos de optimización de imágenes. Además, es muy fácil de hacer en un sitio de WordPress, gracias al plugin BJ Lazy Load.
Esto concluye nuestra guía paso a paso para mejorar el rendimiento del sitio al optimizar imágenes para web. Para ver el impacto que estas técnicas y recomendaciones han tenido en tu web, haz otra prueba de velocidad. ¿Qué tal te ha ido esta vez? ¡Seguro que el resultado es mucho mejor!
Si el tema de contar con una web ligera, eficiente y optimizada es algo que te preocupa, no dudes en contactar con nuestra agencia. Desarrollaremos tu web tal y como la necesitas, además de acompañarte en todo el proceso. ¡Y por supuesto, perfectamente optimizada! ; )
