skip to Main Content

Optimización de imágenes en WordPress – 6 consejos para acelerar su sitio

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

El post de hoy comparte 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 un rayo, ¡sigue leyendo!

Optimización de la imagen en WordPress punta #1: elegir el tipo de archivo correcto

Al usar Photoshop y otros programas de edición de imágenes, puedes especificar el tipo de archivo como quieres guardar. La gran mayoría de las imágenes en línea se encuentran 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 pueden ser comprimidas, sacrificando la calidad por una reducción en el tamaño del archivo.
  • PNG – Los PNG ganan por los gráficos, dibujos, texto y algunas capturas de pantalla. También soportan la transparencia, a diferencia de los JPEGs. Este formato utiliza compresión sin pérdidas, lo que resulta en una mayor calidad pero también en archivos más grandes.

Por lo general, el formato del archivo está determinado por el tipo de imagen con la que estamos trabajando, como se ha indicado 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 a tamaño real de mi tablero de WordPress era de 150kb en formato PNG, pero 259kb como JPEG. Recuerda, las capturas de pantalla suelen ser del dominio del PNG – el JPEG es alrededor de un 75% más voluminoso.

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

Sin embargo, la versión a tamaño real de esta foto que tomé en las vacaciones arroja resultados opuestos. La foto en formato JPEG es de 1.26mb; la PNG de 7.23mb. Eso significa que el PNG es más de 550% más grande.

Esto demuestra lo importante que es el formato de archivo correcto para el tamaño de sus imágenes. Si se presiona, siga la siguiente regla: Fotos y cosas con múltiples colores, JPEG; todo lo demás, PNG.

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

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

Para mantener su sitio ligero y ágil, asegúrese de reducir el tamaño físico de la imagen tanto como pueda – típicamente, a las dimensiones en las que quiere mostrar sus imágenes. Si el ancho máximo de tu sitio web es, por ejemplo, de 1000 píxeles, no hay excusa para subir una imagen que sea más ancha que 1000 píxeles. Las dimensiones más grandes de lo necesario garantizan que la imagen lleva un volumen innecesario, y por lo tanto, dificultan la optimización de la imagen en WordPress.

Aunque la función de miniaturas de WordPress puede mostrar imágenes de menor tamaño, 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 enlace con su trabajo de tamaño completo y de alta resolución.

De nuevo, permítame demostrarle el tipo de ahorros que puede hacer.

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

Un ejemplo de optimización de imágenes en WordPress:

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

Como puedes 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 redimensionamiento de la 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 vista de cada usuario. En otras palabras, Optimole carga el tamaño de imagen perfecto sin importar el dispositivo o el tamaño de la pantalla que esté utilizando .

3. Imágenes de los cultivos

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

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

El cultivo es la alternativa a la redimensión. En lugar de encoger toda la imagen, esencialmente se recorta alrededor de los bordes, como si se utilizara un par de tijeras en una fotografía. La parte de la imagen que estás tratando de mostrar se hace más prominente, y cortas todas las distracciones del fondo.

Aquí hay una demostración de cómo recortar una imagen puede ser mejor que simplemente redimensionarla, usando una fiel captura de pantalla de WordPress.

La imagen redimensionada:

La imagen recortada:

Por supuesto, el beneficio del recorte es que, al igual que el redimensionamiento, reduce las dimensiones de la imagen, corta el tamaño del archivo, y por lo tanto es una gran manera de hacer la optimización de la imagen en WordPress.

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

Cuando termine de recortar y cambiar el tamaño de las imágenes, puede disfrutar de más reducciones de tamaño de archivo comprimiéndolas. Esta técnica es particularmente efectiva y popular para los JPEG, aunque los PNG también pueden ser comprimidos.

Ahora, JPEG soporta 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 diferencia de color más pequeña , podemos hacer que sean 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 te pedirá que selecciones una puntuación 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: menor compresión; mayor calidad; mayor tamaño de archivo.
  • Puntuación más baja: mayor compresión; menor calidad; menor tamaño de archivo.

En términos generales, pequeños cambios en la puntuación 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, vea las dos fotos de abajo. Una tiene una puntuación de calidad de 100, la otra de 80. ¿Cuál es cuál?

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

Fotografía B:

Haga clic aquí para revelar que la Fotografía B tiene una puntuación de calidad de 100.

Es difícil notar la diferencia, ¿verdad? Sin embargo, cuando se trata del tamaño de los archivos, la diferencia es entre la noche y el día: 418kb contra 90kb.

No puedes seguir bajando la calidad para siempre, aunque, como en algún momento, la caída de la calidad se mostrará. La imagen de abajo tiene una puntuación de calidad de 20:

Claro, puede que sólo sean 28kb, pero no querría esto en mi página web, ¿verdad?

Ahora bien, no hay una regla de oro para el nivel de compresión perfecto. Sin embargo, en contra de la intuición, cuanto más compleja es la imagen, más se puede bajar la calidad en el camino hacia la optimización de la imagen en WordPress.

5. Servir las imágenes en un CDN

Todo lo que está en línea sucede en un instante, ¿verdad? Bueno, 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, más larga será la espera.

Para resolver este problema de latencia, considere la posibilidad de instalar un CDN. Los CDNs almacenan su sitio web en múltiples servidores repartidos por todo el mundo, y luego conectan a sus visitantes con el que esté geográficamente más cerca de ellos. Una vez resueltos los problemas de latencia, su sitio web será servido más rápidamente.

Si quieres acelerar WordPress, te alegrará saber que el plugin Optimole viene con su propio CDN gratuito, sólo para imágenes.

Todo lo que necesitas hacer es instalar y activar Optimole. Voilà – sus imágenes se mostrarán en tiempo récord.

Para algunas soluciones CDN más complejas – y también mejores – por favor, eche un vistazo a nuestro otro post.

6. Consigue una carga perezosa

De forma predeterminada, 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 quieres hacer alguna optimización de imágenes en WordPress.

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

Priorizar las imágenes es exactamente lo que logra la carga perezosa. Las imágenes en la parte superior de la página son priorizadas, mientras que las imágenes debajo del pliegue se cargan sólo cuando el visitante se desplaza hacia abajo de la página. Esto hace que la carga perezosa sea el equivalente «justo a tiempo» de la carga de la página web.

Si quieres usar carga perezosa para acelerar WordPress, Optimole te dará una mano de ayuda de nuevo. Lo bueno de este plugin es que ofrece la carga lenta de una imagen de baja calidad hasta que la imagen de tamaño completo se muestra por completo .

También es completamente gratis.

A ti

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

La optimización de sus imágenes es en realidad muy sencilla si utiliza un plugin como Optimole, que hará todo el trabajo por usted de forma automática (y en su mayoría de forma gratuita).

Si tienes alguna pregunta sobre la optimización de imágenes, ¡compártela en la sección de comentarios de abajo!

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

Deja un comentario

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

Pin It on Pinterest

Back To Top