Cómo optimizar imágenes para la web

Cómo optimizar imágenes para la web

Una guía paso a paso para un mejor rendimiento del sitio

No hay duda de que las imágenes son un activo invaluable.

optimizar imagenes web

Desde la visualización de datos hasta la separación de párrafos de texto  las fotos y los gráficos son elementos importantes en la mayoría de los diseños de sitios web para ayudar a nuestros usuarios a tener excelentes experiencias en línea.

Sin embargo, tener excelentes imágenes puede afectar nuestro sitio web.

Con resoluciones más altas también  vienen archivos de mayor tamaño, lo que también significa tiempos de carga más lentos.

Las imágenes son a menudo la causa de un bajo rendimiento del sitio.

Y recuerda, el objetivo de agregar imágenes a tu sitio web es crear una mejor experiencia para tus usuarios (¡o tal vez incluso aumentar las ventas y las conversiones !), Lo cual es difícil de hacer con un sitio lento.

Entonces, ¿cómo equilibras el rendimiento del sitio con el diseño visual?

Optimizar tus imágenes.

Hay muchas pequeñas cosas que puedes hacer durante el proceso de creación de imágenes para optimizar el tamaño de los archivos, específicamente teniendo en cuenta tu sitio web.

En esta guía paso a paso para la optimización de imágenes, cubriré:

  • ¿Qué es la optimización de imagen?
  • ¿Por qué es importante la optimización de imagen?
  • 7 formas de optimizar imágenes para la web

¿Qué es la optimización de imagen?

En términos generales, la optimización de la imagen es el acto de disminuir el tamaño del archivo sin perder calidad.

Puedes optimizar tus imágenes en la fase de creación (como usar las opciones correctas de «Exportar» en Photoshop) o directamente en tu sitio web (como usar la carga diferida para mostrar los medios en tu sitio).

El objetivo es reducir la cantidad de datos que un usuario tiene que descargar, para que puedan obtener el contenido que buscan más rápido.

¿Por qué es importante la optimización de imagen?

Las personas tienen breves períodos de atención cuando se trata de visualizar una web, por lo que es importante hacer que tu sitio web se cargue en dos segundos o menos .

Y uno de los factores más comunes que ralentizan tu sitio son tus imágenes. (Incluso si tu sitio web se ejecuta en los mejores servidores, como obtendrá con un hosting administrado de WordPress , las imágenes pueden ser una pérdida del rendimiento).

Al aprovechar las mejores prácticas de optimización de imágenes, mantendrás el tamaño de tu archivo pequeño y su tiempo de carga rápido, creando una mejor experiencia para los visitantes de tu sitio.

Hay otra razón por la que la optimización de la imagen es importante, sin embargo, está directamente relacionada con el resultado final de tu negocio.

Más allá de ralentizar tu sitio web, las imágenes ocupan espacio en el disco de tu servidor que alimenta tu sitio.

La mayoría de los proveedores de hosting imponen un límite de ancho de banda por plan, lo que significa que no tiene recursos ilimitados, y tus imágenes ocuparán rápidamente ese espacio.

Si bien no es el fin del mundo si excedes ese límite, es posible que te cobren una tarifa por excedente o, lo que es peor, que cierre tu sitio web.

Al optimizar 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 imágenes, ¡hablemos sobre cómo hacerlo!

Cómo optimizar imágenes para la web

Te diré todo lo que puedes hacer para optimizar las imágenes, comenzando en Photoshop y terminando en tu sitio con plugins. Clic para tuitear

Sigue estos pasos para optimizar tus imágenes para un mejor rendimiento del sitio:

  1. Compara la velocidad actual de tu sitio.
  2. Aprende cómo elegir el mejor tipo de archivo de imagen.
  3. Cambia el tamaño de tus imágenes antes de exportar.
  4. Comprime las imágenes para reducir el tamaño del archivo.
  5. Automatiza la optimización de imágenes con un complemento de WordPress.
  6. Utiliza la técnica de «desenfoque» para cargar primero una imagen de menor calidad.
  7. Usa la carga perezosa .

1. Compara la velocidad de tu sitio actual

Antes de hacer todo este trabajo para optimizar tus imágenes, comienza ejecutando una prueba de velocidad en tu sitio. Al final, podrás ver el impacto que has tenido.

Estoy familiarizado con hacer pruebas de velocidad, utilizo varias herramientas pero estas cuatro son mis favoritas:

Cada una funciona un poco diferente, pero el concepto para cada uno es el mismo: abres el enlace, luego ingresa tu URL para obtener un informe personalizado sobre la velocidad y el rendimiento de tu sitio.

Estas herramientas te recomendarán varios pasos que puedes seguir para mejorar la velocidad y el rendimiento del sitio , pero para los fines de este tutorial, solo concéntrate en la puntuación por ahora.

