Cómo servir imágenes escaladas en WordPress (elemento en GTmetrix)

Necesita servir imágenes escaladas en WordPress?


Esto solo significa que necesita cambiar el tamaño de las imágenes grandes para que sean más pequeñas.

GTmetrix le indica qué imágenes deben escalarse y las dimensiones correctas a las que deben recortarse o cambiar su tamaño. A continuación, cambie el tamaño (escala) de la imagen y reemplace las imágenes antiguas por las nuevas..

Servir imágenes a escala

Como GTmetrix solo muestra imágenes no optimizadas para la única página que está probando, comience por escalar en todo el sitio imágenes que aparecen en varias páginas (su logotipo, barra lateral e imágenes de pie de página). A continuación, ejecute sus otras páginas a través de GTmetrix y escale imágenes individuales en esos.

¿Puedo usar un complemento para escalar 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 diferentes áreas de su sitio requieren dimensiones específicas (las imágenes deben ajustarse en consecuencia).

Crear una hoja de trucos de dimensión de imagen.
La mejor manera de evitar errores de imagen escalada es conocer las dimensiones de cada área de su sitio web (controles deslizantes, widgets, logotipo, imágenes de blog de ancho completo, etc.). A continuación, cree una hoja de trucos de dimensión de imagen que enumere las dimensiones de cada área. Si sigue la hoja de trucos de las dimensiones de la imagen y cambia el tamaño de las imágenes antes de cargarlas, nunca debería haber vuelto a mostrar errores de imagen escalados.

1. Encuentra imágenes de gran tamaño en GTmetrix

Ejecute una página a través de GTmetrix y vea los errores de imagen a escala en la pestaña PageSpeed. Expanda sus recomendaciones y verá las dimensiones correctas a las que se debe cambiar el tamaño de cada imagen. Tenga en cuenta que GTmetrix solo mostrará errores para la página que está probando.

Servir imágenes a escala GTmetrix

Tú también puedes comprobar manualmente si las imágenes están escaladas. Primero, haga clic derecho y copie la dirección de la imagen.

Copiar dirección de imagen

A continuación, pegue la URL de la imagen en una nueva pestaña del navegador. Si compara la imagen que se muestra en su sitio web con la URL de su imagen, verá que hay un tamaño notablemente diferente. Eso significa que la imagen necesita ser escalada. Al comparar las dos variaciones de su imagen una al lado de la otra, puede ver qué tan grande es realmente la imagen (y por qué la página en la que se encuentra podría estar cargando muy lentamente).

Imagen escalada vs no escalada

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

Descargue la imagen anterior y ábrala en la herramienta de edición de imágenes que elija (uso GIMP). Cambie el tamaño y / o recorte la imagen a las dimensiones recomendadas por GTmetrix. Muchas herramientas de edición de imágenes le permiten comprimir imágenes y eliminarlas. Datos EXIF lo que hará que la imagen se cargue aún más rápido.

Escalado de imagen GIMP

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

Escalando la imagen en WordPress Media Editor

3. Reemplace la imagen antigua con la nueva

Sube tu nueva imagen a WordPress, luego reemplaza la imagen anterior por la nueva.

Imagen de widget sin escala

Imagen de widget escalado

4. Vuelva a probar la página en GTmetrix

Vuelva a probar la página en GTmetrix y ya no debería haber publicado errores de imagen escalados.

100% servir imágenes escaladas

5. Sirva imágenes escaladas en dispositivos móviles

Servir imágenes a escala es diferente en dispositivos móviles.

Si se registra para obtener una cuenta GTmetrix gratuita, puede probar su velocidad del sitio web móvil en Android Es probable que vea más errores de imagen a escala de publicación si su sitio no está utilizando imágenes adaptativas, lo que significa cambiar automáticamente el tamaño de las imágenes para dispositivos móviles (esto generalmente se realiza mediante un complemento).

Paso 1: Ejecute su sitio a través de la prueba de Android de GTmetrix:

Prueba móvil GTmetrix

Servir imágenes escaladas en dispositivos móviles

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

Ancho de fondo máximo

Paso 3: Instale un complemento de imágenes adaptables desde ShortPixel o Imágenes adaptativas.

ShortPixel Adaptive Images

