Cómo Dimensionar Correctamente las Imágenes En WordPress (PageSpeed Insights + Elemento GTmetrix)

Si ejecutó su sitio a través de PageSpeed Insights o GTmetrix, es posible que vea una recomendación para dimensionar correctamente las imágenes.

Para dimensionar correctamente las imágenes en WordPress, expanda el elemento en PageSpeed Insights y vea qué imágenes son demasiado grandes. Redimensiónelos a las dimensiones correctas (que se encuentran en el informe heredado de GTmetrix). Por último, reemplace la imagen antigua por la nueva. Vuelva a probar su sitio y debería ser 100%.

 Tamaño correcto de las imágenes

Dado que PageSpeed Insights solo muestra imágenes no optimizadas para la única página que está probando, comience por cambiar el tamaño de las imágenes de todo el sitio que aparecen en su sitio web (imágenes de logotipo, barra lateral y pie de página). A continuación, ejecute otras páginas a través de PageSpeed Insights y cambie el tamaño de sus imágenes en ellas.

¿Puedo usar un complemento para cambiar el tamaño de las imágenes automáticamente?
No es probable. Puede establecer un ancho máximo + alto en la mayoría de los complementos de optimización de imágenes. Pero las diferentes áreas de su sitio requieren dimensiones específicas (las imágenes deben redimensionarse en consecuencia).

Crear una hoja de trucos de dimensión de imagen.
La mejor manera de evitar errores de tamaño de imagen es aprender las dimensiones de las diferentes áreas de su sitio web (deslizadores, widgets, logotipo, imágenes de blog de ancho completo, etc.). A continuación, cree una hoja de trucos de dimensión de imagen con las dimensiones de cada área. Si sigue la hoja de trucos de dimensiones de imagen y redimensiona las imágenes antes de cargarlas, nunca debería tener errores de tamaño de imagen adecuados.

Buscar imágenes de gran tamaño En los Informes heredados de GTmetrix

Los informes heredados de GTmetrix le muestran las dimensiones correctas para sus imágenes grandes.

Cree una cuenta gratuita de GTmetrix y vaya a Cuentas > Activar Informes heredados > de forma predeterminada.

Ejecute una página a través de GTmetrix y vea la sección «servir imágenes a escala». Expanda sus recomendaciones y verá las dimensiones correctas a las que deben redimensionarse estas imágenes.

 Servir imágenes a escala GTmetrix

También puede comprobar manualmente si las imágenes son demasiado grandes. Haga clic con el botón derecho en una imagen > copiar dirección de imagen.

 Copiar dirección de imagen

A continuación, pegue la URL de la imagen en una nueva pestaña del navegador. Si comparas la imagen que se muestra en tu sitio web con la URL de tu imagen, verás que hay una diferencia notable en sus tamaños. Eso significa que la imagen necesita ser escalada. Al comparar las dos variaciones de tus imágenes una al lado de la otra, puedes ver qué tan grande es la imagen en realidad (y por qué la página en la que está puede estar cargando lentamente).

 Imagen escalada vs Sin escala

Cambiar el tamaño de las imágenes Para corregir las dimensiones

Descargue la imagen antigua y ábrala en la herramienta de edición de imágenes que elija (uso GIMP). Redimensionar y / o recortar la imagen a las dimensiones recomendadas por GTmetrix. Algunas herramientas de edición de imágenes le permiten comprimir imágenes y eliminar datos EXIF, lo que hará que la carga de la imagen sea aún más rápida.

 Escalar imágenes GIMP

También puede recortar y cambiar el tamaño de las imágenes directamente en WordPress:

Escalar la imagen En el Editor Multimedia De WordPress

Reemplazar La Imagen Antigua Por La Nueva

Cargue su nueva imagen en WordPress y, a continuación, reemplace la imagen antigua por la nueva.

 Imagen de Widget sin escala

Imagen de Widget a escala

Vuelva a probar la página en GTmetrix

Vuelva a probar la página en GTmetrix (o PageSpeed Insights) y el error debe corregirse.

 Servir imágenes a escala WordPress

Dimensionar correctamente las imágenes en el móvil

Dimensionar correctamente las imágenes es diferente en el móvil.

Si te registras para obtener una cuenta GTmetrix premium, puedes probar la velocidad de tu móvil en Android. Es probable que vea más errores de imagen escalada de servicio si su sitio no usa imágenes adaptativas, lo que significa cambiar el tamaño de las imágenes automáticamente para dispositivos móviles (esto generalmente se hace mediante un complemento).

Paso 1: Ejecuta tu sitio a través de la prueba de Android de GTmetrix:

Prueba Móvil de GTmetrix

Servir Imágenes escaladas En Móviles

Paso 2: Encuentre las dimensiones de fondo de su móvil proporcionadas por GTmetrix:

Ancho de fondo máximo

Paso 3: Instale un complemento de Imágenes adaptativas (recomiendo Imágenes adaptativas o de píxeles cortos).

 Imágenes adaptativas de píxeles cortos

