Optimización de imagen en WordPress: 6 consejos para acelerar tu sitio

No importa cuán optimizado esté tu sitio web, las imágenes siempre serán uno de los elementos de carga más lenta en la página. Si deseas acelerar WordPress al máximo, debes implementar una estrategia que apunte específicamente a las imágenes, también conocida como optimización de imágenes en WordPress.

En la publicación de hoy comparto seis consejos rápidos para optimizar la imagen reduciendo el tamaño del archivo, todo en nombre de la velocidad. Si quieres un sitio web de WordPress rápido como el rayo, ¡sigue leyendo!

Optimización de imagen en WordPress consejo # 1: elije el tipo de archivo correcto

Optimización de imagen en WordPress: 6 consejos para acelerar tu sitio 1

Mini curso GRATIS

5 consejos
para acelerar
tu WordPress

Reduce su tiempo de carga incluso en un 50-80% con solo seguir simples consejos.

Al usar Photoshop y otro software de edición de imágenes, puedes especificar el tipo de archivo que deseas guardar. La gran mayoría de las imágenes en línea se dividen en dos formatos de archivo: JPEG y PNG.

Entonces, ¿cuál deberías usar? Bueno eso depende. Ambas opciones tienen ventajas y desventajas, y la elección depende en gran medida del escenario.

  • JPEG : JPEG es la mejor opción para fotografías y otras imágenes que muestran una gran variedad de colores. También se pueden comprimir, sacrificando la calidad por una reducción en el tamaño del archivo.
  • PNG : PNG gana por gráficos, dibujos, texto y algunas capturas de pantalla. También admiten transparencia, a diferencia de los archivos JPEG. Este formato utiliza compresión sin pérdidas, lo que da como resultado una mayor calidad pero también archivos más grandes.

Por lo general, el formato de archivo está determinado por el tipo de imagen con la que estamos trabajando, como se describe anteriormente. Sin embargo, ¿cuál es la consecuencia de elegir el formato de archivo incorrecto , en términos de tamaño de archivo?

Bueno, echemos un vistazo a algunos escenarios para probar esto.

Esta captura de pantalla de tamaño completo de mi panel de WordPress tenía 150 kb en formato PNG, pero 259 kb como JPEG. Recuerda, las capturas de pantalla suelen ser el dominio de PNG: el JPEG es aproximadamente un 75% más voluminoso.

Ejemplo de optimización de imagen en WordPress - captura de pantalla PNG

(Nota del editor. Los PNGs hacen un gran trabajo para la mayoría de las capturas de pantalla, pero no todas. Si tienes una captura de pantalla de algo que usa más que un puñado de colores, es decir, cuando tu captura de pantalla contiene una fotografía en algún lugar, está aún mejor con JPG.)

Sin embargo, la versión a tamaño completo de esta foto que tomé en vacaciones devuelve los resultados opuestos. La foto en formato JPEG es 1.26mb; el PNG la friolera de 7.23mb. Eso significa que el PNG es un 550% más grande (¡ay!).

También te puede ayudar:  Como elegir el mejor hosting para WordPress

Ejemplo de optimización de imagen en WordPress - imagen JPEG

Esto demuestra cuán importante es el formato de archivo correcto para el tamaño de sus imágenes. Si se presiona, cumpla con la siguiente regla:  fotos y cosas con varios colores, JPEG; todo lo demás, PNG. 

2. Cambiar el tamaño de las imágenes

Cuando reduces las dimensiones de una imagen, reduces su tamaño de archivo. Sin excepción.

Para mantener tu sitio ligero y ágil, asegúrate de reducir el tamaño físico de la imagen tanto como puedas, generalmente, a las dimensiones en las que deseas mostrar tus imágenes. Si el ancho máximo de tu sitio web es, digamos, 1000 píxeles, no hay excusa para cargar una imagen que sea más ancha que 1000 píxeles. Las dimensiones más grandes de lo necesario garantizan que la imagen tenga un volumen innecesario y, por lo tanto, le resulta más difícil optimizar la imagen correctamente en WordPress.