Paso 4: Establezca las dimensiones proporcionadas por GTmetrix como ancho máximo de 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 soporte WebP, imágenes de carga diferida, recorte inteligente y eliminación de datos EXIF). Estos también pueden ayudar.

6. Cambiar el tamaño de las imágenes en varias páginas

Si usa la misma imagen en varias páginas y necesita ser escalada, puede cambiar el tamaño de la imagen, copiar su HTML y luego usar el complemento Better Search Reemplazar para arreglarlo en varias páginas.

Paso 1: Instala el Mejor complemento de búsqueda de reemplazo.

Paso 2: Copie el código HTML de la imagen anterior y péguelo en el campo “Buscar” en el complemento Better Search Replace. Puedes usar el WordPress Text Editor para ver el HTML de la imagen. Nota: Better Search Replace solo reemplazará una imagen si contiene el HTML exacto que ingresó en el complemento.

Paso 3: Copie el HTML de la nueva imagen y péguelo en el campo “Reemplazar con”.

Servir HTML de imagen a escala

Paso 4: Seleccione las tablas (por ejemplo, publicaciones) que desea escanear y desmarque el escaneo en seco.

Paso 5: Haga clic en “Buscar / Reemplazar” y el complemento reemplazará la imagen anterior por la nueva.

7. 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 que pueda cambiar el tamaño de las imágenes antes de cargarlas. Puede encontrar estas dimensiones en GTmetrix (solo si ha publicado errores de imagen a escala) o también puede encontrarlas en la hoja de estilo CSS de su tema.

Ejemplo:

  • Imágenes del control deslizante: 1900 (w) x 400 (h)
  • Imágenes de carrusel: 115 (w)
  • Imágenes de widgets: 414 (w)
  • Imágenes de publicación de blog de ancho completo: 680 (w)
  • Imágenes destacadas: 250 (w) x 250 (h)
  • Imagen más reciente de Facebook OG: 1200 (w) x 628 (h) – paso 11
  • Yoast Twitter OG image 1024 (w) x 512 (h) – paso 11

Rectángulo de 680 píxeles de ancho

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

8. Plugins de WordPress para servir imágenes escaladas

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 cuando se trata de 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 menor que la miniatura más grande.

Smush

Cambiar el tamaño de las imágenes Smush

Imaginar

Cambiar el tamaño de las imágenes Imagify

EWW Image Optimizer

Cambiar el tamaño de las imágenes EWWW

Otras optimizaciones de imágenes

Escribí un tutorial completo sobre optimizando imágenes en WordPress que incluye:

  • Comprimiendo imágenes
  • Sirviendo imágenes a través de un CDN
  • Cambiar el tamaño de GIFS
  • Eliminar datos EXIF
  • Imágenes de carga perezosa + videos
  • Cloudflare Mirage, polaco, protección Hotlink

Optimizaciones de imagen en GTmetrix

Buscando más tutoriales de WordPress Speed?
Aquí hay otros tutoriales que escribí:

  • Cómo configurar WP Rocket (el complemento de caché que recomiendo)
  • Cloudways vs. SiteGround (los dos principales hosts que recomiendo)
  • Cómo obtuve puntajes 100% GTmetrix (Guía de velocidad de WordPress)

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

Preguntas frecuentes

&# x2705; ¿Puedo usar un complemento para servir imágenes a escala?

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

&# x2705; ¿Cuál es la forma más fácil de escalar una imagen??

Descargue la imagen, recorte / cambie su tamaño en un programa como Photoshop o Gimp, luego reemplace la imagen anterior por la nueva.

&# x2705; ¿Qué imágenes debo comenzar a escalar primero??

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

&# x2705; ¿Dónde encuentro las dimensiones correctas de una imagen??

GTmetrix le dice las dimensiones correctas de cada imagen cuando expande el elemento en la pestaña PageSpeed.

&# x2705; ¿Cómo optimizo completamente una imagen??

Escale a las dimensiones correctas, comprímalo y elimine datos EXIF ​​usando un programa de imagen o un complemento, luego asegúrese de especificar las dimensiones de la imagen (establezca el ancho y la altura de la imagen) en el HTML.

¡Espero que hayas encontrado útil este tutorial! Si aún tiene errores de imagen escalados en su sitio de WordPress, déjeme un comentario con su pregunta y lo ayudaré de cualquier manera que pueda.

Salud,
Tom

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