Cómo hacer que las imágenes se carguen más rápido en su sitio de WordPress

Entonces quieres que tus imágenes se carguen más rápido?


Bueno, no voy a perder el tiempo. Vamos a sumergirnos en lo bueno!

Hay tres formas de hacer que las imágenes se carguen más rápido en WordPress:

  • Redimensionar
  • Comprimir
  • Carga lenta

En esta publicación, explicaré cómo funciona cada una de estas técnicas y por qué harán que su sitio se cargue más rápido. También le mostraré cómo implementar cada táctica con soluciones manuales y recomendaciones de complementos.

Esta primera técnica es extremadamente simple pero a menudo ignorada por los novatos de WordPress.

Cómo optimizar imágenes en WordPress

Redimensiona tus imágenes

La forma más simple de hacer que sus imágenes se carguen más rápido es cambiar su tamaño. Dejame explicar.

¿Qué es cambiar el tamaño??

Cuando digo “cambiar tamaño” me refiero a cambiar las dimensiones de una imagen, y en este caso, desea reducir las dimensiones de imágenes demasiado grandes.

Como ejemplo, los bloggers a veces toman fotografías en sus teléfonos o cámaras digitales y las suben a sus blogs. Las copias no editadas de las fotos podrían tener un ancho de hasta 5.000 px. Ahora piensa en esto …

El ancho de la sección de publicación en su sitio probablemente no sea más ancho que 800px. El texto que está leyendo en este momento solo abarca unos 700 píxeles en toda la página, así que imagine agregar una imagen de 5.000 píxeles de ancho aquí. Podría ser mucho más grande de lo que debe ser y aunque se reduciría para ajustarse a la página, el archivo de imagen cargado sigue siendo enorme y extremadamente derrochador. Y eso es porque …

Las imágenes que tienen dimensiones más grandes también tienen tamaños de archivo más grandes.

Cuando se trata de rendimiento y hacer que sus imágenes se carguen más rápido, reducir las dimensiones de su imagen es una excelente manera de disminuir drásticamente el tamaño del archivo, y esto hace que la imagen se cargue más rápido.

Volvamos a mi ejemplo y supongamos que la imagen tiene 5.000 píxeles de ancho y alto. Si lo reduce de 5,000px a solo 700px, la imagen realmente usaría un 99% menos de píxeles. En otras palabras, el tamaño del archivo disminuiría en aproximadamente un 99%. Si la imagen fuera de 5 MB, terminaría en solo 50 kb y se cargaría un 99% más rápido en su sitio.

Cambiar el tamaño de las imágenes

Si no te refieres a cambiar el tamaño de tus imágenes cuidadosamente, es casi seguro que hay algunas ganancias por hacer.

Hay algunas maneras en que puede cambiar el tamaño de sus imágenes para que se adapten perfectamente al sitio.

Cambiar el tamaño manualmente de sus imágenes

Antes de cargar una nueva imagen en su sitio, cambie su tamaño manualmente usando las herramientas de edición de imágenes incorporadas en su computadora.

Si tiene una imagen extremadamente grande como en mi ejemplo, esto inmediatamente hará una gran diferencia. Después de cambiar el tamaño de la imagen, puede subirla a su Biblioteca multimedia.

Incluso si va a usar la imagen en una caja de luz o control deslizante, normalmente no hay razón para que sea más ancha que 2,000px. Si la imagen va a estar en una publicación o en el área de contenido de la página, probablemente pueda hacerlo bien con una imagen de 800 px de ancho.

Este método para cambiar el tamaño de las imágenes funciona bien, pero no ayuda con las imágenes que ya están cargadas en su sitio. Una técnica fácil para las imágenes existentes es simplemente elegir un tamaño diferente.

Usa tamaños más pequeños

Cuando carga una imagen en su Biblioteca multimedia, WordPress crea hasta 3 versiones adicionales: miniatura, mediana y grande.

Si visita la página de configuración de Medios, verá que puede elegir esos tamaños aquí:

Configuración de medios de WordPress

Si bien puede modificar la configuración, el tamaño grande predeterminado es 1024px, que es lo suficientemente grande como para usar para publicaciones sin ser demasiado derrochador. Puedes usar este tamaño para todas las imágenes que incluyas en tus publicaciones.

Para cambiar el tamaño de una imagen que ha agregado a una publicación, haga clic en ella en el editor y verá el menú desplegable Tamaño de imagen en la barra lateral derecha.

Tamaño de imagen de WordPress

Seleccione el tamaño “Grande” y actualice la publicación. Si tiene imágenes de gran tamaño, esta técnica le permitirá servir rápidamente un tamaño más apropiado que se cargará más rápido sin necesidad de volver a cargar y reemplazar el original.

Dicho esto, esto puede ser terriblemente tedioso si tienes docenas de publicaciones con docenas de imágenes. Hay un método aún más rápido y efectivo disponible.

Cambio de tamaño automatizado con un complemento

En lugar de cambiar el tamaño de las imágenes usted mismo, puede dejar que un complemento lo haga automáticamente por usted. Cuando se trata de cambiar el tamaño de la imagen automatizada, nada supera Optimole enchufar.

Optimole Image Optimizer

No funciona de la manera esperada.

En lugar de editar las imágenes en su Biblioteca de medios, Optimole guarda sus propias copias de sus imágenes y las sirve desde un CDN de alto rendimiento. De esta manera, sus originales nunca se modifican de ninguna manera..

Además, no tiene que darle a Optimole un tamaño único para usar en sus imágenes. Más bien, obtiene el tamaño de la pantalla del visitante y genera una versión de tamaño óptimo de cada imagen sobre la marcha. Eso significa que alguien en un dispositivo móvil puede cargar una versión de 400px de una imagen, mientras que otro visitante en una computadora portátil obtiene una versión de 700px de esa misma imagen.

Este método de cambio de tamaño es mucho más fácil de implementar y más efectivo para dispositivos móviles, lo cual es especialmente importante porque los visitantes móviles suelen tener conexiones más lentas.

Si desea aprender a usar Optimole, puede seguir mi video completo:

Primero recomendé cambiar el tamaño porque, ya sea manualmente o automatizado con un complemento, es simple y puede ofrecer grandes ganancias..

Si sus imágenes ya tienen el tamaño adecuado para su sitio, aún puede mejorar el rendimiento de su sitio mucho más con la compresión.

Comprime tus imágenes

La compresión es una forma de reducir el tamaño de archivo de una imagen sin cambiar sus dimensiones..

Hay dos tipos de compresión de imágenes disponibles..

El primer tipo de compresión de imagen se llama compresión “sin pérdida”.

Compresión sin perdidas

Con una optimización sin pérdidas, la imagen en sí no se edita. Más bien, esta técnica elimina todos los metadatos almacenados en el archivo de imagen. Por ejemplo, las imágenes a menudo almacenan el nombre del dispositivo utilizado para tomar la imagen, la fecha en que se tomó la foto y, a veces, incluso las coordenadas GPS de la toma..

Dado que estos datos suelen ser bastante limitados, la optimización sin pérdidas solo puede reducir el tamaño de su imagen en un 1-5%, pero realmente no hay razón para no usarla porque no hay impacto en la calidad de la imagen.

Las ganancias reales provienen de la optimización con pérdidas.

Compresión con pérdida

Como es de esperar, la compresión con pérdida optimiza la imagen en sí misma y da como resultado una degradación de la calidad. Pero aquí está la cosa …

Los algoritmos de compresión son tan buenos en estos días que a menudo puede reducir el tamaño del archivo de la imagen en un 50-70% sin ninguna diferencia perceptible. A menos que sea un fotógrafo profesional y necesite que sus imágenes sean perfectamente nítidas en monitores 4k, ni siquiera notará la pérdida de calidad..

Cómo comprimir tus imágenes

