Cómo optimizar imágenes para la web: una guía paso a paso para mejorar el rendimiento del sitio

No hay duda de que las imágenes son un activo invaluable para la red mundial. Desde la visualización de datos hasta la división de párrafos de texto y la exhibición de su trabajo de cartera, las fotos y los gráficos son una parte importante de la mayoría de los diseños de sitios web y ayudan a los usuarios a tener excelentes experiencias en línea.

Sin embargo, tener excelentes imágenes puede afectar su sitio web. Con resoluciones más altas vienen tamaños de archivo más grandes, lo que también significa tiempos de carga más lentos. También conocido como, las imágenes son a menudo la causa del bajo rendimiento del sitio. Y recuerde, el objetivo de agregar imágenes a su sitio web es crear una mejor experiencia para sus 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 se equilibra el rendimiento del sitio con el diseño visual?

Al optimizar sus imágenes.

Hay muchas pequeñas cosas que puede hacer a lo largo del proceso de creación de imágenes para optimizar el tamaño de los archivos, específicamente con su sitio web en mente.

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

• ¿Qué es la optimización de imágenes?
• ¿Por qué es importante la optimización de imágenes?
• 7 formas de optimizar imágenes para la 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. Puede optimizar sus imágenes en la fase de creación (usando las opciones correctas de "Exportar" en Photoshop) o directamente en su sitio web (usando la carga diferida para mostrar medios en su sitio). El objetivo es reducir la cantidad de datos que un usuario tiene que descargar, para que pueda obtener el contenido que busca más rápido sin sacrificar la calidad.

¿Por qué es importante la optimización de imágenes?

La gente tiene periodos de atención cortos cuando se trata de la web, por lo que es importante hacer que su sitio web se cargue en dos segundos o menos. Y uno de los factores más comunes que ralentizan su sitio son sus imágenes. (Incluso si su sitio web se ejecuta en los mejores servidores, como lo obtendrá con un host de WordPress administrado, las imágenes pueden ser la ruina del rendimiento).

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

Sin embargo, hay otra razón por la que la optimización de imágenes es importante, una que está directamente relacionada con los resultados de su negocio. Más allá de ralentizar su sitio web, las imágenes ocupan espacio en el disco del servidor que alimenta su sitio. La mayoría de los proveedores de alojamiento imponen un límite de ancho de banda por plan, lo que significa que no tiene recursos ilimitados y sus imágenes ocuparán ese espacio rápidamente.

Si bien no es el fin del mundo si excede ese límite, es posible que se le cobre una tarifa por exceso o, peor aún, que cierre su sitio web.

Al optimizar sus imágenes, podrá aprovechar al máximo el almacenamiento de su sitio y evitar ese límite de ancho de banda.

Ahora que sabe lo importante que es la optimización de imágenes, ¡hablemos sobre cómo hacerlo! Esta guía paso a paso cubrirá todo, desde consejos de Photoshop hasta prácticas de desarrollo.

Cómo optimizar imágenes para la web

Esta guía paso a paso cubrirá todo lo que puede hacer para optimizar imágenes, comenzando en Photoshop y terminando en su sitio.

Siga estos pasos para optimizar sus imágenes para un mejor rendimiento del sitio:

1. Compare la velocidad actual de su sitio.
2. Sepa cómo elegir el mejor tipo de archivo de imagen.
3. Cambia el tamaño de tus imágenes antes de exportarlas.
4. Comprimir imágenes para reducir el tamaño del archivo.
5. Automatice la optimización de imágenes con un complemento de WordPress.
6. Utilice la técnica de "desenfoque" para cargar primero una imagen de menor calidad.
7. Usa la carga diferida.

1. Compare la velocidad actual de su sitio

Antes de hacer todo este trabajo para optimizar sus imágenes, ¡comience por ejecutar una prueba de velocidad en su sitio! Al final, podrá ver el impacto que ha tenido (además, puede compartirlo con su equipo o jefe, para recibir más felicitaciones). Algunas herramientas populares de prueba de velocidad son:

• Perspectivas de velocidad de página de Google
• Herramientas de Pingdom
• GT Metrix
• Prueba de página web

Todas estas herramientas basadas en el navegador funcionan de manera bastante similar entre sí: abra el enlace, luego ingrese su URL para obtener un informe rápido sobre la velocidad y el rendimiento de su sitio.

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

Cuando haya terminado de crear imágenes (ya sea guardándolas desde su cámara o exportándolas desde una herramienta como Photoshop), tendrá la opción de especificar el tipo de archivo. Los tipos de archivos más comunes para usar en la web son JPEG, PNG y GIF. Y como estoy seguro de que puede adivinar, todos tienen sus propias ventajas, desventajas y mejores prácticas cuando se colocan en su sitio web.

JPEG

Las imágenes JPEG funcionan mejor para mostrar fotografías en color complejas en su 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 desea usar en su sitio, con una excepción importante: las imágenes con un fondo transparente. (Para esos, ¡vea la siguiente sección sobre PNG!)

Cuando utilice una imagen JPEG para su sitio web, considere 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.

Si está trabajando en Photoshop, encontrará esta configuración cuando exporte como "Guardar para Web".

PNG

Si no tiene una tonelada de color en su imagen (como ilustraciones planas o íconos), o desea que tenga un fondo transparente, le 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, ¡así que tendrás que ser selectivo con este tipo de archivo!

Para optimizar los GIF para su sitio web, piense críticamente cuánto duran, si necesitan repetirse y cuántos realmente necesita 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 sencillas de optimizar las imágenes para la web es cambiarles el tamaño antes de subirlas a su sitio. Especialmente si está trabajando con imágenes en bruto de una cámara DSLR, las dimensiones suelen ser mucho más grandes de lo que realmente necesita.

Por ejemplo, supongamos que está agregando imágenes a un artículo de blog en su sitio. Si su 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 o cambiar el tamaño de sus imágenes antes de cargarlas, disminuirá el tamaño del archivo, lo que ayudará a que su sitio se cargue un poco más rápido y ahorrará espacio en el disco para aún más imágenes.

Para cambiar el tamaño de su imagen, simplemente abra el software de edición de imágenes de su elección. Photoshop funciona bien, o también puede usar herramientas más simples como Vista previa (para Mac), Paint (para Windows) o Canva (una herramienta de navegador).

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

Una vez que tenga su imagen final, guardada en el formato correcto y recortada a un tamaño apropiado, hay un paso más que puede tomar para optimizarla antes de subirla a su sitio: comprimirla.

Este proceso lo 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 foto, pero generalmente de una manera que el ojo humano no notará. Para obtener más información sobre estos tipos de compresión, recomiendo esta guía de Imagify.

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

Para comprimir sus imágenes, todo lo que necesita es una herramienta de compresión de imágenes. Mis favoritos incluyen:

• TinyPNG: una herramienta gratuita basada en 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 de Windows para optimizar imágenes.
• Image Optimizer: un complemento gratuito para Local.

TinyPNG

Esta herramienta basada en navegador optimiza las imágenes mediante la compresión inteligente con pérdida, lo que reduce el tamaño del archivo al disminuir la cantidad de colores utilizados. (¡Pero no se preocupe, ni siquiera lo notará!) Es gratis y rápido de usar para PNG y JPEG.

ImageOptim

Esta es una aplicación gratuita para Mac que comprime imágenes al eliminar la hinchazón innecesaria, al tiempo que conserva la mayor calidad de imagen posible.

JPEGmini

JPEGmini es una poderosa opción paga que lo 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 puede probarlo antes de comprarlo.

DISTURBIO

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 pueda comparar la calidad de la imagen antes y después de la compresión.

Image Optimizer, un complemento gratuito para Local

Si está usando Local como su entorno de desarrollo local, puede usar el complemento Image Optimizer para comprimir automáticamente las imágenes sin conexión. Escanea su sitio en busca de todos los archivos de imagen, ahorrándole el tiempo de comprimirlos individualmente y acelerando su sitio en el proceso.

5. Automatice la optimización de imágenes con un complemento de WordPress

En este punto, es posible que esté empezando a pensar que la optimización de imágenes es mucho trabajo, ¡y puede serlo! Pero también hay una manera fácil de simplificar algunos de estos pasos, y es instalando un complemento de optimización de imágenes en su sitio de WordPress.

Tengo algunas recomendaciones, y cada una tiene características únicas. Pero, en general, un complemento de optimización de imágenes comprimirá y cambiará el tamaño de sus imágenes cuando las cargue en su sitio de WordPress. Esto significa que puede omitir esos pasos en lugar de hacerlo manualmente, un gran ahorro de tiempo.

Este método también es bueno si está creando sitios para clientes. Es mucha presión para el usuario final y los creadores de contenido tratar de recordar cada paso del proceso de optimización de imágenes. Al instalar un complemento que hará la mayor parte del trabajo por ellos, ayudará a garantizar la velocidad y el rendimiento del sitio que ha creado una vez que lo entregue.

Para optimizar imágenes en un sitio de WordPress, recomiendo estos complementos:

• EWWW Optimizador de imágenes en la nube
• TinyPNG
• Kracken.io
• imaginar

EWWW Optimizador de imágenes en la nube

Este complemento de WordPress optimizará automáticamente sus imágenes cuando las cargue en su sitio, o también puede optimizar imágenes que haya cargado en el pasado. Esto lo hace increíblemente beneficioso si está trabajando con un sitio existente con imágenes no optimizadas.

TinyPNG

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

Kracken.io

El complemento Kracken.io puede optimizar imágenes nuevas y existentes en su sitio de WordPress. También es compatible con los modos de compresión sin pérdida y con pérdida, lo que le brinda mucho control sobre el resultado final.

imaginar

Este complemento de WordPress ayudará a optimizar sus imágenes sin perder calidad. También es compatible con WooCommerce y NextGen Gallery, si está utilizando esos complementos.

Nota: antes de elegir un complemento, asegúrese de ver cómo funcionan. Algunos usan operaciones de carga del servidor que pueden causar problemas en su sitio, mientras que otros usan opciones de FTP para disminuir la carga en su servidor web.

6. Use la técnica "Blur Up" 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 podría estar trabajando con archivos de gran tamaño o muchas imágenes en una página, lo que ralentiza la velocidad de su 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 sus archivos multimedia se están cargando más rápido de lo que realmente son.

De eso se tratan estos dos pasos siguientes: dar la apariencia de que las imágenes se cargan más rápido, de modo que los usuarios no se limiten a mirar una página en blanco mientras se cargan los archivos.

Una forma de hacerlo es cargar primero una imagen de calidad inferior (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 espera todos los detalles. Esto da la percepción de un tiempo de carga más rápido incluso si, técnicamente, todo se carga al mismo ritmo.

Una forma popular de hacer esto es la técnica de "desenfoque", que puede aprender a implementar con este tutorial sobre CSS-Tricks.

7. Carga perezosa 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 que las imágenes se cargan más rápido: Lazy loading.

Cuando alguien aterriza en su sitio, comienza en la parte superior de la página. Probablemente les tome un momento recorrer toda la página, especialmente si están comprometidos. 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 su vista de 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 por sí sola, ¡e incluso más poderosa cuando se combina con el resto de estos consejos de optimización de imágenes! Y es muy fácil de hacer en un sitio de WordPress, gracias al complemento Smush.

¡Esto concluye nuestra guía paso a paso para un mejor rendimiento del sitio mediante la optimización de imágenes! Para ver el impacto que esto ha tenido en su sitio, ejecute otra prueba de velocidad. ¿Cómo harías?

¡Con las herramientas de optimización de imágenes adecuadas, podrá ver una mejor velocidad y rendimiento del sitio en muy poco tiempo!