9 consejos para optimizar sus imágenes en WordPress

¿No está seguro de cómo optimizar sus imágenes en WordPress? Las imágenes que usa en su sitio de WordPress juegan un papel clave en la rapidez con la que se está cargando su sitio, así como un papel más bajo en la optimización de su sitio (SEO). Según el archivo HTTP, el tamaño del archivo de una página web promedio es de aproximadamente 50% de imágenes, ¡y la página promedio usa 26 imágenes! Encontrar una forma de optimizar y reducir estas imágenes puede traer grandes dividendos para el tiempo de carga de su sitio, pero no es solo la optimización de la imagen de velocidad también puede ayudarlo a obtener más tráfico. Más del 20% de todas las búsquedas web de EE. UU. Se llevan a cabo en Google Image Search, por lo que optimizar las imágenes de su sitio web de WordPress. Hay una excelente manera de comunicarse con más personas.
En esta publicación, le mostraremos cómo optimizar todos los aspectos de las imágenes de WordPress. Cubriremos nueve consejos clave para ayudarlo a optimizar las imágenes de su sitio de rendimiento, SEO, accesibilidad y solo la experiencia general del usuario. ¡Penetamos! Cómo optimizar las imágenes en WordPress: 9 Consejos de rendimiento Comenzaremos con consejos enfocados en hacer que sus fotos se carguen en WordPress. Luego pasaremos a los consejos que están más enfocados en el SEO y la accesibilidad. 1. Comprima las imágenes para reducir el tamaño del archivo La compresión de la imagen le permite reducir el tamaño del archivo de una imagen sin cambiar su tamaño, lo que lo convierte en una excelente manera de acelerar el tiempo de carga de su sitio y optimizar sus imágenes .
Tiene dos opciones de compresión:
Sin pérdida: una pequeña reducción en el tamaño del archivo con cero cambio de calidad de imagen. Puede haber un pequeño cambio en la calidad, pero generalmente no es visible para el ojo humano a menos que use un algoritmo de compresión agresivo.
Obtenga más información sobre la compresión de VS pérdidas sin pérdida. Para la mayoría de los sitios web y blogs, la compresión de pérdidas es la mejor opción. Las excepciones serían fotógrafos u otros artistas visuales en los que la calidad de la imagen es primordial.
Para comprimir fácilmente las imágenes en su sitio de WordPress, puede usar el complemento de Imagify gratuito. Imagify comprimirá automáticamente las nuevas imágenes que cargue en su sitio y también le permitirá optimizar las imágenes existentes. Podrá elegir entre tres niveles de compresión: sin pérdidas y dos pérdidas:
¿Qué tan grande es la diferencia? Tomé una imagen JPEG sin comprimir de 326 kb y usé la compresión de pérdida de Imagify para optimizarla. Después de que Imagify comprimió la imagen, el tamaño del archivo disminuyó en un 77% a 74 kb.

2. Cambie las imágenes para reducir aún más el tamaño del archivo La mayoría de los sitios web solo tienen zonas de contenido que tienen un ancho de 700-1,000 PX. Por ejemplo, el área de contenido en el blog que lee ahora es solo ~ 750 PX (en el escritorio).

Si carga imágenes significativamente más grandes que el área de contenido de su sitio web, no se beneficie de la calidad de la imagen, pero aumente el tamaño del tamaño de la imagen. Todas las cosas son iguales, una imagen que tiene 3.000 PX de ancho tiene un tamaño de archivo mucho más grande que una imagen que tiene 1,000 PX de ancho. Por esta razón, siempre desea cambiar el tamaño de las imágenes de su sitio de WordPress a las dimensiones que está utilizando. Si el área de contenido de su blog es de 750 px, significa que debe cambiar el tamaño de las imágenes a 750 PX (o puede duplicarla a 1,500 PX si desea proporcionar imágenes de alta calidad para pantallas de retina). Para cambiar el tamaño automáticamente de las imágenes En la medida, los carga en su sitio de WordPress, puede usar el mismo complemento Imagify anterior. Al igual que con la compresión, puede usar Imagify para cambiar el tamaño en el bloque todas las imágenes existentes en su sitio.
¿Qué tan grande es la diferencia? Restemule una imagen JPEG que tenía un ancho de 3.000 PX a 1,500 px. El tamaño inicial del archivo fue de 1.325 MB, pero disminuyó a 633 kb después de su cambio de tamaño (y disminuyó aún más a 408.7 kb después de usar Imagify para comprimirlo). Si desea averiguar cómo usar Imagify para comprimir en el bloque y cambiar el tamaño de las imágenes en su sitio de WordPress, consulte nuestra guía completa sobre cómo comprimir y cambiar el tamaño de las imágenes en el bloque.
3. Elija el formato de imagen correcto para una calidad óptima y tamaño de imagen Otro aspecto importante para el rendimiento es el formato de archivo para sus imágenes, los dos formatos más comunes son:

PNG: esto es útil para imágenes sin muchos colores, como capturas de pantalla de interfaz. También permite la transparencia que puede ser útil en ciertas situaciones, como logotipos o iconos. Sin embargo, las dimensiones del archivo pueden volverse lo suficientemente grandes como para imágenes coloridas, por lo que no desea usar PNG para fotos.jpeg: este formato es el mejor para imágenes de colores, como imágenes de una puesta de sol u otras fotos. Para estos casos de uso, generalmente resulta en archivos mucho más pequeños que PNG. Sin embargo, JPEG no acepta la transparencia como PNG, por lo que probablemente no quiera usarla para logotipos e iconos.
SVG: si desea usar un gráfico vectorial, debe usar este formato. Es perfecto para logotipos, iconos y otros tipos de gráficos que se hacen con vectores. Si no tiene un logotipo, consulte al generador de logotipo gratuito de Turbologo. Es una forma simple de crear imágenes de calidad profesional, que se ven muy bien en cualquier resolución y se pueden personalizar en unos segundos. Solo pagará si está satisfecho con su nuevo logotipo.
En resumen, querrá usar JPEG para fotos u otras imágenes realistas y coloridas, mientras que PNG puede ser una buena opción para capturas de pantalla de interfaz, iconos, imágenes de texto pesadas u otras imágenes en las que necesita transparencia. SVG funciona mejor para gráficos vectoriales.
Para archivos aún más pequeños, también puede considerar el uso de formatos de archivo de imagen modernos, como WebP. WebP es un formato más nuevo de Google, que ofrece archivos más pequeños que los formatos JPEG y PNG, pero con la misma calidad: puede obtener más información sobre WebP aquí. En promedio, la conversión de WebP puede reducir el tamaño de las imágenes JPEG en un 25-34% y un 26% de imágenes PNG. WebP también tiene las mejores partes de JPEG y PNG: puede usarlo para enormes archivos de archivos, pero también aceptar transparencia como las imágenes de PNG. En 2021, todos los navegadores principales aceptan imágenes webp, lo que significa que puede convertir las imágenes de manera segura en las imágenes de forma segura en El formato WebP para obtener estos descuentos en tamaño de archivo. Si desea usar WebP en WordPress, Imagify Plugin también puede ayudarlo a convertir todas las imágenes nuevas y existentes de su sitio web y transmitir esas imágenes a los visitantes cuya Browsere acepta WebP:
WordPress también agregará soporte básico para las imágenes WebP en WordPress 5.8, que se lanzará a fines de julio de 2021. Esto significa que podrá cargar imágenes webp directamente en su biblioteca de medios e incluirlas en el contenido, al tipo de contenido como imágenes PNG o JPEG. Antes de WordPress 5.8, la biblioteca de medios de WordPress no permitía las cargas webp.
4. Use la carga perezosa para mejorar el tiempo de carga de la página inicial La carga perezosa le permite retrasar la carga de las imágenes que están fuera de la cara de visualización visible de un visitante (también conocido como “debajo del pliegue”).Al principio, su sitio solo cargará las imágenes necesarias para reproducir la parte visible de su página. Luego, una vez que una persona comience a desplazarse hacia abajo, su servidor cargará cada imagen según sea necesario.Al retrasar la carga de algunas de sus imágenes en WordPress, puede acelerar el tiempo de carga inicial de su sitio. WordPress 5.5 ahora acepta el atributo de carga perezosa del navegador nativo, lo que significa que sus imágenes usarán automáticamente la carga perezosa en los navegadores. Que lo aceptan. .Sin embargo, hay un problema, a diferencia de las imágenes de WebP, ¡no todos los principales navegadores aceptan este atributo!
El navegador Safari de Apple no acepta carga nativa perezosa ni macOS ni iOS. Otros navegadores, como Mobile y UC Browser Opera, no tienen soporte. Actualmente, solo alrededor del 71% de los usuarios de Internet tienen un navegador que acepta la carga perezosa nativa. Si desea asegurarse de que todos sus visitantes puedan beneficiarse de la carga perezosa, puede usar un complemento gratuito como la carga perezosa. O bien, muchos complementos de rendimiento también incluyen funciones de carga perezosa como WP Rocket. 5. Defina las dimensiones de la imagen para evitar cambiar la apariencia con la nueva iniciativa de Google Core Web Vitals, Google se centra en el cambio de diseño acumulativo (CLS) como una medida que los webmasters deben evitar. Esencialmente, CLS ocurre cuando el contenido de su sitio “salta” a medida que se carga. Esto es problemático porque causa una mala experiencia del usuario. Si no tiene cuidado, esto puede suceder con las imágenes que se cargan de acuerdo con el contenido de texto en su sitio. A medida que se carga la imagen, empujará el texto hacia abajo, causando CLS. Una forma de evitar problemas y mejorar el cambio de la apariencia acumulada es definir las dimensiones de sus imágenes en su código de sitio. Por lo tanto, los navegadores de los visitantes sabrán cómo reservar ese espacio incluso si la imagen aún no se ha cargado, lo que evita los cls. Afortunadamente, WordPress puede ayudarlo a hacer esto. Si inserta imágenes a través del editor de WordPress, WordPress definirá automáticamente las dimensiones de imagen correctas para usted. Lo mismo es cierto para la mayoría de las páginas.
Sin embargo, si usa imágenes en otros lugares, como agregarlas manualmente por código, es importante establecer siempre el tamaño de la imagen para evitar problemas con CLS. Si no se siente cómodo especificando las dimensiones de la imagen directamente en el código, puede usar un complemento gratuito como especifique las dimensiones de la imagen que falta. O bien, WP Rocket también ofrece una característica para ayudarlo a hacerlo en la pestaña de medios de su configuración. 6. Use una red de entrega de contenido (CDN) para acelerar los tiempos de carga globales es un tipo de punto de bonificación porque no se aplicará a todos los sitios. Pero si tiene una audiencia global, un CDN puede acelerar los tiempos de carga de la imagen acortando la distancia entre los visitantes de su sitio y los archivos que necesita descargar. Un CDN es esencialmente solo una gran red de servidores globales. Si configura WordPress para usar uno, puede almacenar las imágenes de su sitio en cada servidor de red en caché. Luego, cuando alguien visita su sitio, su navegador puede descargar las imágenes desde la ubicación de CDN más cercana, en lugar de tener que descargarlas directamente desde el servidor de su sitio reduciendo la distancia física, los archivos de imagen se cargarán más rápido, lo que acelerará su sitio en general. Si tiene un presupuesto bajo, puede encontrar CDN de imagen gratuita, como la función del sitio del acelerador de JetPack, alimentada por la red de servidores de WordPress.com. O, para opciones más flexibles, puede usar servicios de CDN pagados como: Rocketcdn