Puede comprimir manualmente sus imágenes con una herramienta como TinyPNG antes de subirlos o usar un complemento para automatizar las cosas.

ShortPixel es un gran complemento para optimizar las imágenes en su sitio. Puede optimizarlos de inmediato cuando los carga y optimizar de forma masiva todas las imágenes que ya están en su Biblioteca multimedia.

shortpixel

Recomiendo Optimole para cambiar el tamaño de la imagen y también comprime las imágenes de manera muy efectiva. Una vez más, no optimiza los originales almacenados en su Biblioteca multimedia, sino que comprime las copias que sirve a sus visitantes..

Puede encontrar algunos complementos de optimización de imagen más aquí.

Con sus imágenes redimensionadas y comprimidas, su sitio se cargará mucho más rápido, pero hay una última optimización para las imágenes que puede hacer.

Implementar carga diferida

La carga diferida es una forma realmente inteligente de optimizar aún más sus imágenes.

Supongamos que tiene una publicación de blog con 12 imágenes. Cuando alguien visita su sitio, no todas esas imágenes serán visibles de inmediato en su pantalla. Tendrán que desplazarse hacia abajo para que la mayoría de ellos aparezcan. Entonces, ¿por qué cargar los 12 de inmediato??

Con la carga diferida, solo se cargan las imágenes que aparecen en la pantalla. En lugar de cargar 12 imágenes, quizás solo se carguen 2-3 en su lugar. Luego, a medida que el visitante se desplaza hacia abajo por la página, las imágenes restantes se cargan a medida que aparecen en la pantalla. Esto significa que la carga inicial es mucho más rápida, y dado que la mayoría de los visitantes no se desplazarán por la página, muchas de las imágenes nunca se cargan, lo que ahorra valiosos recursos del servidor.

Este video tiene una visualización que lo explica mejor si desea una imagen más clara de cómo funciona la carga diferida:

Ahora que se ha vendido el concepto, así es como puede implementar la carga diferida en su sitio.

Cómo usar la carga diferida

Una vez más, esta técnica de optimización del rendimiento se agrega fácilmente a WordPress con un complemento.

Si está buscando una opción gratuita, pruebe Optimole o a3 Carga perezosa.

Con Optimole, la carga diferida se activa automáticamente y el complemento a3 es fácil de configurar.

Además, si no te importa pagar, echa un vistazo WP Rocket. Tiene almacenamiento en caché de alto rendimiento y una variedad de otras herramientas de velocidad..

Para activar la carga diferida con WP Rocket, todo lo que tiene que hacer es activar este interruptor:

WP Rocket Media

No podría ser más fácil!

Disfruta de tus imágenes de carga más rápidas

Para resumir lo que acabas de aprender …

Las imágenes de gran tamaño cargadas en su sitio son extremadamente lentas. Solo una de estas imágenes puede detener su sitio.

Lo más importante que puede hacer para acelerar sus imágenes es cambiar el tamaño de las imágenes demasiado grandes para que tengan el tamaño adecuado para su sitio. Puede hacerlo manualmente o automatizarlo con Optimole.

A continuación, los algoritmos de compresión de imágenes han recorrido un largo camino y en estos días, puede reducir el tamaño de archivo de una imagen en un 50-70% sin afectar la calidad de manera notable. Esto no es obvio. Use ShortPixel u Optimole para comprimir cada imagen en su sitio.

Por último, la carga diferida es una excelente manera de cargar imágenes de forma selectiva. Puede usar Optimole, a3 Lazy Load o WP Rocket para implementar instantáneamente la carga diferida en su sitio.

Si no ha estado utilizando ninguna de estas técnicas, su sitio se cargará dramáticamente más rápido una vez implementado. Te sorprenderá.

¿Tiene alguna pregunta sobre los conceptos y técnicas en esta publicación? ¿Tienes otro consejo para compartir? Publica en la sección de comentarios a continuación!

También te puede interesar,

Cómo arreglar un sitio lento de WordPress y un panel de administración (permanentemente)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map