Cómo optimizar imágenes en WordPress (tanto para Speed ​​+ SEO)

Cuando se trata de la optimización de imágenes, probablemente hayas escuchado lo suficiente sobre el texto alternativo.


En realidad, hay 20 formas diferentes de optimizar las imágenes (si incluye tanto SEO como optimización de velocidad). Esto le dará mejores puntajes en GTmetrix / Pingdom, lo que posiblemente lo clasifique más alto en la búsqueda y haga que su contenido se cargue mucho más rápido. Logré obtener un informe 100% GTmetrix con tiempos de carga de .5s … optimizar mis imágenes en WordPress fue una gran parte de ello.

Optimizar imágenes ANTES de subir – El uso de un programa como Photoshop para optimizar las imágenes antes de cargarlas puede ahorrar mucho trabajo. Puede cambiar el tamaño, comprimir, eliminar datos EXIF, guardar en el formato correcto (por ejemplo, PNG / JPEG) y escribir un nombre de archivo descriptivo (que se usará automáticamente como texto alternativo si se usa el Complemento de atributos alternativos de imagen automática) Eso son 6 optimizaciones!

Si necesita imágenes de alta resolución (p. ej., un sitio web de fotografía), es posible que no desee cambiar su tamaño y comprimirlos (pasos 3 y 8) ya que pueden reducir la calidad, incluso si es una pequeña cantidad.

Principales herramientas que uso – Yo suelo CAÑUTILLO para cambiar el tamaño / comprimir imágenes (mi editor de imágenes de elección), WP Rocket para mi plugin de caché, Imaginar para una mayor compresión sin pérdidas + eliminación de datos EXIF, ambos Flama de nube y StackPath CDN, Complemento de atributos de ALT de imagen automática para usar automáticamente el nombre del archivo de imagen como texto alternativo, y Caché de Gravatar óptimo para almacenar en caché Gravatars en los comentarios. yo suelo WP Review Pro como mi plugin de fragmentos enriquecidos, Mejor búsqueda reemplazar para actualizar imágenes de forma masiva (muy útil), y GTmetrix como mi herramienta de prueba de velocidad. Ver la lista completa de herramientas.

1. Encuentra imágenes no optimizadas

Ejecute su sitio a través de GTmetrix y verá estos elementos en las pestañas Velocidad de la página / Y lento. Los primeros cinco suelen ser específicos de la página, lo que significa que GTmetrix solo mostrará las imágenes no optimizadas para la única página que pruebe. Los últimos 3 generalmente ocurren en todo su sitio. Por supuesto, estas son solo 7 formas de optimizar las imágenes, pero algunas de las más importantes, por lo que haremos esto primero.

  • Servir imágenes escaladas: redimensionar imágenes grandes para corregir dimensiones (paso 2)
  • Especificar dimensiones de imagen: especifique un ancho / alto en el HTML o CSS de la imagen (paso 3)
  • Optimizar imágenes – comprimir sin pérdida de imágenes (paso 4)
  • Peinar imágenes usando sprites CSS – combine múltiples imágenes en 1 imagen (paso 5)
  • Evitar redireccionamientos de URL – no publique imágenes de una versión incorrecta de www o http (s) (paso 6)
  • Use una red de entrega de contenido – servir imágenes / archivos desde un CDN (paso 7)
  • Aproveche el almacenamiento en caché del navegador – imágenes / archivos de caché utilizando su complemento de caché (paso 8)
  • Haga que el favicon sea pequeño y almacenable – use un favicon de 16x16px y almacénelo en caché (paso 9)

Optimizaciones de imagen en GTmetrix

Comience por corregir las imágenes que aparecen en varias páginas.: logotipo, imágenes de la barra lateral / pie de página, etc. También comience con servir imágenes a escala, ya que puede tener que cambiar su tamaño / volver a cargarlas con nuevas dimensiones.

2. Servir imágenes a escala

Si tú ves servir imágenes a escala errores en GTmetrix, significa que tiene imágenes de gran tamaño y necesita cambiar su tamaño a las dimensiones correctas (que GTmetrix le proporciona). Mientras siga la hoja de trucos de las dimensiones de su imagen (ver más abajo), no debería ver estos errores. Pero si ya subió imágenes de gran tamaño, deberá cambiar su tamaño manualmente o usar un complemento.

Imágenes a escala de servicio

Cambiar el tamaño de las imágenes a granel usando un complemento – El problema con esto es que diferentes imágenes requieren diferentes dimensiones (widgets, controles deslizantes, imágenes de ancho completo). Si bien la mayoría de los complementos de optimización de imágenes tienen una opción para cambiar el tamaño de las imágenes a una soltero conjunto específico de dimensiones, realmente debería recortarlas o cambiar su tamaño antes de cargarlas. Si cambia el tamaño de las imágenes con un complemento, mantiene copias de seguridad de las imágenes originales (y solo prueba algunas) en caso de que no esté satisfecho con los resultados.

Redimensionar imágenes grandes

Cambiar el tamaño de las imágenes manualmente – obtenga las dimensiones correctas de GTmetrix y cambie su tamaño / vuelva a cargarlas. Recuerde, GTmetrix solo muestra imágenes no optimizadas para la única página que prueba.

Cree una hoja de trucos de las dimensiones de imagen de su sitio web
Los controles deslizantes, la barra lateral del blog, las imágenes destacadas y el cuerpo del contenido del blog requieren dimensiones específicas a las que se debe cambiar el tamaño de las imágenes. Crea una hoja de trucos para que puedas redimensionarlos antes de subirlos a WordPress. Esto es especialmente útil si tiene muchas áreas de su sitio web que requieren diferentes tamaños de imágenes, y si tiene múltiples diseñadores / editores.

Ejemplo:

  • Imágenes del control deslizante: 1900 (w) x 400 (h)
  • Imágenes de carrusel: 115 (h)
  • 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

3. Especificar dimensiones de imagen

Esto significa agregar un ancho / alto al HTML o CSS de la imagen. El Editor visual hace esto por usted (pero los widgets, algunos creadores de páginas y HTML personalizado no haga). Probar algunas páginas en GTmetrix.

GTmetrix te dice las dimensiones de la imagen …

Especificaciones Imagen Dimensiones GTmetrix

Agregue el ancho / alto al HTML de la imagen …

Especificar dimensiones de imagen

4. Comprimir imágenes sin pérdida

Estos son elementos de “optimizar imágenes” en GTmetrix. Muchos programas (por ejemplo, Photoshop y Gimp) tienen la opción de comprimir cuando se exportan. Si bien este es un gran comienzo, los complementos de compresión de imágenes generalmente obtienen mejores resultados. yo prefiero Imaginar, Kraken, ShortPixel, o Smush. Se sabe que otros complementos reducen visualmente la calidad de la imagen y pueden causar errores con sus imágenes.

Comprimir imágenes con Imagify

  1. Matricularse en Imaginar
  2. Instala el Imagify Plugin
  3. Se le indicarán las siguientes instrucciones:
  4. Ingrese su clave API de su cuenta Imagify
  5. Establezca su nivel de compresión (normal, agresivo, ultra)
  6. Imagif’em all (foto a continuación) con volumen optimiza todas las imágenes en su sitio
  7. Una vez que haya alcanzado su límite, pague $ 4.99 o espere el próximo mes para restablecer su límite

imaginar

Pruebe cómo se ven las imágenes con diferentes niveles de compresión …

Imagify Compression Comparison

Una vez registrado, optimice en masa todas las imágenes en su sitio …

imagina-wordpress-optimizacion de imagen

Establezca la opción para optimizar imágenes al cargar …

Imagify Optimizar imágenes al cargar

5. Combina imágenes en sprites CSS

En mi página de inicio, puede pensar que ve 21 iconos, pero en realidad son una sola imagen. Esto es un Sprite CSS, donde combina múltiples imágenes en una sola imagen. Esto reduce la cantidad de imágenes (y solicitudes), por lo que mi página de inicio solo tiene 10 solicitudes. En lugar de cargar 21 imágenes, carga 1. Necesitará conocimientos de CSS para hacer esto, o usar un Generador de sprites CSS.

Sprites CSS

GTmetrix CSS Sprites

Utilice solo sprites CSS para imágenes decorativas – pierde muchas etiquetas alt de imagen cuando combina 21 imágenes en 1. NO combine imágenes importantes en sprites CSS si describen su contenido. En cuanto a mí, la velocidad de mi página de inicio es más importante que el SEO … Utilizo el informe GTmetrix de mi página de inicio en muchos lugares (así que tengo que mantenerlo limpio) y mi página de inicio, lo creas o no, no está dirigida a un palabra clave. Su propósito es describir mis tutoriales … y cargarlos rápidamente.

6. Evite los redireccionamientos de URL de imagen

Si cambiaste a HTTPS, versiones de www o comenzaste a publicar imágenes desde un CDN, debes actualizar en masa todas tus imágenes (y enlaces) usando Mejor búsqueda reemplazar entonces están sirviendo la versión correcta. De lo contrario, puede ver minimizar redirecciones o usar dominios sin cookies errores.

Minimiza los redireccionamientos

Dominios sin cookies

Utilice el complemento Better Search Replace para actualizar las URL de imágenes de forma masiva …

Mejor búsqueda Reemplazar versiones WWW

Mejor búsqueda Reemplazar HTTP frente a HTTPS

7. Servir imágenes de un CDN

Esto requiere cambiar las URL de las imágenes para incluir su URL de CDN

  • URL de imagen anterior (sin CDN): Https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Nueva URL de imagen (con CDN): Https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – Yo uso ambos Flama de nube y StackPath ya que más centros de datos = entrega de contenido más rápida. Cloudflare tiene Más de 200 centros de datos, StackPath tiene 34+ centros de datos que se encuentran en gran medida en los Estados Unidos (que es de donde son la mayoría de mis visitantes). Cloudflare no le asigna una URL de CDN entonces usaremos el CDN de StackPath para servir imágenes.

StackPath-Data-Centers

Paso 1: Elija un CDN. yo suelo StackPath (tienen una prueba de 30 días).

Paso 2: En el panel de control, haga clic en la pestaña CDN, luego crear un sitio StackPath CDN

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

Paso 3: Copie su URL de CDN y péguelo en su plugin de caché (a continuación es para WP Rocket) …

WP-Rocket-CDN

Paso 4: Reemplace las URL de imagen para incluir su URL de CDN (usando Mejor búsqueda reemplazar).

Mejor búsqueda Reemplazar URL de CDN

Paso 5: Verifique las URL de imágenes antiguas usando Chrome DevTools. A veces, su complemento de caché o CDN Enabler se encarga de esto, excepto los enlaces en CSS y JavaScript que están codificados. Para los enlaces que quedan atrás, normalmente están en archivos (como CSS o Javascript) que necesitan verificación y reemplazo manual. Chrome DevTools muestra todos los dominios que se utilizan actualmente.

Paso 6: Ejecute su sitio en GTmetrix y “red de entrega de contenido” debe ser verde en YSlow. No debería tener ningún error en “minimizar redirecciones” o “usar dominios sin cookies”.

CDN GTmetrix YSlow

8. Imágenes de caché

La mayoría de los complementos de caché tienen una opción para almacenamiento en caché del navegador, que almacena imágenes en caché. Uso WP Rocket, que fue calificado como el complemento de caché n. ° 1 en varias encuestas de Facebook, y tengo un tutorial para eso. Rendimiento rápido generalmente se clasifica como el complemento de caché gratuito n. ° 1 (también tengo un tutorial para eso).

Almacenamiento en caché del navegador

9. Haga que Favicon sea pequeño y almacenable en caché

Asegúrese de que su favicon sea de 16x16px, que tenga el formato favicon.ico y que se almacene en caché utilizando su complemento de caché.

10. Eliminar datos EXIF

Datos Exif contiene información como apertura, velocidad de obturación, ISO, distancia focal, modelo de cámara, fecha en que se tomó la foto y más. No necesita esto para imágenes en su sitio web. los VA Eliminando el complemento Exif elimina los datos Exif automáticamente una vez que se cargan las imágenes.

La mayoría de los complementos de optimización de imagen (incluidos Imagify, ShortPixel, Kraken, EWWW y Smush) tienen una opción para eliminar datos EXIF ​​automáticamente. Aquí está la configuración de Imagify …

Imagify Eliminar datos EXIF

11. Optimización de imagen de Cloudflare

Cloudflare también tiene algunas formas de optimizar las imágenes. El espejismo y el polaco se encuentran en su Configuración de velocidad de Cloudflare mientras que Hotlink Protection se encuentra en su Configuración de escudo de raspado.

Espejismo de la llama de la nube (Función Pro): reduce las solicitudes de imágenes, carga lenta imágenes y mejora los tiempos de carga de imágenes en dispositivos móviles con conexiones de red lentas. Aquí hay más detalles …

  • Cambia el tamaño de las imágenes en función del dispositivo / conexión de un visitante. Un visitante con una conexión deficiente obtendrá una versión más pequeña (resolución más baja) hasta que regrese a un ancho de banda más alto.
  • Reduce la cantidad de solicitudes: en lugar de enviar múltiples solicitudes para todas las imágenes en el sitio web, Mirage reúne esto en una sola solicitud para que los visitantes puedan ver las imágenes de inmediato.
  • Lazy carga imágenes (solo las carga una vez que los usuarios se desplazan hacia abajo y realmente ven la imagen).

Espejismo de imagen de nube de nubes

Polaco Cloudflare (Función Pro): elimina datos EXIF ​​y comprime imágenes.

Cloudflare Image Polish

Cloudflare Hotlink Protection – evita que las personas copien sus imágenes y las peguen en su propio sitio web, lo que (dado que todavía aloja esa imagen) absorberá su ancho de banda.

Cloudflare Hotlink Protection

12. Imágenes de carga diferida

Esto retrasa la carga de las imágenes hasta que los usuarios se desplazan hacia abajo de la página y ven visiblemente la imagen. Si bien mejora los tiempos de carga inicial, cargar imágenes constantemente a medida que te desplazas puede ser muy molesto. Personalmente, solo carga videos de manera diferida, ya que estos tardan mucho más en cargarse que las imágenes.

Puedes usar el Complemento de carga diferida, Complemento Lazy Load For Videos, o use WP Rocket …

WP-Rocket-Lazy-Load

13. Guardar como formato correcto

PNG vs. JPEG – PNG no está comprimido (tamaño de archivo más grande) y debe usarse en imágenes simples sin muchos colores. JPEG es un archivo comprimido (tamaño de archivo más pequeño) que reduce ligeramente la calidad de la imagen, pero es más pequeño y se usa en imágenes con muchos colores. GIMP y otros programas de edición de imágenes deberían usar el formato correcto automáticamente, pero aún es bueno saberlo.

jpg_vs_png

Ilustración de Labnol

14. Nombres de archivos de imagen

Los motores de búsqueda usan tanto texto alternativo como nombres de archivos de imagen, así que nombra tus archivos antes de subirlos a WordPress. Si estás usando un complemento que agrega texto alternativo automáticamente según el nombre del archivo, ¡nombrar sus archivos es todo lo que necesita hacer! No rellene palabras clave, solo describa la imagen.

Nombres de archivo de imagen de etiqueta

15. Texto alternativo

Estos deben ser los mismos que el nombre de su archivo de imagen. Puedes usar el Complemento de atributos alternativos de imagen automática para usar automáticamente el nombre del archivo como texto alternativo. Mientras esté utilizando imágenes relevantes, algunas de ellas deberían incluir naturalmente (bits) de su palabra clave … no hay absolutamente ninguna razón para introducir palabras clave en las imágenes, lo que conlleva un riesgo penalización por relleno de palabras clave.

Agregar texto alternativo a las imágenes automáticamente – utilizar el Complemento de atributos alternativos de imagen automática. Ahora, cada vez que agregue una imagen, el complemento agregará texto alternativo que es el mismo que el nombre del archivo …

alt ="WP-Fastest-Cache-Plugin" ancho ="577" altura ="247" / />

Buscar texto alternativo perdido – Screaming Frog es una herramienta gratuita que muestra todas las imágenes que faltan texto alternativo.

  • Descargar Screaming Frog SEO Spider
  • Ingrese a su sitio web y haga clic en “Inicio” para rastrear el sitio web
  • Haga clic en la pestaña de imágenes
  • Ir a Descripción general → Falta texto alternativo (vea abajo)
  • Ubique esas imágenes en su sitio y agregue texto alternativo

Imagen faltante Texto alternativo: rana gritando

16. Gráfico abierto (Facebook + Twitter)

Esto hace que su contenido se formatee correctamente cuando se comparte en Facebook / Twitter, específicamente su imagen, ya que ambas redes usan dimensiones personalizadas para mostrarlo, de lo contrario se verá divertido.

compartir en FaceBook

Si usa Yoast, vaya a la configuración “Social” y habilite Open Graph para Facebook / Twitter …

Yoast-Social-Meta-Data

Ahora edite una página / publicación, luego haga clic en el enlace “compartir” en Yoast y verá opciones para cargar imágenes personalizadas para Facebook (1200 ancho x 628 alto) y Twitter (1024 ancho x 512 alto).

yoast-social-media-optimization

17. Imágenes en fragmentos destacados

Fragmentos destacados es cuando Google muestra fragmentos de su contenido en la parte superior de los resultados de búsqueda y puede (pero no está garantizado) incluir una imagen. Google los extraerá de cualquier resultado de la primera página, sin embargo, depende de ellos si incluso mostrarán un fragmento destacado o una imagen. Estos también hacen que su fragmento aparezca dos veces y son una forma increíble de obtener mucho tráfico.

3 tipos de fragmentos destacados

  • Respuestas
  • Mesas
  • Liza

Fragmentos de imagen destacada

Cómo obtener fragmentos destacados en Google

  • Apunte a una palabra clave donde la gente quiere un conciso responder
  • Utilizar Moz Keyword Explorer para identificar palabras clave de preguntas
  • Use Answer The Public para encontrar aún más palabras clave de preguntas
  • Elija si la respuesta debe ser un párrafo, una lista o una tabla
  • Diseñe un bonito gráfico (o tome una foto) que describa la palabra clave
  • Use la longitud óptima de caracteres (vea la foto a continuación tomada de Moz)
  • Cree contenido basado en hechos con referencias de calidad (enlaces, gráficos, etc.)
  • Oriente las palabras clave que ya tienen un fragmento destacado pero que no funcionan bien
  • Si está apuntando al cuadro de respuesta, oriente su palabra clave utilizando una coincidencia exacta
  • Asegúrese de estar en la primera página de la palabra clave; de ​​lo contrario, mejore el contenido

Longitud óptima de fragmentos destacados

18. Datos estructurados

Las imágenes se pueden usar en datos estructurados (y insignias) para los siguientes tipos de contenido:

Fragmento enriquecido de video

Fragmentos ricos en recetas

Fragmento rico en productos

¿Qué complemento de fragmentos enriquecidos debo usar??
yo suelo WP Review Pro de MyThemeShop (aquí hay una página en la que la uso) que admite 14 tipos de datos, incluidas recetas y reseñas de productos. Solía ​​usar WP Rich Snippets, pero el desarrollador abandonó el complemento y no se ha actualizado durante más de 2 años, y el Complemento de esquema todo en uno es simplemente aburrido (carece de opciones y estilo). WP Review Pro es muy fácil de usar.

19. Imágenes de estilo

¡No olvides diseñar tus imágenes! Uso bordes en la mayoría de los míos.

  • Títulos de imagen
  • Enlaces de imagen
  • Bordes de imagen
  • Subtítulos de imagen

20. Redimensionar GIF

Al igual que cambia el tamaño de las imágenes a las dimensiones correctas, también se debe cambiar el tamaño de los GIF (use GIF GIF).

Cambiar el tamaño del GIF …

Cambiar el tamaño de los GIF

Entonces comprimirlo …

Comprimir GIF

El resultado :-)

Optimizar perro GIF

21. Gravatars de caché

Si tienes publicaciones con muchos comentarios, Gravatars puede arruinar por completo tu informe. Puede deshabilitarlos, romper los comentarios para mostrar solo un cierto número de comentarios o probar un complemento de caché Gravatar. Es posible que deba realizar algunas pruebas, ya que algunos complementos no funcionan en algunos sitios web.

  • Gravatars de caché (Óptimo, Harry’s, o FV Gravatar Cache)
  • Desactiva Gravatars completamente
  • Establezca su Gravatar predeterminado en blanco
  • Eliminar comentarios que no agregan valor
  • Establezca su Gravatar predeterminado en una imagen personalizada en su servidor
  • Restrinja sus imágenes Gravatar a dimensiones más pequeñas (por ejemplo, 32 píxeles)
  • Paginar comentarios en WP Deshabilitar para mostrar solo 20 comentarios a la vez
  • Si ninguno de estos funciona, echa un vistazo Tutorial Gravatars de almacenamiento en caché de WP Rocket

Cache-Gravatar-Images

22. Evite incrustar imágenes de sitios web externos

Siempre suba imágenes a su sitio web, nunca las copie / pegue. De lo contrario, terminará con solicitudes adicionales ya que la imagen no está alojada en su servidor, por lo que debe extraerla de otro lugar.

23. Herramientas de optimización de imagen

Evite usar complementos con funcionalidad duplicada – Imagify, ShortPixel, Kraken, EWWW y Smush básicamente hacen lo mismo (compresión sin pérdida, eliminación de datos EXIF, cambio de tamaño de las imágenes). WP Rocket tiene opciones para carga lenta, almacenamiento en caché y CDN (y limpieza de bases de datos + alojamiento de Google Analytics localmente) que la mayoría de los complementos de caché no tienen, lo que le ahorra el uso de complementos adicionales.

  • Captura de pantalla impresionante – Extensión de Chrome para tomar capturas de pantalla.
  • Atributos Alt de imagen automática – inserta automáticamente texto alternativo usando el nombre del archivo de imagen.
  • Mejor búsqueda reemplazar – Úselo para actualizar imágenes en masa.
  • Flama de nube – CDN gratis con más de 200 centros de datos, protección hotlink, espejismo, pulido.
  • Chrome DevTools – muestra los dominios que se utilizan si tiene errores de redireccionamiento de GTmetrix.
  • CSS Sprite Generator – herramienta gratuita para combinar múltiples imágenes en 1 sprite CSS.
  • EWWW Image Optimizer – Compresión sin pérdidas, eliminación EXIF, cambio de tamaño.
  • GifGifs – cambia el tamaño de los GIF.
  • CAÑUTILLO – software de edición de imágenes gratuito que uso.
  • GTmetrix – muestra qué imágenes deben optimizarse.
  • Imaginar – compresión sin pérdidas, eliminación EXIF, cambio de tamaño.
  • Imsanity – cambia el tamaño de la imagen grande para arreglar “servir imágenes escaladas” en GTmetrix.
  • Kraken – compresión sin pérdidas, eliminación EXIF, cambio de tamaño.
  • Carga lenta – complemento que retrasa la carga de imágenes hasta que se vuelven visibles.
  • Carga perezosa para videos – complemento que retrasa la carga de videos hasta que se vuelven visibles.
  • Caché de Gravatar óptimo – almacena en caché Gravatars (o prueba Alijo Gravatar de Harry).
  • Screaming Frog SEO Spider – encuentra texto alternativo faltante, meta descripciones, etc..
  • ShortPixel – compresión sin pérdidas, eliminación EXIF, cambio de tamaño.
  • Smush – compresión sin pérdidas, eliminación EXIF, cambio de tamaño.
  • StackPath – $ 10 / mes CDN con 31 centros de datos.
  • Swift Performance Lite – Complemento de caché gratuito n. ° 1 en la mayoría de las encuestas de Facebook.
  • Revisión de WP – Complemento de fragmentos enriquecidos (ayuda a que las imágenes se muestren en los resultados de búsqueda).
  • WP Rocket – Complemento de caché n. ° 1 en la mayoría de las encuestas de Facebook.
  • VA Eliminando Exif – elimina datos innecesarios de las imágenes.
  • Enfocar  -Extensión de Chrome para obtener el zoom perfecto al tomar capturas de pantalla.
  • Yoast – habilita los metadatos de Facebook / Twitter para que las imágenes se formatee correctamente cuando se comparten.

Preguntas frecuentes

&# x2705; ¿Cómo se solucionan los errores de Optimizar imagen en GTmetrix??

Al comprimirlos sin pérdidas utilizando un complemento como ShortPixel, Imagify o Smush. Uso ShortPixel porque siempre corrige este error en GTmetrix.

&# x2705; ¿Cómo se solucionan los errores de Served Scaled Image en GTmetrix??

Esto significa que necesita recortar / cambiar el tamaño de las imágenes a las dimensiones correctas. Si las imágenes son demasiado grandes, GTmetrix mostrará errores de imagen a escala y le indicará las dimensiones correctas a las que deben cambiar su tamaño..

&# x2705; ¿Cómo se solucionan los errores de Especificar dimensión de imagen en GTmetrix??

Vea el HTML de la imagen y verifique que tenga un ancho y alto especificados, como se muestra en este tutorial.

&# x2705; Cualquier otra forma de hacer que las imágenes se carguen más rápido?

La eliminación de datos EXIF ​​y el uso de un CDN para servir sus imágenes marcarán la diferencia más allá de las recomendaciones en GTmetrix.

&# x2705; ¿Qué optimización de imagen es mejor??

Uso ShortPixel porque prácticamente no hay pérdida de calidad y corrige el elemento Optimizar imágenes en GTmetrix.

Qué piensas?
¿Su informe GTmetrix se ve un poco mejor? ¡Házmelo saber en los comentarios! Y si desea más consejos que le permitirán obtener puntajes / tiempos de carga aún mejores, consulte mi guía de velocidad completa de WordPress.

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