Esto te brinda un excelente punto de referencia para que sepas dónde estás comenzando.

2. Aprende cómo elegir el mejor tipo de archivo de imagen

Cuando hayas terminado de crear imágenes (ya sea guardando desde tu cámara o exportando desde una herramienta como Photoshop), tendrás la opción de especificar en que tipo de archivo que quieres guardarla.

Los tipos de archivos más comunes para usar en la web son JPEG, PNG y GIF. Y como estoy seguro de que lo puedes adivinar, todos tienen sus propios pros, contras y mejores prácticas cuando  los colocas en tu sitio web.

JPEG

Las imágenes JPEG funcionan mejor para mostrar fotografías en color complejas en tu sitio, ya que permiten una imagen de mayor calidad con un tamaño de archivo más pequeño.

Este tipo de archivo probablemente funcionará para la mayoría de las imágenes que deseas usar en tu sitio, con una excepción importante: imágenes con un fondo transparente.

Cuando uses una imagen JPEG para tu sitio web, considera exportarla como “Progresiva”. Esto permite que el navegador cargue instantáneamente una versión simple de la imagen antes de cargar completamente la resolución completa en el sitio.

PNG

Si no tienes un exceso de color en tu imagen (como ilustraciones planas o iconos), o quieres que sea transparente, te recomiendo exportar como PNG. Asegúrate de tener las dimensiones correctas de la imagen y busca la opción para guardar como PNG-24 (u 8, si no hay pérdida de calidad).

GIF

El tercer formato de imagen más común para la web son los GIF. Solo admiten 256 colores, por lo que tendrás que ser selectivo con este tipo de archivo.

Para optimizar los GIF de tu sitio web, piensa críticamente acerca de cuánto duran, si necesitan un bucle y cuántos realmente necesitas 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 imágenes para la web es cambiar su tamaño antes de subirlas a tu sitio.

Especialmente si estás trabajando con imágenes en bruto de una cámara réflex digital, las dimensiones son a menudo mucho más grandes de lo que realmente necesitas.

Por ejemplo, supongamos que estás agregando imágenes a un artículo del blog en tu sitio.

Si tu tema de WordPress muestra imágenes a 500 x 500 pero está cargando imágenes con una resolución de 1024 x 1024, todos esos píxeles adicionales solo aumentan el tamaño del archivo y disminuyen la velocidad del sitio sin proporcionar un beneficio real.

Al recortar tus imágenes antes de cargarlas, disminuirás el tamaño del archivo, lo que ayudará a que tu sitio se cargue un poco más rápido y ahorres espacio en el disco para cargar más imágenes.

Para cambiar el tamaño de tu imagen, simplemente abre el software de edición de imágenes que prefieras. Photoshop funciona bien, o también puedes usar herramientas más simples como Vista previa (para Mac), Paint (para Windows) o Canva (una herramienta gratis en la nube).

4. Comprime las imágenes para reducir el tamaño del archivo

Una vez que tengas tu imagen con el tamaño final, guardada en el formato correcto y recortada a un tamaño apropiado, hay un paso más que puedes hacer para optimizarla antes de cargarla en tu sitio: comprimirla.

Este proceso te ayudará a reducir el tamaño del archivo sin perder una calidad de imagen notable. Hay dos tipos principales de compresión: con pérdida y sin pérdida.

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érdida descartará algunos elementos de la imagen, pero generalmente de una manera que el ojo humano no se dará cuenta.

Si ves una imagen específica en la carga de tu sitio y aparece lentamente, puede ser una señal de que necesita compresión, cambio de tamaño o ambos.

Para comprimir tus imágenes, todo lo que necesitas es una herramienta de compresión de imágenes. Mis favoritas son:

  • TinyPNG : una herramienta gratuita basada en la nube 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 de Windows para optimizar imágenes.

TinyPNG

optimizar imagenes web

Esta herramienta basada  en la nube optimiza las imágenes mediante la compresión inteligente con pérdida, reduciendo el tamaño de tu archivo al disminuir la cantidad de colores utilizados. (¡Pero no te preocupes, ni lo notarás!) Es gratis y rápido de usar para PNG y JPEG.

ImageOptim

optimizar imagenes web

Esta es una aplicación gratuita para Mac que comprime las imágenes al eliminar el tamaño innecesario, al tiempo que conserva la mayor calidad de imagen posible.

JPEGmini

optimizar imagenes web

JPEGmini es una poderosa opción de pago que te ayuda a reducir el tamaño del archivo mientras conserva la calidad y el formato. Tiene una versión de prueba gratuita, por lo que puedes realizar una prueba antes de comprar.

RIOT

optimizar imagenes web

