Cómo hacer que las fotos se suban más rápidamente en WordPress: 6 tácticas clave

¿Luchas cómo hacer que las fotos se suban más rápido en tu sitio? Las imágenes lo ayudan a crear un sitio web más cautivador, por lo que es genial usarlas. Pero si usa muchas imágenes, corre el riesgo de ralentizar el sitio si no las optimiza, por lo que está bien interesado en aprender cómo hacer que las imágenes se carguen más rápido. Afortunadamente, hay muchas tácticas que puede implementar para acelerar sus imágenes, con o sin afectar la calidad de las fotos. En esta publicación, compartiremos una guía completa sobre cómo cargar las imágenes que usa en su sitio web más rápido.
Comenzaremos compartiendo seis tácticas clave para acelerar las imágenes. Luego le mostraremos cómo usar dos complementos de WordPress para principiantes amigables para implementar estas tácticas en su sitio web de WordPress. Cómo hacer que las fotos se carguen más rápidamente: seis estrategias de rendimiento en esta primera sección, hablaremos sobre las tácticas que puede implementar para que sus imágenes se carguen más rápido en su sitio. Luego, en la siguiente sección, le mostraremos cómo implementar todas estas tácticas en WordPress. Puede pensar en esta sección como una “teoría”, y en la siguiente sección como en el “modo de actuación”.
Si te preguntas qué hace que las imágenes se carguen más rápido, ¡sigue leyendo! Estas son las seis tácticas que puede usar para acelerar las imágenes en su sitio, clasificadas aproximadamente en orden de su importancia:
Comprimir las fotos.
Cambiar el tamaño de las fotos.
Convierta las fotos en formatos optimizados como WebP.
Use una red de entrega de contenido (CDN) para acelerar el tiempo de descarga (especialmente para los visitantes lejos de alojar su sitio). Imágenes de carga perezosa.
Active la memoria de su navegador para acelerar más visitas.
Las primeras tres tácticas tratan con la optimización de los archivos de imagen en sí, mientras que las tres últimas se centran en optimizar cómo su sitio carga esos archivos de imagen.
Veamos cómo estas tácticas pueden acelerar sus imágenes en WordPress. 1. Compresentar imágenes La compresión de la foto le permite reducir el tamaño del archivo de una imagen sin cambiar su tamaño. La compresión funciona eliminando información redundante/inútil y aplicando varios algoritmos para reducir el tamaño del archivo. Hay dos tipos de compresión:
Sin pérdidas: una pequeña reducción en el tamaño del archivo sin ningún cambio de calidad.
Con pérdidas, una reducción mucho mayor en el tamaño del archivo, pero podría haber alguna pérdida de calidad de imagen. Hay diferentes niveles de pérdidas: algunos pueden no ser visibles incluso para el ojo humano, mientras que los algoritmos más agresivos pueden tener un impacto visible.
Puede obtener más información en nuestro artículo sobre la compresión de la imagen vs. sin pérdidas.
Para la mayoría de los sitios web, estará bien con la compresión de pérdidas. Sin embargo, si usted es un fotógrafo o en otra industria donde la calidad de la imagen es primordial, es posible que desee quedarse sin compresión de pérdidas. Si usa la compresión con pérdidas, puede obtener algunos ahorros bastante impresionantes. Por ejemplo, utilicé Imagify para comprimir una imagen JPG simple. Imagify es una herramienta de optimización de imágenes gratuitas que trataremos más adelante en esta guía. Después de usar la compresión con pérdidas en la imagen de prueba, logramos reducir el tamaño de 133.7 kb a 36.9 kb con un cambio de calidad muy pequeño: esta es una reducción de ~ 73% del tamaño del archivo: 2. Cambiar las imágenes de arriba, le dije que la compresión fotográfica le permite cambiar el tamaño del archivo sin cambiar sus dimensiones. Pero en la mayoría de los casos, desea cambiar el tamaño de la imagen, que es el lugar donde se reanudan las fotos. Todas las cosas son iguales, cuanto mayor es el tamaño de una imagen, mayor es el tamaño de su archivo. Y cuanto más grande sea el tamaño del archivo, más lento se cargarán las imágenes. Para un sitio web, debe intentar cambiar el tamaño de las imágenes al tamaño exacto que usa. Por ejemplo, si el área de contenido de su sitio tiene un ancho de 800 PX, querrá cambiar el tamaño de las imágenes a 800 PX (o puede duplicar esto a 1.600 PX para tener en cuenta los monitores de alta resolución, como las pantallas de retina) .
¿Qué tan grandes son los ahorros? Aquí hay un ejemplo de una prueba rápida en la que redimensionamos la imagen sin agregar ninguna compresión: si combina compresión con el cambio de tamaño, puede obtener algunos descuentos increíbles del tamaño de la imagen. Por ejemplo, después de comprimir la imagen redimensionada con Imagify, la reduje aún más a 101 kb. Por lo tanto, solo al cambiar el tamaño y la comprimir la imagen, disminuí de 380 kb a 101 kb, con casi cero cambios de calidad (suponiendo que la muestre en un sitio web). 3. Convertir fotos en WebP WebP es un formato de imagen moderno de Google que puede proporcionar archivos más pequeños que JPEG o PNG sin ninguna pérdida de calidad.
En promedio, las imágenes WebP son 25-34% más bajas que las imágenes JPEG comparables y un 26% más bajas que las imágenes PNG comparables. Para beneficiarse de estos ahorros de tamaño, puede convertir sus imágenes en WebP al cargarlas en su sitio de WordPress. Para obtener más información sobre este formato, consulte nuestra guía completa de imágenes WebP. 4. Use una red de entrega de contenido (CDN) Un CDN es esencialmente una red de servidor global en todo el mundo. Si configura su sitio de WordPress para usar un CDN, puede alojar todas sus fotos de su sitio (y otros archivos estáticos) en esta red de servidor.
Luego, los visitantes de su sitio podrán descargar fotos desde la ubicación de la red más cercana a ellos, en lugar de necesitar descargarlas directamente desde el servidor de alojamiento de su sitio reduciendo la distancia física que necesita se completa los archivos de imagen, lo harán. Se cargue más rápido para sus visitantes. Un CDN rápido es especialmente útil si el público de su sitio está muy extendido en un área geográfica amplia, como más países o continentes. Sin embargo, si su sitio solo se dirige a personas de una determinada ubicación geográfica (como su ciudad local), entonces es posible que no note una mejora significativa en la carga de imagen usando un CDN.5. Imágenes de carga perezosa La carga perezosa de las imágenes de su sitio de WordPress puede limitar el impacto que sus fotos tienen en los tiempos generales de carga de su sitio. Esencialmente, la carga perezosa le permite esperar a cargar las imágenes que se encuentran fuera de la cara visible del visitante del visitante. En su lugar, su sitio cargará las imágenes solo “justo a tiempo” a medida que un visitante comience a correr hacia abajo. Esto conducirá a los tiempos de carga iniciales más rápido, incluso si tiene muchas imágenes en la página.

6. Active la memoria del navegador en la memoria de la memoria caché El navegador no hará que las fotos carguen la primera vez que una persona visita su sitio. Pero acelerará instantáneamente la carga de la imagen para visitas posteriores.
¿Cómo? Bueno, la memoria de su navegador le permite decirle a los navegadores de los visitantes que almacenen imágenes de su sitio en las computadoras locales (en el caché del navegador). Una vez que el visitante descargue las imágenes en la primera visita, podrá cargar esas imágenes del caché del navegador local en visitas posteriores, lo que conducirá a tiempos de carga más rápidos. Cómo acelerar las imágenes de carga con los complementos de WordPress ahora, para ver cómo puede implementar las seis tácticas para cargar imágenes más rápido en su sitio de WordPress. Solo necesitará dos complementos para configurar todo: Image-lo usará para optimizar los archivos de imagen en sí.
WP Rocket-usted lo usará para optimizar cómo su sitio sirve esos archivos de imagen.
Imagify: comprimido, redimensionado y convertido a WebP Imagify es un complemento de WordPress fácil de usar que puede administrar los primeros tres consejos de optimización en nuestra lista. Una vez que lo configure, optimizará automáticamente todas las imágenes que cargue en WordPress utilizando las siguientes tácticas:

Comprima imágenes con algoritmos con pérdidas sin pérdidas, pérdidas moderadas o pérdidas agresivas.
Cambie las imágenes a ciertas dimensiones máximas.
Convierta las imágenes en WebP y las transmitirá a los visitantes.
También puede cambiar el tamaño y comprimir las fotos existentes de su sitio con un solo clic. Para iniciar, instale y active el complemento de Imagify gratuito en wordpress.org. Una vez que active el complemento, le pedirá que ingrese una clave API, que le permite conectar su sitio de WordPress al servicio de optimización Imagify. Para obtener la clave API, puede registrarse para una cuenta de Imagify gratuita. Podrá optimizar 20 MB de imágenes por mes gratis (~ 200 imágenes por mes). Si tiene que exceder estos límites, el plan pagado cuesta $ 4.99/mes por 500 MB (~ 5,000 imágenes) o 9.99 USD/mes para uso ilimitado. Puede usar los planes pagados en sitios de WordPress ilimitados. Una vez que tenga la tecla API, puede pegarla en el cuadro y hacer clic en mí: luego acceda a Configuración → Imagen para configurar la configuración de optimización de imágenes. En la parte superior, puede elegir el nivel de compresión deseado. También hay una comparación visual para ayudarlo a probar diferentes niveles:
Si se desplaza hacia abajo, puede solicitar que Imagify convierta automáticamente las imágenes en WebP y las muestre a los visitantes. Para las imágenes de WebP, recomendamos usar el método de etiqueta :
A continuación, puede decir Imagify para cambiar el tamaño de las imágenes grandes a una cierta dimensión máxima (basada en el ancho). Nuevamente, le recomendamos que establezca esto en el ancho de la zona de contenido de su sitio (o puede duplicarse si desea proporcionar imágenes de mayor resolución para pantallas de retina):
¡Y eso es! Imagify ahora optimizará automáticamente todas las nuevas imágenes que cargue en WordPress. Si tiene muchas imágenes existentes en su sitio, puede solicitar que Imagify las optimice accediendo al Media → Optimización en el bloque: el caché de Rocket-Browser de WP, la carga perezosa y el cohete CDN WP es un complemento completo de rendimiento de WordPress que puede acelerar todo su Sitio e implementar las otras tácticas para optimizar las fotos que discutimos. Esto incluye:
Implementación de la caché del navegador.
Imágenes perezosas.

Conectando a un CDN.
Además, también puede ayudar con las mejoras en el rendimiento de la no imagen, como la caché de la página, la optimización del código y más. Para configurarlo, primero querrá comprar e instalar WP Rocket. Tan pronto como lo active, activará automáticamente el almacenamiento de la página y el almacenamiento del navegador. Para acceder a la otra configuración, vaya a Configuración → Rocket WP desde el tablero. Para activar la carga perezosa, puede acceder a la pestaña de medios y verificar la casilla en busca de imágenes perezosas (y videos, si lo desea). También puede solicitar que WP Rocket agregue las dimensiones de la imagen que falta, que es otro consejo de optimización útil:

Para configurar un CDN, puede acceder a la pestaña CDN. La forma más fácil de comenzar es usar el servicio RocketCDN, que cuesta solo $ 7.99 por mes para un ancho de cinta ilimitado. O bien, WP Rocket puede ayudarlo e integrarse con otros servicios, como Bunny CDN, KeyCDN o Stackpath.