Optimización de imágenes para la web: 2022 SEO y técnicas de velocidad del sitio
Publicado: 2022-10-29Se publicó originalmente en agosto de 2020 y se actualizó para que esté completo en octubre de 2022.
El SEO, la velocidad de la página y la experiencia del usuario se benefician enormemente de la aplicación de técnicas de optimización de imágenes.
Y en esta guía, aprenderá exactamente cómo optimizar sus imágenes para la web. Paso a paso, con ejemplos reales.
Ahora, hay toneladas de técnicas de optimización de imágenes. Es por eso que esta guía se divide en 2 secciones:
Optimización de imágenes para SEO y accesibilidad :
Esta sección contiene consejos probados de SEO, como escribir un buen texto alternativo y usar datos estructurados. La mayoría de los consejos provienen directamente de Google, así que no espere demasiadas sorpresas.
Optimización de imágenes para la velocidad del sitio web y la experiencia del usuario :
La segunda sección lo ayudará a elegir el tipo de imagen y el nivel de compresión correctos, implementar imágenes receptivas, decidir cuándo usar fotos de archivo y más.
Con eso en mente, comencemos.
Técnicas de Optimización de Imágenes: SEO y Accesibilidad
Dejemos lo obvio fuera del camino:
Las imágenes no optimizadas dañarán sus clasificaciones orgánicas. Período.
Una y otra vez, Google ha reiterado lo importante que es la optimización de imágenes. De hecho, es uno de los temas sobre los que Google ha estado más abierto cuando se trata de SEO.
Pruebe las potentes optimizaciones de imagen de NitroPack en su sitio
En este momento, las imágenes aparecen tanto en la Búsqueda de Google como en Google Imágenes.
Por ejemplo, aquí está el SERP para una palabra clave altamente competitiva: "receta boloñesa".
(Si estás leyendo esto justo antes del almuerzo, lo siento)
Busque la misma palabra clave en Google Imágenes y encontrará la misma imagen.
Este ejemplo ilustra perfectamente el poder de la optimización de imágenes para SEO.
Con solo una imagen , el sitio web de la BBC aprovecha dos fuentes de tráfico masivas .
Eso es lo que estamos tratando de hacer con estas técnicas de SEO y Accesibilidad.
Veamos cómo podemos llegar allí.
Cambie el nombre de sus archivos de imagen
De forma predeterminada, la mayoría de los archivos de imagen se denominan algo así como "IMG_010204".
Esto no es particularmente útil para nadie, incluido Google.
Desea asegurarse de que Google comprenda lo que representa cada imagen. Es por eso que dar a sus archivos de imagen un nombre descriptivo es una victoria fácil.
Por ejemplo, este es el nombre de archivo de la foto de espagueti de arriba:
(En serio, si tienes hambre, ve a comer algo. Estaré hablando de esta imagen a lo largo de toda la guía)
Como puede ver, el nombre no es elegante, pero hace el trabajo.
Y eso es lo mejor de los nombres de archivo:
No es necesario que sean demasiado detallados . Ese es el trabajo de la descripción alternativa.
Además de escribir un nombre de archivo claro, también desea evitar el relleno de palabras clave. Puede ser penalizado por agregar palabras clave innecesarias.
Por ejemplo, si el nombre de archivo de la foto fuera "increíble-espagueti-fettuccine-pasta-plato-receta-cocinar.jpg" , sería un candidato ideal para una penalización por relleno de palabras clave.
En resumen, mantenga los nombres de los archivos simples y descriptivos . No es una ciencia exacta.
Usar texto alternativo descriptivo
El texto alternativo es la descripción (o el texto equivalente) de la imagen.
Agregarlo es crucial para Google y para las personas con lectores de pantalla.
Es increíblemente importante escribir un buen texto alternativo para todas tus imágenes. También es muy fácil.
Solo tienes que agregar un atributo alt a la etiqueta de la imagen, así:
Si hay un problema de representación con la imagen, el navegador mostrará el texto alternativo. De esa manera, los visitantes aún pueden entender la imagen, incluso si no aparece.
Entonces, ¿cómo se escribe un buen texto alternativo?
Primero, debe ser mucho más descriptivo con su texto alternativo que con el nombre del archivo.
Volvamos a la imagen de nuestra receta:
Este es un ejemplo de excelente texto alternativo: es descriptivo y detallado, sin conjunciones ni palabras clave innecesarias.
Cualquiera puede visualizar la imagen sin siquiera mirarla.
Por lo tanto, ser descriptivo es su prioridad número uno.
Evitar el relleno de palabras clave también es vital. No puedo enfatizar este punto lo suficiente: es muy fácil ser penalizado por su texto alternativo.
Además, no uses expresiones innecesarias como “Esta es una foto de…”. Por supuesto que es una imagen, ¿por qué si no tendría texto alternativo?
Para resumir:
Describe la imagen en detalle;
Evite el relleno de palabras clave;
No escribas aclaraciones redundantes como “Esta es una foto de…”
Entonces, ¿cómo escribirías una descripción alternativa para la imagen de abajo?
Fuente de la foto de archivo: https://unsplash.com/photos/eDXRq-2LfNM
Una buena versión sería "Ford mustang moderno negro estacionado cerca de un árbol al atardecer".
Puede usar herramientas como Ahrefs y Screaming Frog para verificar todas las imágenes de su sitio web en busca de texto alternativo. Es mucho más fácil que hacerlo a mano.
La extensión de Chrome Alt Text Tester también es excelente para esto.
Le permite verificar el texto alternativo al pasar el mouse sobre la imagen. También puede tocar dos veces para copiar.
No pongas texto importante en una imagen
Esto no es tanto una técnica como el sentido común.
Sin embargo, la gente todavía se equivoca todo el tiempo.
Entonces, déjame decirlo claramente:
Si desea clasificar para una palabra clave o transmitir un mensaje vital, escríbalo como texto, no lo coloque dentro de una imagen.
Mira este ejemplo:
Fuente de la foto de archivo: https://unsplash.com/photos/l8p1aWZqHvE
A primera vista, podrías pensar que no hay nada malo. De hecho, las personas pueden ver esta información importante al instante, en lugar de desplazarse por el texto.
Pero esta forma de transmitir información puede arruinar tu SEO.
Este es el por qué:
Google no puede ver ni interpretar este texto. Si no lo ha escrito en el HTML, no se clasificará para palabras clave cruciales.
Las personas con lectores de pantalla también se lo perderán todo.
Además de eso, los visitantes no pueden resaltar ni copiar el texto, lo que puede ser muy molesto.
Y si por alguna razón la imagen no se procesa o se carga lentamente, ha perdido su única oportunidad de transmitir su mensaje.
Por lo tanto, manténgalo simple: no coloque texto importante como palabras clave de SEO solo en imágenes. Asegúrese de escribirlo en el HTML.
Use datos estructurados para productos, videos y recetas
Los datos estructurados son código escrito en un formato específico que facilita su interpretación por parte de los motores de búsqueda.
Como muchas de las otras técnicas aquí, los datos estructurados facilitan la vida de Google. Usarlo le permite alimentar con cuchara los detalles del motor de búsqueda como el precio, la cantidad o la marca.
Veamos un ejemplo.
Mira cómo Google sirve pequeñas pepitas de información debajo de esta imagen:
Los datos estructurados lo hacen posible.
Así es como se ve en el código de la página:
Otro ejemplo es nuestra página de recetas anterior:
Esa es una gran cantidad de información útil para los visitantes incluso antes de que hagan clic en el enlace.
Y al combinar datos estructurados con otras técnicas de SEO, esta receta ocupa los 2 primeros lugares en el SERP:
Puede utilizar datos estructurados en cualquier página. No siempre es obligatorio, pero las páginas de productos, recetas y videos tienen pocas posibilidades de clasificarse bien sin él.
Puede encontrar toneladas de consejos y trucos para implementar datos estructurados en línea.
Pero al final del día, nadie puede decirte cómo hacerlo mejor que Google.
Por lo tanto, siga siempre las pautas oficiales de Google para:
Agregar marcas a las páginas de productos ;
Agregar marcado a las páginas de videos ;
Agregar marcas a las recetas
Crear un mapa del sitio de imágenes
Los sitemaps de imágenes no son obligatorios, pero definitivamente pueden ayudar a los sitios web más grandes.
Estos mapas de sitio ayudan a Google a encontrar imágenes que, de otro modo, podría haber pasado por alto.
Por ejemplo, si su sitio web llega a algunas imágenes con JavaScript, Google puede tener problemas para encontrarlas sin un mapa del sitio de imágenes.
Nuevamente, siga las pautas oficiales de Google para crear un mapa del sitio de imágenes.
Además, si eres un usuario de WordPress, hay algunos complementos de mapas de sitios de imágenes. Pruébalos, es mucho más fácil que crearlos tú mismo.
Y con eso, hemos terminado con los consejos de optimización de imágenes de SEO y Accesibilidad.
Pasemos a la velocidad y la experiencia del usuario.
Técnicas de optimización de imágenes para la web: velocidad del sitio web y experiencia del usuario
No se puede tener un sitio web rápido con imágenes no optimizadas.
Y un sitio web rápido es crucial para mantener contentos a sus visitantes.
Aquí hay algunos ejemplos del poder de la velocidad de la página:
En 2012, Walmart redujo el tiempo de carga de su sitio en 1 segundo y vio un aumento del 2 % en las conversiones;
En 2017, Zitmaxx Wonnen redujo su tiempo de carga a 3 segundos y vio un 50 % más de conversiones móviles y un aumento del 98,7 % en los ingresos móviles;
Por último, en 2020 NDTV redujo su tasa de rebote en un 50 % al mejorar LCP y CLS.
Puedo seguir y seguir, pero entiendes la idea. Si necesita más pruebas, consulte esta colección de 18 estudios de casos de rendimiento web.
Por supuesto, la optimización de la velocidad es más que solo la optimización de la imagen.
Pero aquí está el truco:
Las imágenes son a menudo la principal razón por la que el tiempo de carga del sitio web es lento. De hecho, aproximadamente el 50 % de todos los bytes de una página promedio son bytes de imagen. ¡Y desde 2011, los bytes de imagen han aumentado casi 5 veces en la página de escritorio mediana y más de 7 veces en la página móvil mediana!
Fuente - Estado de las imágenes del archivo HTTP
Es por eso que optimizar sus imágenes es una ganancia masiva de velocidad del sitio.
La optimización de imágenes para la velocidad y la experiencia del usuario se trata de encontrar un equilibrio entre el tamaño, la calidad y la cantidad de la imagen.
Aumente la velocidad de su sitio web con NitroPack: no se requieren habilidades de codificación
Con eso en mente, comencemos.
Elija el formato de imagen correcto
Aquí hay una lista de verificación rápida para elegir el formato de imagen correcto:
Cuando pueda sacrificar la calidad por el rendimiento, utilice JPEG . Una herramienta gratuita de optimización de imágenes como Optimizilla puede ayudarlo a ajustar el nivel de compresión (hablaremos sobre la compresión en un momento) para probar diferentes relaciones de calidad/tamaño;
Cuando necesite preservar los detalles y ofrecer la imagen de la más alta calidad posible, use PNG . Pero ten cuidado de no abusar de él. Cuanto más aumenta la calidad, más grande se vuelve el archivo;
Para logotipos, formas geométricas y bellas artes, utilice SVG . En general, utilice imágenes vectoriales siempre que sea posible. Se ven increíbles en todos los dispositivos y no pierden calidad cuando se expanden o encogen;
Por último, un formato de imagen de próxima generación como WebP puede aumentar aún más el rendimiento sin sacrificar tanta calidad. Según Google, las imágenes WebP son un 26 % más pequeñas que las PNG y un 25-34 % más pequeñas que las JPEG con una calidad comparable. El único inconveniente es que los formatos de próxima generación (incluido WebP) no son 100 % compatibles con el navegador. Esto hace que sean más difíciles de servir, ya que debe mantener una copia de seguridad para los navegadores más antiguos.
Eso es realmente todo lo que necesita para elegir un formato de archivo. Para profundizar más en el tema, consulte el artículo de Shutterstock sobre imágenes ráster versus imágenes vectoriales.
Reducir el tamaño del archivo de imagen
Hay dos formas de comprimir el tamaño del archivo de imagen: compresión con pérdida y sin pérdida.
La compresión de imagen con pérdida elimina algunos de los datos de píxeles. La compresión sin pérdida no lo hace.
De hecho, la diferencia entre los formatos de imagen de los que acabamos de hablar (JPEG, PNG, WebP, etc.) es cómo aplican estos dos tipos de compresión.
JPEG es un ejemplo clásico de un tipo de imagen con pérdida. PNG es un tipo sin pérdidas. Y WebP usa compresión con pérdida y sin pérdida.
Este es un tema bastante complejo, que no puedo tratar en detalle aquí. Si está interesado, consulte esta inmersión profunda de compresión de imágenes.
Por ahora, es importante saber que no hay un nivel de compresión "bueno" o "malo". Todo depende de tu sitio web.
Esto es lo que quiero decir:
Si tiene un blog, un sitio web de noticias o cualquier otro sitio que no requiera imágenes de muy alta calidad, puede aumentar la compresión con pérdida.
Debido a que elimina datos, esta compresión conduce a una gran reducción en el tamaño del archivo . Por supuesto, esto se produce a expensas de la calidad de la imagen.
Por otro lado, si tienes un sitio web de fotografía o moda, probablemente necesitarás imágenes increíbles para destacar entre la multitud. En ese caso, la compresión sin pérdidas es su mejor opción.
No verá una gran reducción en el tamaño del archivo, pero mantendrá la increíble calidad .
Hay toneladas de herramientas de compresión de imágenes que puede usar:
Para el público más técnico, Guetzli e Imagemin pueden hacer un trabajo increíble;
Incluso las herramientas en línea gratuitas como Compress JPEG, TinyJPG y Optimizilla pueden dar buenos resultados;
En NitroPack, también ofrecemos calidad de imagen ajustable como parte de nuestras funciones de optimización de imagen.
La parte difícil no es encontrar una herramienta. Está logrando un equilibrio entre el rendimiento del sitio web y la calidad de la imagen.
Y no hay otra forma de hacerlo además de probar.
Recientemente, lanzamos una nueva función sofisticada que reduce el tamaño de los archivos de imagen hasta 4 veces: tamaño de imagen adaptable. Este tipo de optimización se dirige a todas las imágenes identificadas por un elemento de marcado para una imagen en HTML (incluidas galerías, carruseles, controles deslizantes, imágenes de la parte superior e inferior de la página).
La forma en que funciona es que hace que todas las imágenes coincidan con las dimensiones de los contenedores en los que se muestran en dispositivos de escritorio, móviles y tabletas. Y, sí, ¡esto significa que puede tomar un descanso del redimensionamiento repetitivo de imágenes masivas!
Utilice una red de entrega de contenido (CDN)
Configurar un CDN es una de las mejores cosas que puede hacer para mejorar la velocidad del sitio en general.
Esto también se aplica a la optimización de imágenes.
Si no está familiarizado con las CDN, consulte nuestra guía de CDN para principiantes. Por ahora, aquí está TL; DR rápido:
Digamos que su sitio web está alojado en un servidor en los EE. UU. Cuando un usuario de Europa visita, los datos tendrán que viajar de EE. UU. a Europa.
La distancia es tan grande que la latencia es inevitable.
Los CDN resuelven este problema.
Así es cómo:
La CDN almacena versiones en caché de su sitio web en diferentes ubicaciones geográficas .
Por lo tanto, cuando los visitantes de Europa ingresen a su sitio web, los datos no viajarán desde los EE. UU. Vendrá de un lugar cercano a ellos.
Lo mismo ocurre con los visitantes de América del Sur, África, Asia o cualquier otro lugar donde el proveedor de CDN tenga servidores.
Ese es el poder de una CDN: acorta la distancia entre sus visitantes y su sitio web .
Y al igual que las otras partes de su sitio web, las imágenes también llegan a los visitantes más rápido.
También puede usar CDN de imágenes: es un CDN diseñado específicamente para la entrega de imágenes. Tienen algunos buenos beneficios, pero no son obligatorios. Para la mayoría de los sitios web, un CDN regular servirá.
Servir imágenes receptivas
Un error común que cometen las personas es cargar solo una imagen grande y publicarla en todas las ventanas gráficas.
Al principio, eso suena como una buena idea. Una imagen grande no perderá calidad cuando se reduzca. Entonces, para asegurarse de que se vea bien en todos los dispositivos, simplemente cargue la versión más grande que tenga, ¡y listo!
Excepto que no es tan simple.
Si su imagen tiene 700 px de ancho, podría verse bien en una pantalla de 300 px. Pero todos los 700px todavía tienen que ser procesados. Eso es un desperdicio masivo de ancho de banda.
Entonces, ¿cómo puede mantener su imagen de calidad y no desperdiciar ancho de banda?
Utilice el atributo srcset .
Este atributo apunta al navegador a diferentes versiones de la imagen. A partir de ahí, el navegador decide cuál servir según el dispositivo.
Veamos un ejemplo rápido.
Este es un código HTML estándar para cargar una imagen:
Este fragmento de código usa el atributo src , que le dice al navegador dónde encontrar la imagen.
Agreguemos srcset a la mezcla:
Ahora proporcionamos enlaces a otras 3 versiones: pequeña, mediana y grande. A partir de ahí, el navegador elige la mejor, dependiendo de la ventana gráfica .
Ese es el poder de srcset . Nuestras imágenes siempre se ven increíbles y no tenemos que hacer nada después de la configuración inicial. El navegador hace todo el trabajo pesado.
El sitio web de Airbnb utiliza este enfoque:
Todo lo que tiene que hacer es ejecutar algunas pruebas para ver cómo se ven sus imágenes en diferentes dispositivos. Esto ayudará a determinar qué tamaños de imagen proporcionar.
Para hacer eso, use DevTools de Chrome.
Abra su página, haga clic derecho y seleccione "Inspeccionar". La pestaña "Elementos" tiene información sobre sus imágenes.
Desde allí, puede seleccionar diferentes dispositivos, reducir o expandir la ventana gráfica y hacer todo tipo de pruebas.
Una nota final: WordPress (desde la versión 4.4) crea automáticamente diferentes versiones de sus imágenes. También agrega el atributo srcset .
Si es un usuario de WordPress, solo necesita proporcionar los tamaños de imagen correctos.
Eliminar imágenes innecesarias
Este es el consejo de optimización de imágenes más simple y más ignorado.
Si una imagen no se suma a la experiencia del usuario o no lo ayuda a explicar su punto, no debería estar allí . Llano y simple.
Esto es lo que puede hacer:
Abra sus páginas más importantes y piense en lo que están tratando de lograr;
A medida que los revise, quedará claro qué imágenes deberían estar allí y cuáles no. Pero no empieces a borrar todavía;
Primero, asegúrese de tener su seguimiento configurado. Páginas vistas, tasas de rebote, conversiones, tiempo en la página: todas esas cosas buenas;
Es importante basar esta decisión en datos, no en su opinión subjetiva. Al guardar estos datos, puede comparar su página antes y después de eliminar las imágenes en cuestión;
Pruebe ambas versiones durante unas semanas y elija un ganador.
Y si quieres comparar ambas versiones en tiempo real, puedes utilizar una herramienta como Google Optimize.
No abusar de las fotos de archivo
No me malinterpreten: me encantan las cosas gratis tanto como a cualquiera.
Y las personas que entregan sus imágenes de alta calidad de forma gratuita merecen un montón de elogios.
Pero…
Las fotos de stock están sobreutilizadas. No parecen originales, porque no lo son.
Por ejemplo, ¿con qué frecuencia ha visto a estos tipos en un artículo sobre trabajo en equipo, colaboración o un tema genérico similar?
Fuente de la foto de archivo - https://unsplash.com/photos/Oalh2MojUuk
O esta imagen en sitios web que venden cursos o servicios legales:
Fuente de la foto de archivo: https://unsplash.com/photos/5fNmWej4tAA
Una búsqueda inversa rápida de imágenes de la primera foto arroja alrededor de 5800 resultados .
Y unos 13 500 por el segundo.
Sí, eso no es súper original. Pero aun así, ¿es esto realmente tan importante?
Sí, lo es.
Investigaciones recientes confirman que las fotos de archivo pueden tener un impacto negativo tanto en la imagen de su marca como en el SEO . Te recomiendo que lo leas.
Si no tienes tiempo, aquí hay una cita que describe perfectamente los problemas con las fotos de archivo:
Lo peor es que muestran una completa falta de esfuerzo.
Ahora, soy consciente de que no todo el mundo puede permitirse fotografías o diseños profesionales. Y no digo que nunca debas usar fotos de archivo. Debería.
Pero, por favor, sé estratégico al respecto.
Quiero decir tres cosas con eso:
Primero, si alguna vez necesita una imagen de personas trabajando en una oficina, simplemente tome algunas fotos de su oficina . Sus visitantes apreciarán la autenticidad.
En segundo lugar, cuando tenga que usar fotos de archivo, profundice un poco más y encuentre aquellas que no se han explotado tanto. Aquí hay una lista de 24 sitios web únicos de fotos de archivo que puede visitar.
Tercero, no use una foto de archivo en su página de inicio u otras páginas vitales. Póngase en contacto con un fotógrafo/diseñador independiente y obtenga algunas imágenes personalizadas. No son tan caros.
Consejo adicional: carga diferida (aplazamiento) de imágenes fuera de pantalla
Este consejo final no se trata realmente de la optimización de la imagen, pero puede tener un impacto enorme en el tiempo de carga inicial.
De hecho, las imágenes de carga diferida pueden acelerar los tiempos de carga incluso más que la optimización de imágenes.
Así es como funciona:
La carga diferida (o diferida) de imágenes fuera de pantalla significa usar un conjunto de técnicas para cargar solo las imágenes que los visitantes están mirando en ese momento .
Las imágenes fuera de pantalla no son visibles antes de que el usuario navegue hacia ellas. Aplazarlos asegura que se carguen después de otros recursos más críticos.
Además, el tiempo de carga de la página inicial es mucho más rápido, ya que el navegador tiene que procesar menos recursos a la vez.
Aquí hay un ejemplo de cómo funciona la carga diferida:
Como puede ver, la mayoría de las imágenes debajo del pliegue se cargan a medida que el usuario se desplaza hacia abajo en la página, no cuando aterriza en ella.
Ahora, hay diferentes formas de implementar esta técnica:
Puede probar la carga diferida nativa utilizando el atributo de carga con un valor de perezoso . Este método es bastante fácil, pero carece de compatibilidad con el navegador;
Puede usar Intersection Observer para registrar qué imágenes deben cargarse de forma diferida. Este método requiere escribir un poco de JavaScript. Puede encontrar un gran ejemplo del Intersection Observer en acción aquí;
También puede automatizar el proceso con NitroPack. Nuestro servicio carga de forma diferida todas las imágenes (incluidas las de fondo).
Para profundizar más en este tema, consulte nuestro artículo sobre el aplazamiento de imágenes fuera de pantalla.
Optimización de imágenes con complementos y servicios de WordPress
Por lo general, la mayoría de las optimizaciones discutidas aquí no se realizan a mano, especialmente en los sitios de WordPress.
Si tiene un sitio de WordPress, es probable que use un complemento de optimización de imágenes, si aún no lo ha hecho. No enumeraré los complementos de optimización de imágenes aquí, ya que hay demasiadas opciones.
En su lugar, solo me centraré en un factor crucial a tener en cuenta al elegir un complemento de optimización de imágenes:
La optimización de imágenes debe hacerse en la nube, es decir, no en su servidor . De esa forma, su infraestructura no se ocupará de operaciones pesadas como la compresión y el cambio de tamaño.
Por ejemplo, un complemento de optimización de imágenes que se ejecuta en el mismo servidor que el CMS probablemente requerirá tiempo de CPU adicional para cambiar el tamaño y comprimir las imágenes. Por otro lado, un servicio basado en la nube (como NitroPack) hace el trabajo pesado por usted al optimizar las imágenes en la nube y entregarlas a través de una CDN.
Siempre tenga en cuenta la sobrecarga que cada complemento agrega a sus servidores. Algunos complementos pesados en realidad pueden hacer que su sitio web sea más lento al aumentar la cantidad de código que debe ejecutarse.
Optimización de imágenes y Core Web Vitals de Google
Si te preocupa el SEO, probablemente también te interese Core Web Vitals.
Dos de los tres Core Web Vitals - Largest Contentful Paint (LCP) y Cumulative Layout Shift (CLS) - pueden verse enormemente afectados por la optimización de imágenes.
Este es el por qué:
LCP mide el tiempo que tarda en aparecer en una página el elemento superior del pliegue más grande. Ese elemento suele ser una imagen. Si la imagen no está optimizada y entregada rápidamente, LCP recibe un golpe, lo que podría resultar en un bajo rendimiento de Core Web Vitals;
CLS mide la estabilidad visual de una página. Cuando las imágenes no tienen dimensiones (atributos de ancho y alto ), el navegador no sabe cuánto espacio asignarles por adelantado. Esto da como resultado cambios de diseño inesperados cuando las imágenes aparecen en la pantalla, lo que empeora su puntaje CLS.
Prácticamente todas las técnicas discutidas en este artículo pueden mejorar LCP o CLS de alguna manera. Para algunos sitios web, la optimización de imágenes por sí sola puede ser la diferencia entre aprobar y reprobar la evaluación Core Web Vitals.
Sin embargo, una palabra de precaución cuando se trata de carga diferida:
La carga perezosa de imágenes sin reservar suficiente espacio para ellas es una receta para el desastre.
Recuerde, las imágenes diferidas aparecen cuando los usuarios se desplazan hasta ellas. Si no hay suficiente espacio asignado por adelantado (por ejemplo, a través de un marcador de posición), habrá un gran cambio de diseño cuando la imagen aparezca en la pantalla. Nuevamente, esto puede arruinar su puntaje CLS y la experiencia de los visitantes.
Hay diferentes formas de cargar imágenes de forma diferida y reservar espacio para ellas. Para obtener más detalles, consulte nuestro artículo sobre el aplazamiento de imágenes fuera de pantalla.
Pensamientos finales
Ahora que comprende lo que puede hacer la optimización de imágenes, permítame reiterar tres puntos cruciales:
Primero, cuando se trata de SEO, siempre siga las mejores prácticas de Google para trabajar con imágenes. Realmente no necesitas un gurú aquí. Google te da toda la información gratis;
En segundo lugar, no tenga miedo de eliminar imágenes si no ayudan a su resultado final. Sé que eliminar imágenes siempre parece demasiado fácil de trabajar. Pero lo hace;
Por último, considere usar una herramienta para automatizar el aspecto de rendimiento de la optimización de imágenes para usted. Hacer todo a mano puede estar bien para un sitio web pequeño, pero a medida que agrega más y más imágenes, cambiar el tamaño, comprimir y cambiar los tipos de imágenes consume mucho tiempo.
Por ejemplo, esto es lo que NitroPack puede hacer por usted:
Compresión de imágenes. De forma predeterminada, NitroPack utiliza compresión con pérdida para reducir el tamaño del archivo de imagen. También puede ajustar manualmente la calidad de la imagen desde la Configuración avanzada;
Conversión WebP. Para todos los navegadores que ofrecen compatibilidad con WebP, NitroPack ofrecerá una versión WebP de sus imágenes;
Tamaño de imagen preventivo. NitroPack resuelve el problema de la falta de atributos de ancho y alto sin agregarlos. Esto acelera el renderizado y reduce los cambios de diseño;
Tamaño de imagen adaptativo (disponible en versión preliminar). Esta característica asegura que las imágenes coincidan y no desborden sus contenedores;
NitroPack también viene con un CDN incorporado y automáticamente carga de forma diferida todas las imágenes, videos e iFrames.
Finalmente, NitroPack tiene todo lo que necesita para un sitio web rápido.
Si desea probar todas estas funciones, regístrese hoy para obtener un plan NitroPack gratuito (no se requiere tarjeta de crédito).