La herramienta Radical Image Optimization Tool (RIOT) es una aplicación gratuita de Windows para reducir el tamaño del archivo de imagen. Cuenta con una vista de lado a lado, para que puedas comparar la calidad de la imagen antes y después de la compresión.

5. Automatiza la optimización de imágenes con un plugin de WordPress

Llegados a este punto, puedes estar empezando a pensar que la optimización de las imágenes es demasiado trabajo, ¡y puede serlo!

Pero también hay una manera más fácil de simplificar algunos de estos pasos, y eso es mediante la instalación de un complemento (plugin) de optimización de imagen en tu sitio de WordPress.

Tengo 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 cargues en tu sitio de WordPress.

Esto significa que puedes omitir los pasos de hacerlo manualmente, lo que ahorraras mucho tiempo.

Este método también es bueno si está creando sitios para clientes

Es una gran presión para el usuario final y los creadores de contenido intentar recordar cada paso del proceso de optimización de imágenes.

Al instalar un plugin que hará la mayor parte del trabajo por ti, ayudará a garantizar la velocidad y el rendimiento del sitio que has creado una vez que lo entregas.

Para optimizar las imágenes en un sitio de WordPress, te recomiendo estos plugins:

EWWW Image Optimizer Cloud

optimización de imagenes

Este complemento (plugin) de WordPress optimizará automáticamente tus imágenes cuando las cargues en tu sitio, o también puedes optimizar las imágenes que hayas cargado en el pasado. Esto lo hace increíblemente beneficioso si estás trabajando con un sitio existente con imágenes no optimizadas.

 

Compress JPEG and PNG Images

optimización de imagenes

Este plugin de WordPress es del equipo de TinyPNG puede optimizar imágenes JPEG y PNG al cargarlas. Si eres fanático de la herramienta basada en la nube, ¡agiliza el proceso con su complemento gratuito!

Kracken.io

optimización de imagenes

El complemento Kracken.io puede optimizar tanto las imágenes nuevas como las existentes en tu sitio de WordPress.

También es compatible con los modos de compresión sin pérdida y con pérdida, lo que te brinda un gran control sobre el resultado final.

Imagify

optimización de imagenes

Este plugin de WordPress te ayudará a optimizar tus imágenes sin perder calidad. También es compatible con WooCommerce y NextGen Gallery, si estás usando esos complementos (plugins).

Nota: Antes de elegir un plugin, asegúrate de ver cómo funcionan. Algunos usan muchos recursos del servidor que pueden causar problemas en tu sitio, mientras que otros usan opciones de FTP para enseñar la carga en su servidor web

6. Utiliza la técnica del «desenfoque» para cargar primero una imagen de menor calidad

Incluso después de todos los pasos de optimización anteriores, hay casos en los que aún puedes estar trabajando con archivos de gran tamaño o muchas imágenes en una página, lo que reduce la velocidad de tu sitio.

En esos casos, a veces es útil no solo optimizar las imágenes, sino también optimizar la experiencia de carga para que los visitantes del sitio piensen que los archivos multimedia se están cargando más rápido de lo que realmente son.

De eso  tratan estos dos pasos siguientes: dar la apariencia de cargar imágenes más rápido, para que los usuarios no  estén mirando una página en blanco mientras se cargan sus archivos.

Una forma de hacerlo es cargar primero una imagen de baja calidad (LQI).

Al cargar una versión más pequeña de la imagen antes de cargar el tamaño completo, le da al usuario algo para mirar mientras esperan todos los detalles.

Esto da la percepción de un tiempo de carga más rápido, incluso si técnicamente, todo se está cargando a la misma velocidad.

Una forma popular de hacer esto es la técnica de «desenfoque».

8.     Lazy carga las imágenes de tu sitio

Similar a la técnica de «desenfoque», hay un truco más que te ayudará a dar la apariencia de cargar imágenes más rápido: la carga diferida.

Cuando alguien llega a tu sitio, comienza en la parte superior de la página. Probablemente les llevará un momento desplazarse por toda la página, especialmente si están decididos a leer tu contenido.

En lugar de intentar cargar todas las imágenes a la vez, la carga diferida actúa bajo el supuesto de que los usuarios se preocupan más por el contenido que pueden ver.

Entonces, las imágenes dentro de la vista de tu navegador se cargan completamente primero, mientras que las otras imágenes cargan un marcador de posición primero, hasta que el usuario se desplaza a esa sección de la página.

La carga diferida es una gran técnica en sí misma, ¡y aún más poderosa cuando se combina con el resto de estos consejos de optimización de imagen! Y, es muy fácil de hacer en un sitio de WordPress, gracias al plugin  BJ Lazy Load .

optimizar imagenes web

¡Hasta aquí mi guía paso a paso para un mejor rendimiento del sitio mediante la optimización de imágenes!

Ir arriba