Paso 4: Establezca las dimensiones proporcionadas por GTmetrix como el ancho máximo del fondo.

 Ancho máximo de fondo

Paso 5: Vuelva a ejecutar su sitio a través de la prueba móvil de GTmetrix para asegurarse de que no haya errores.

 Prueba móvil GTmetrix

Paso 5: Configure otros ajustes en su complemento de imágenes adaptativas (ShortPixel incluye compatibilidad con WebP, carga lenta de imágenes, recorte inteligente y eliminación de datos EXIF). Estos también pueden ayudar.

Cambiar el tamaño de las imágenes En Varias páginas

Si utiliza la misma imagen en varias páginas / publicaciones y necesita ser corregida, puede cambiar el tamaño de la imagen, copiarla en HTML y luego usar el complemento Mejor Reemplazo de búsqueda para arreglarla en varias páginas.

Paso 1: Instale el complemento Better Search Replace.

Paso 2: Copie el HTML de la imagen antigua y péguelo en el campo «Buscar» en el complemento de Reemplazo de búsqueda mejorada. Puedes usar el Editor de texto de WordPress para ver el HTML de la imagen. Nota: Better Search Replace solo reemplazará una imagen si contiene el código HTML exacto que introduzcas en el complemento.

 Mejor búsqueda Reemplazar Imágenes

Paso 3: Copie el HTML de la nueva imagen y péguelo en el campo «Reemplazar Con».

 Servir Imagen a escala HTML

Paso 4: Seleccione las tablas (p. ej. mensajes) que desea escanear y desmarque » ejecutar como escaneo seco.»

Paso 5: Haga clic en «Buscar / Reemplazar» y el complemento reemplazará la imagen antigua por la nueva.

Crear una hoja de trucos de Dimensiones de imagen

Como mencioné anteriormente, debe medir las dimensiones de todas las áreas de su sitio web para poder cambiar el tamaño de las imágenes antes de cargarlas. Puede encontrar estas dimensiones en GTmetrix (solo si tiene errores de tamaño de imagen adecuados) o también puede encontrarlas en la hoja de estilos CSS de su tema.

Ejemplo:

  • Imágenes deslizantes: 1900(w) x 400 (h)
  • Imágenes de carrusel: 115(w)
  • Imágenes de widget: 414(w)
  • Imágenes de entrada de blog de ancho completo: 680 (w)
  • Imágenes destacadas: 250(w) x 250(h)
  • Imagen OG de Yoast Facebook: 1200(w) x 628 (h) – paso 11
  • Imagen OG de Yoast Twitter 1024 (w) x 512 (h) – paso 11

680 Rectángulo de ancho de píxel

El ancho de mi blog es de 680px, por lo que cada imagen de esta publicación se ha redimensionado a 680px.

Complementos de WordPress Para Dimensionar Correctamente las imágenes

La mayoría de los complementos de optimización de imágenes tienen la opción de cambiar el tamaño de las imágenes, sin embargo, esto no es muy efectivo al intentar corregir errores en GTmetrix, ya que diferentes áreas de su sitio web requieren diferentes dimensiones. Es más para asegurarse de que sus imágenes no sean absolutamente enormes. Como dice el complemento Imagify, el ancho máximo no debe ser inferior a la miniatura más grande.

Smush

Redimensionar imágenes Smush

Imagify

Redimensionar imágenes Imagify

Optimizador de imagen EWW

Redimensionar Imágenes EWWW

Otras formas de Optimizar Imágenes

Escribí un tutorial completo sobre la optimización de imágenes en WordPress que incluye:

  • Comprimir imágenes
  • Servir imágenes desde una CDN
  • Redimensionar GIFS
  • Eliminar datos EXIF
  • Cargar imágenes y videos perezosos
  • Espejismo, Pulido, Protección Hotlink de Cloudflare

Optimizaciones de Imagen GTmetrix

¿Busca Tutoriales Más Rápidos?
Aquí hay otros tutoriales que escribí:

  • Guía de velocidad de WordPress (esta guía duró una eternidad)
  • Cómo configurar WP Rocket (el complemento de caché que recomiendo)

También tengo un video increíble sobre la optimización de velocidad de WordPress:

Preguntas frecuentes

¿Cómo puedo corregir el tamaño de las imágenes correctamente?

Descargue la imagen, redimensiónela para corregir las dimensiones proporcionadas por los informes heredados de GTmetrix y, a continuación, reemplace la imagen antigua por la nueva.

¿Puedo usar un plugin para dimensionar correctamente las imágenes?

No, diferentes secciones de su sitio web requieren diferentes dimensiones de imagen. Necesita escalar sus imágenes para que se ajusten a esas dimensiones únicas.

¿Qué imágenes debo cambiar de tamaño primero?

Comience por escalar las imágenes que aparecen en varias páginas, como el logotipo, la barra lateral y el pie de página.

¿Dónde puedo encontrar las dimensiones correctas de una imagen?

Los informes heredados de GTmetrix le indican las dimensiones correctas de cada imagen cuando expande el elemento en la pestaña PageSpeed.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.