Aunque la función de miniatura de WordPress puede mostrar imágenes en tamaños más pequeños, eso no cambia el tamaño del archivo subyacente de la imagen en cuestión. Obviamente, se puede hacer una excepción para los fotógrafos y otros artistas, que pueden querer mostrar una miniatura que vincule a su trabajo de gran tamaño y alta resolución.

Nuevamente, permíteme demostrarte el tipo de ahorro que puede hacer.

La versión de tamaño completo de mi fotografía anterior tiene dimensiones de 2592 x 1456 píxeles y es 1.26mb. Sin embargo, veamos cuánto se reduce el tamaño del archivo al cambiar el tamaño de la imagen a varios anchos populares.

Un ejemplo de optimización de imagen en WordPress:

  • 1200 píxeles de ancho: 394 kb
  • 1000 píxeles de ancho: 298kb
  • 800 píxeles de ancho: 219 kb
  • 600 píxeles de ancho: 154kb

Como puede ver, ¡el ahorro de tamaño es realmente asombroso!

Para cambiar el tamaño de las imágenes de una manera que ahorre tiempo, puedes instalar Optimole en tu sitio de WordPress y hará todo en piloto automático. Además, viene con cambio de tamaño de imagen para una visualización óptima , lo que significa que las imágenes no se cargan a tamaño completo, sino que se adaptan a la ventana gráfica de cada usuario. En otras palabras, Optimole carga el tamaño de imagen perfecto sin importar qué dispositivo o tamaño de pantalla estés usando .

Optimole Image Optimization en WordPress

3. Recortar imágenes

Cambiar el tamaño de las imágenes es la forma rápida y fácil de reducir el tamaño del archivo. Crea una réplica exacta de su imagen, pero una donde todo es más pequeño.

Reducir una imagen más allá de cierto punto significa que algunos elementos son apenas visibles. Esto es especialmente problemático cuando el punto focal de una imagen ya no está claro.

El recorte es la alternativa al cambio de tamaño. En lugar de reducir la imagen completa, básicamente está recortando los bordes, como usar un par de tijeras en una fotografía. La parte de la imagen que intenta mostrar se vuelve más prominente y elimina todas las distracciones del fondo.

También te puede ayudar:  11 formas de acelerar WordPress

Aquí hay una demostración de cómo recortar una imagen puede ser mejor que simplemente cambiar su tamaño, usando una captura de pantalla confiable de WordPress.

La imagen redimensionada:

Imagen redimensionada

La imagen recortada:

Imagen recortada

Elementor Pro
Web Hosting

Por supuesto, el beneficio del recorte es que, al igual que el cambio de tamaño, reduce las dimensiones de la imagen, reduce el tamaño del archivo y, por lo tanto, es una excelente manera de optimizar la imagen en WordPress.

4. Baja calidad de imagen (compresión con pérdida)

Cuando hayas terminado de recortar y cambiar el tamaño de tus imágenes, puedes disfrutar de más reducciones de tamaño de archivo al comprimirlas. Esta técnica es particularmente efectiva y popular para los archivos JPEG, aunque los PNG también se pueden comprimir.

Ahora, JPEG admite un tipo de compresión llamada compresión con pérdida . Esto significa que algunos de los datos de la imagen se eliminan para reducir el tamaño del archivo.

Por ejemplo, si dos píxeles adyacentes muestran la menor diferencia de color, podemos evitar hacerlos iguales. El cambio es apenas detectable a simple vista, pero tener menos colores mantiene el tamaño del archivo bajo.

Al guardar un archivo JPEG con un software de edición de imágenes, se le pedirá que seleccione un nivel de calidad de 0 a 100. Esto es esencialmente una compensación entre la calidad de la imagen y el tamaño del archivo.

  • Puntuación más alta: compresión más baja; mejor calidad; mayor tamaño de archivo
  • Puntuación más baja: compresión más alta; baja calidad; tamaño de archivo más pequeño.

En términos generales, los pequeños cambios en el nivel de calidad hacen poca diferencia en la calidad general de su imagen. De hecho, es poco probable que sus visitantes puedan notar la diferencia.