Keycdn

Conejito CDN
En el caso de los CDN pagados, puede integrarlos con su sitio de WordPress utilizando complementos como el habilitador CDN o el cohete WP. 7. Use los nombres de archivos relevantes para mejorar el SEO para las imágenes ahora, comenzaremos a pasar a más consejos de SEO para optimizar las imágenes de WordPress, comenzando con sus archivos reales. Antes de cargar imágenes en WordPress, debe asegurarse de que el nombre del archivo de cada imagen sea relevante para el contenido de esa imagen. Por ejemplo, suponga que está cargando una imagen de una montaña nevada. En lugar de usar un nombre de archivo aleatorio como 66FSDFS651.jpeg, debe usar un nombre de archivo descriptivo como nieve-montain.jpeg. Con un nombre de archivo relevante, le dará a sus imágenes una mejor oportunidad de clasificar la imagen de Google, porque Google tiene un contexto adicional para describir la imagen. 8. Establezca el texto alternativo de la imagen para mejorar el SEO y la accesibilidad El texto de la imagen alternativa ayuda a proporcionar información adicional sobre una imagen. También es genial hacer que su sitio sea más accesible, porque ayuda a los visitantes que usan lectores de pantalla a comprender la imagen. Para agregar texto alternativo a una imagen en el editor de WordPress, puede seleccionar el bloque de imágenes y usar el otro texto de la configuración del bloque:
También puede considerar el uso de títulos y leyendas, que son otras dos formas de agregar contexto basado en sus imágenes. Está buscando imágenes de Google, puede considerar crear un mapa del sitio de imagen XML dedicado.Este tipo de mapa del sitio es el mismo que el mapa del sitio XML que enumera todas las publicaciones y páginas de su sitio, pero incluye una lista de todas las imágenes de su sitio, como Yoast SEO y Rank Math, insertará automáticamente imágenes en los mapas del sitio, por lo que usted es usted. Es posible que desee usar sus funciones XML Sitemap en lugar de la función incorporada que WordPress agregó en la versión 5.5.¿Quieres saber más sobre la optimización de imágenes de SEO?