Una guía para la optimización de imágenes para WordPress

Como dice el refrán, las imágenes hablan más que mil palabras.

Son una de las formas más efectivas de convertir contenido sin vida en algo atractivo.

Y tienen el poder de convertir una página básica en algo funcional y llamativo gracias a Complementos de galería de WordPress como Max Galleria.

Pero aquí está el desafío:

Las imágenes aumentan el tamaño de las páginas, por lo que tardan más en cargarse.

Por lo tanto, cuanto más tarde en cargar una página, más disminuirán sus ventas.

Estas son las buenas noticias:

En esta publicación, descubrirá varias formas de optimizar imágenes y acelerar su sitio web.

Algunos son fáciles de implementar y otros requieren un poco más de esfuerzo. De cualquier manera, encontrará ideas que puede poner en práctica. Por lo tanto, sea cual sea el tema de WordPress que use, vale la pena considerar estos consejos de optimización de imágenes:

Optimización de imagen para WordPress

Elija el formato de imagen correcto

Los formatos de imagen tienen diferentes puntos fuertes. JPEG funciona mejor con imágenes fotográficas. PNG es la mejor opción para gráficos, dibujos lineales y otras imágenes no fotográficas.

Las imágenes JPEG se pueden utilizar en un par de tipos básicos: JPEG progresivo y JPEG de referencia.

La mayoría de los archivos JPEG en la web están codificados como imágenes de referencia, lo que no siempre es la mejor opción. Las imágenes progresivas se codifican con múltiples capas que se descargan progresivamente: los usuarios recibirán una imagen de baja calidad rápidamente y se irá mejorando gradualmente hasta alcanzar la máxima calidad.

Las imágenes progresivas no son en realidad más pequeñas que las imágenes de línea de base, pero dan la impresión de que se cargan más rápido, proporcionando una mejor percepción de rendimiento.

La mayoría de las aplicaciones de edición de imágenes decentes pueden guardar archivos JPEG progresivos.

Cambiar el tamaño antes de cargar

El error clave que comete mucha gente es subir una imagen grande y hacer que el navegador cambie su tamaño. Ese enfoque desperdicia ancho de banda y es particularmente malo para los usuarios móviles.

Es mejor cargar un tamaño apropiado en primer lugar.

Agregar carga diferida

No es necesario cargar todas las imágenes de una página inmediatamente.

Al principio, solo es necesario mostrar las imágenes de la parte superior de la página. La carga diferida de imágenes carga solo las imágenes que están a punto de aparecer en la ventana del navegador: a medida que el usuario se desplaza por la página, las imágenes se cargan cuando las necesita.

Esto no hace que la página se cargue más rápido en general, pero al igual que con los archivos JPEG progresivos, puede reducir el tiempo de carga percibido.

Bj carga perezosa es un excelente plugin de carga diferida para WordPress.

Utilice redes de distribución de contenido

Toda la optimización in situ del mundo no le ayudará a entregar archivos más rápidamente a usuarios geográficamente distantes.

Para eso, necesitará utilizar una red de distribución de contenido, que coloca imágenes y otros archivos en servidores de todo el mundo. Luego, las imágenes se envían desde el servidor más cercano, conocido como nodos de borde. Una red de distribución de contenido puede aumentar sustancialmente la velocidad de carga de las páginas.

Una de las formas más sencillas de integrar una red de distribución de contenido con su sitio de WordPress es un plugin de almacenamiento en caché como W3 Total Cache. Se integra con proveedores populares de CDN.

Usar una CDN podría acelerar su sitio web por al menos unos segundos (probablemente mucho más para los usuarios ubicados más lejos de su servidor de alojamiento web) y mejorar la experiencia del usuario para los visitantes de todo el mundo.

Para obtener más información sobre CDN, consulte nuestra guía para principiantes.

Considere imágenes receptivas

El diseño web receptivo permite brindar una experiencia de usuario de alta calidad en dispositivos de diferentes tamaños sin tener que mantener un sitio móvil dedicado, pero cuando se trata de imágenes, RWD tiene una limitación.

A menudo, sitios receptivos servirá el mismo tamaño de imagen para diferentes tamaños de pantalla, lo que significa que un iPhone de 4 pulgadas tiene que descargar la misma imagen que el escritorio.

Si bien esto solía ser un gran problema con WordPress, ya no lo es. Desde la versión 4.4, Las imágenes receptivas se han incorporado al núcleo de WordPress.. ¡Increíble!

Utilice plugins de optimización de imágenes

Uno de los mejores plugins de optimización de imágenes que he encontrado para WordPress es Optimizador de imagen EWWW.

A pesar del nombre tonto, es un plugin excelente para la optimización automática de imágenes y maneja tanto la optimización de imágenes recién cargadas como la optimización de imágenes que ya forman parte de la biblioteca multimedia. Es capaz de optimizar JPEG, PNG y GIF, incluida la creación de JPEG progresivos.

También puede utilizar aplicaciones web gratuitas como TinyPNG.

Pensamientos finales

La web es muy visual. Pero, por muy buenas que sean las imágenes que creamos, debemos asegurarnos de que estén optimizadas porque los tiempos de carga de la página son importantes. Por ejemplo; las imágenes ocupan alrededor del 63% del ancho de banda utilizado por los sitios web modernos. ¡Son una ganancia rápida para optimizar nuestros sitios!

Al implementar los consejos que hemos discutido aquí, podrá reducir el impacto de las páginas con muchas imágenes sin tener que comprometer su diseño.

Esto no solo es importante para la experiencia del usuario, los tiempos de carga de la página afectan directamente la cantidad de dinero que generará su sitio web.

Los estudios han demostrado que solo un segundo de retraso en los tiempos de carga de la página podría reducir las tasas de conversión en un 7% [source].

Si está listo para llevar sus imágenes un paso más allá, asegúrese de optimizarlas para los motores de búsqueda. Esta guía por Akshay Hallur explica cómo.