Para ilustrar esto, ve las dos fotos a continuación. Uno tiene un puntaje de calidad de 100, uno de 80. ¿Cuál es cuál?

Optimización de imagen en WordPress fotografía A:

Fotografía A

Fotografía B:

Fotografía B

Es difícil notar la diferencia, ¿verdad? Sin embargo, cuando se trata de tamaños de archivo, la diferencia es noche y día: 418 kb frente a 90 kb.

Sin embargo, no puedes seguir bajando la calidad para siempre, ya que en algún momento se mostrará la caída de la calidad. La imagen a continuación tiene una puntuación de calidad de 20:

Imagen de baja calidad

Claro, podría ser solo 28kb, pero no quisiera esto en mi sitio web, ¿verdad?

Ahora, no hay una regla de oro para el nivel de compresión perfecto. Sin embargo, contraintuitivamente, cuanto más compleja es la imagen, más puede salirse con la suya al reducir la calidad en su camino hacia la optimización de imagen final en WordPress.

También te puede ayudar:  Acelera tu web al máximo con el mejor plugin de Cache para WordPress - WP Rocket

5. Sirve imágenes en un CDN

Todo en línea ocurre en un instante, ¿verdad? Pues no, en realidad. Las distancias geográficas entre la ubicación de un visitante y el servidor de su sitio web tienen un impacto en la velocidad del sitio: cuanto mayor sea la distancia, mayor será la espera.

Para resolver este problema de latencia, considera instalar un CDN. Las CDN almacenan tu sitio web en múltiples servidores repartidos por todo el mundo, luego conectan a sus visitantes con el que está más cerca geográficamente de ellos. Problemas de latencia resueltos, su sitio web se sirve más rápidamente.

Si deseas acelerar WordPress, debesrá saber que el pluginto Optimole se entrega con su propia CDN gratuita, solo para imágenes.

Todo lo que necesita hacer es instalar y activar Optimole. Voilà : tus imágenes se mostrarán en un tiempo récord.

 

6. Obtener carga perezosa

Por defecto, el software de WordPress trata todas las imágenes por igual. Sin embargo, esto es claramente un uso ineficiente de los recursos, y especialmente si deseas hacer alguna optimización de imagen en WordPress.

Después de todo, una imagen en la parte inferior de la página no se verá hasta mucho después de la imagen en la parte superior de la página: ¿no merece prioridad la primera imagen?

Priorizar imágenes es exactamente lo que logra la carga diferida. Las imágenes en la parte superior de la página tienen prioridad, mientras que las imágenes debajo del pliegue se cargan solo cuando el visitante se desplaza hacia abajo en la página. Esto hace que la carga diferida sea el equivalente “justo a tiempo” de la carga de la página web.

Si deseas utilizar la carga diferida para acelerar WordPress, Optimolete ayudará nuevamente. Lo bueno de este pluginto es que ofrece una función de marcador de posición de imagen de baja calidad, también conocida como la carga diferida de una imagen intermedia de baja calidad hasta que la imagen a tamaño completo se muestre por completo .

También es completamente gratis .

Entonces…

Y eso concluye el resumen de seis consejos rápidos que te ayudarán con la optimización de imágenes en WordPress. Como puedes ver, al combinar varias de estas estrategias, puedes ahorrar mucho en el tamaño de los archivos de tus imágenes. Tus visitantes te amarán por esto, ¡y tu sitio web se cargará significativamente más rápido!

La optimización de tus imágenes es realmente muy simple si estás utilizando un complemento como Optimole , que hará todo el trabajo por tied automáticamente (y principalmente de forma gratuita).

Si tienes alguna pregunta sobre optimización de imágenes, compártela en la sección de comentarios a continuación.

¿Quieres que tu sitio web sea aún más rápido?  No te olvides de mio curso de correo electrónico gratuito sobre cómo acelerar WordPress: 

Mini curso GRATIS

5 consejos
para acelerar
tu WordPress

Reduce su tiempo de carga incluso en un 50-80% con solo seguir simples consejos.

¿Quieres recibir mis articulos?

No te pierdas todos mis trucos y tutoriales para WordPress, Velocidad de carga, y Elementor Page Builder.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *