Cómo optimizar tus imágenes para WordPress

Hay muchas razones por las que debería (y debería) incluir imágenes en su contenido de WordPress. Las imágenes ayudan a mantener a tus lectores interesados. También son una forma de dividir piezas largas de contenido y mejorar la optimización de motores de búsqueda (SEO). Sin embargo, también pueden ralentizar su sitio web.

Afortunadamente, hay bastantes recursos disponibles que pueden ayudarte a optimizar tus imágenes. Esto significa que es más probable que supere las velocidades de página lentas que pueden ser perjudiciales para el éxito general de su sitio web.

En este artículo, veremos por qué las imágenes grandes pueden estar arrastrando su sitio hacia abajo. Luego exploraremos cómo comprimir de manera efectiva sus archivos multimedia, junto con algunos consejos fundamentales de optimización de imágenes que pueden mejorar el SEO de su sitio.

Por qué debería optimizar sus imágenes para WordPress

Las imágenes son una pieza valiosa e importante de cualquier estrategia de contenido. Sin embargo, también pueden ser una de las principales causas de los lentos tiempos de carga de las páginas.

Un sitio web lento es un problema, porque puede ahuyentar a los usuarios. De hecho, las páginas que tardan cinco segundos o más en cargarse ven en promedio un aumento del 90 por ciento en la probabilidad de que un usuario rebote (se vaya después de ver una sola página).

Si bien existen múltiples factores que pueden ralentizar su sitio, las imágenes y los archivos multimedia ocupan un considerable 63 por ciento del ancho de banda en los sitios web modernos. En consecuencia, es importante optimizar las imágenes que carga en su sitio.

También vale la pena señalar que la velocidad del sitio es un factor de clasificación de Google. Esto significa que qué tan rápido o lento cargue su página determinará, en cierta medida, qué tan bien se clasifica en los resultados de búsqueda. Hay muchos factores que influyen en su PageRank, y las imágenes se incluyen en la categoría "Usabilidad de las páginas web".

La optimización de imágenes se trata realmente de mejorar dos cosas:

• El número de bytes utilizados para codificar cada píxel de la imagen.
• El número total de píxeles utilizados.

En otras palabras, optimizar significa que está obteniendo la mejor calidad posible con la menor cantidad de píxeles y bytes. Esto reduce el tamaño de los archivos multimedia y puede tener un impacto significativo en la velocidad general de su sitio.

Optimice sus imágenes antes de subirlas a WordPress

En última instancia, el mejor de los casos para su sitio web es que optimice sus imágenes antes de cargarlas. Esto es para que no termine con duplicados o múltiples versiones de una imagen. Eso frustraría el propósito de aligerar la carga de su sitio web a través de la optimización de imágenes.

Con eso en mente, veamos algunas de las consideraciones que deberá tener en cuenta al decidir cómo optimizar los medios de su sitio.

Formatos de archivo de imagen

Para comenzar, echemos un vistazo a los distintos tipos de formatos de imagen que existen. Comprender cómo cada uno de ellos es diferente y cuándo es mejor usarlos puede ayudarlo a avanzar hacia un uso más optimizado de las imágenes.

Los dos formatos de imagen más comunes utilizados en línea son JPEG y PNG. Ambos formatos están hechos de píxeles. Los píxeles se estiran cuando cambia el tamaño de una imagen, lo que a veces puede hacerla borrosa. Sin embargo, estos tipos de imágenes tienen diferentes fortalezas y debilidades.

Cuándo usar archivos JPEG

Los archivos JPEG son una buena opción tanto para contenido impreso como web. Este tipo de archivo de imagen utiliza lo que se denomina formato 'con pérdida'. Cuando una imagen más grande se convierte a JPEG, parte de la información contenida en su archivo se pierde.

Esa información no es necesaria simplemente para mostrar la imagen. Sin embargo, lo que sí significa es que la conversión a JPEG da como resultado un tamaño de archivo más pequeño, pero puede haber algún sacrificio en la calidad general de la imagen. Afortunadamente, la reducción de la calidad no se nota demasiado, especialmente en las imágenes más pequeñas.

Cuándo usar PNG

Los archivos PNG también son útiles para el contenido web, al igual que los archivos JPEG, pero de forma diferente. Dado que los PNG pueden tener fondos transparentes, por ejemplo, son más versátiles y útiles para diseñar gráficos web.

Los PNG usan un formato de archivo 'sin pérdidas'. Esto significa que toda la información sobre la imagen se conserva cuando se comprime el archivo. Como resultado, tienden a ser de mayor calidad, pero ofrecen una mejora menor en el tamaño de los archivos y la velocidad de las páginas. Son una buena opción para gráficos e íconos, y para imágenes de muy alta calidad.

Tamaño de la imagen

Es hora de cortar la hinchazón. Entregar imágenes escaladas es una de las formas más simples y efectivas de optimizar sus imágenes. ¿Por qué tan efectivo? El escalado de imágenes garantizará que no envíe más píxeles de los necesarios para mostrar el activo en el tamaño previsto en el navegador.

Muchos sitios intentan entregar imágenes grandes sin escala y dependen del navegador para cambiar su tamaño, lo que resulta en el uso de recursos adicionales y una velocidad más lenta del sitio. Si el tamaño natural de la imagen es de 820 × 820 píxeles y el navegador la muestra como 400 × 400 píxeles... ¡son 32 400 píxeles innecesarios!

La claridad y la velocidad a la que se carga una página tiene mucho que ver con el dispositivo en el que se muestra la imagen (móvil, escritorio, etc.). Por ejemplo, una imagen de 4k puede verse bien en su monitor de 27 pulgadas.

Sin embargo, cuando un visitante carga una página con esa imagen, el navegador mostrará primero el archivo a su máxima resolución y luego lo reducirá para que quepa en su pantalla. Si están usando un dispositivo móvil que no tiene capacidad para más de 400 píxeles, es probable que se pierdan su contenido.

Con eso en mente, algunas de las mejores prácticas al exportar sus imágenes incluyen:

• Mantenga el tamaño de los archivos de su imagen por debajo de un par de cientos de kilobytes, guardándolos como archivos JPEG o PNG "optimizados para la web".
• El estándar web para imágenes es de 72 puntos por pulgada (dpi), que se puede lograr guardando las imágenes en el formato prescrito anteriormente.

Puede usar Photoshop, Lightroom o un editor similar para reducir el tamaño de la imagen a alrededor de 1500 píxeles o menos de ancho. En Photoshop, simplemente vaya a Imagen > Tamaño de imagen para ajustar manualmente las dimensiones y la resolución de su imagen. También puede ir a Archivo > Exportar > Guardar para web para optimizar sus imágenes para cargarlas en la web:

Si no pretende mostrar fotos nítidas y vívidas en un monitor más grande, puede reducir aún más el tamaño de la imagen.

Si trabaja con Lightroom, vaya a Archivo > Exportar para ajustar manualmente el tamaño de la imagen al exportarla:

El tamaño y la resolución de la imagen son solo una parte del rompecabezas. Cuando se trata de optimizar sus imágenes, también querrá comprender la compresión y usarla de manera efectiva.

Compresión de imagen

En pocas palabras, la compresión de imágenes es una forma de minimizar el tamaño (en bytes) de un archivo gráfico, sin degradar la calidad de la imagen a un nivel inaceptable. Como hemos discutido, las imágenes de alta resolución que son innecesariamente grandes en tamaño de archivo pueden afectar dramáticamente la velocidad de la página.

Por otro lado, las imágenes optimizadas son un 40 por ciento más claras que las imágenes no optimizadas en promedio. Como regla general, querrá optimizar todas las imágenes y otros medios que cargue en su sitio web, ya sea antes o durante el proceso de carga.

Compresión con pérdida frente a sin pérdida

Como mencionamos anteriormente, los archivos JPEG y PNG utilizan dos tipos diferentes de compresión de imágenes. La compresión sin pérdidas conserva todos los datos del archivo original, sin sacrificar la calidad.

Con la compresión sin pérdida, normalmente se divide un archivo en una forma "más pequeña" para su transmisión o almacenamiento. Luego, la información se vuelve a juntar en el otro extremo, para que pueda usarse nuevamente.

Por otro lado, la compresión con pérdida elimina algunos de los datos contenidos en el archivo de imagen. Esto puede dar como resultado una mayor caída en la calidad, pero también una mejora más significativa en la velocidad de la página. Incluso puede personalizar la cantidad de compresión para lograr un equilibrio entre calidad y rendimiento.

Complementos de compresión de imágenes

Las imágenes cargadas rápidamente significan un sitio más rápido y un mejor SEO. Aquí hay varios complementos de optimización de imágenes para ayudarlo con la compresión de imágenes.

Compresión y optimización de imágenes Smush

El complemento de compresión de imágenes de Smush funciona para cambiar el tamaño, optimizar y comprimir todas sus imágenes para la web, por lo que se cargan más rápido que antes. Si su sitio es rico en fotografías, entonces este complemento es imprescindible.

Optimizador de imágenes de píxeles cortos

El complemento Image Optimizer de ShortPixel comprime todas las imágenes pasadas y futuras y los archivos PDF cargados en su biblioteca de medios. El complemento proporciona compresión con pérdida y sin pérdida para la mayoría de los tipos de archivos. Si es fotógrafo, puede optar por la compresión JPEG brillante, que utiliza un algoritmo de optimización con pérdida de alta calidad.

Comprimir imágenes JPEG y PNG

¿Busca optimizar archivos JPEG y PNG? Este complemento utiliza los servicios de compresión de imágenes TinyJPG y TinyPNG para ayudarlo con la compresión de imágenes. En promedio, las imágenes JPEG se comprimen entre un 40 y un 60 por ciento, y las imágenes PNG entre un 50 y un 80 por ciento, sin una pérdida visible de calidad.

Optimizador de imágenes EWWW

EWWW Image Optimizer cumple una doble función. Optimiza las imágenes existentes en su sitio y también se ocupa de las nuevas que cargue. Además, le brinda mucho control sobre cómo (y cuánto) se comprimen sus imágenes.

Optimizador de imágenes de Kraken.io

Por último, pero no menos importante, Kraken.io Image Optimizer también es útil para optimizar medios nuevos y existentes. Es compatible con la compresión con pérdida "inteligente" y sin pérdidas, lo que facilita la obtención de imágenes de alta calidad con archivos de menor tamaño.

Foto principal

La imagen destacada no se inserta en el cuerpo de una publicación de WordPress, pero se usa estructuralmente en todo el tema. Puede aparecer como una miniatura junto al título de la publicación, por ejemplo, o en el encabezado al ver una publicación en particular.

La mayoría de los temas y widgets se basan en imágenes destacadas, por lo que no es algo que desee omitir. Las imágenes destacadas permiten una mayor personalización; tendrá la capacidad de mostrar imágenes de encabezado personalizadas únicas para publicaciones y páginas específicas, o establecer miniaturas para características especiales de su tema.

Una vez que haya decidido el tamaño que desea que tenga su imagen destacada, ese tamaño permanecerá establecido para todas las imágenes destacadas futuras. El tamaño que debe seleccionar depende del tema de su sitio de WordPress y el diseño de sus publicaciones.

Las imágenes destacadas suelen ser más anchas que altas, y oscilan entre 500 y 900 píxeles de ancho. También es mejor elegir una imagen de alta resolución y no una que esté pixelada.

Consejo profesional: para controlar los medios que se muestran cada vez que se comparte una publicación o una página en Facebook o Twitter, instale el complemento Yoast SEO. No solo podrá personalizar el título y la descripción, sino también cargar los tamaños de imagen correctos para cada canal social.

Optimice sus imágenes después de subirlas a WordPress

Recomendamos optimizar sus imágenes antes de subirlas. Sin embargo, si eso no es posible, o si desea optimizar las imágenes que ya están en su sitio, aún puede hacerlo. Existen algunos métodos que pueden ayudarlo a optimizar su contenido en vivo.

Imágenes de carga diferida

Normalmente cuando alguien visita una página web, todo su contenido comienza a cargarse. Esto significa que, para una página con mucho contenido, todo puede tardar un tiempo en aparecer.

La 'carga diferida' implica ajustar la forma en que su sitio carga el contenido. Le indica a su sitio que se concentre en cargar primero el texto, las imágenes y otros elementos que son inmediatamente visibles. Solo después de eso, comenzará a cargar contenido al que solo se puede acceder desplazándose hacia abajo en la página. Esta es una excelente manera de acelerar su sitio y mejorar la experiencia de sus visitantes.

La forma más fácil de agregar carga diferida a su sitio es a través de un complemento como Lazy Load.

Esta es una herramienta de WP Rocket que ayuda a reducir el volumen de solicitudes enviadas al servidor web de su sitio a la vez. Incluso sustituye las imágenes de marcador de posición por videos de YouTube, de modo que el video real solo se cargue según sea necesario.

Imágenes de caché

Otra forma de mejorar la velocidad en su sitio es a través del 'almacenamiento en caché'. Esto implica guardar algunos de los datos de su sitio en un lugar al que sea más fácil y rápido acceder para un visitante, a menudo en un servidor de terceros más cercano a donde están ubicados o en su navegador.

Hay muchas formas de lograr el almacenamiento en caché a través de codificación, complementos y otras herramientas. Aquí en WP Engine, implementamos un almacenamiento en caché robusto en todos nuestros sitios de forma predeterminada. Esto es beneficioso para reducir el impacto que todo su contenido tiene en la velocidad de la página, no solo en sus imágenes.

Eliminar datos EXIF

Los datos EXIF ​​se almacenan como parte de un archivo de imagen y contienen información sobre dónde y cómo se tomó una foto. Las cámaras lo agregan automáticamente a las imágenes y, por lo general, no es necesario para sus archivos web.

Por lo tanto, eliminar estos datos de sus imágenes puede acelerar sus páginas, aunque no es probable que el impacto sea enorme. Desafortunadamente, actualmente no hay complementos actualizados que puedan ayudarlo a hacer esto. Entonces, si usa muchas fotografías en su sitio y le preocupan los datos EXIF, querrá comunicarse con un desarrollador para obtener ayuda.

Evite los redireccionamientos de URL de imágenes

Finalmente, otro elemento que puede ralentizar tus páginas es cuando tus imágenes provocan redireccionamientos. Esto sucede más comúnmente cuando se vinculan a otro lugar.

Por esa razón, debes evitar incrustar imágenes de fuentes externas en tu sitio. En su lugar, guarde y cargue cada imagen o elemento multimedia directamente en su sitio si es posible. También es posible que desee asegurarse de que sus imágenes no se vinculen a nada, como una página de medios separada.

Optimización de imágenes para motores de búsqueda

Dar formato a los títulos de las imágenes es otro paso importante en la optimización de imágenes. Esto significa que el nombre del archivo de imagen es relevante para su contenido. Cuando haces esto, es más probable que aparezcan en los resultados de búsqueda de imágenes relacionadas a través de los motores de búsqueda.

Esto aumentará la visibilidad y la accesibilidad de su marca, así como el tráfico a su sitio, ya que las imágenes de su sitio aparecerán con mayor frecuencia en las búsquedas de imágenes de Google. La optimización de imágenes lleva muy poco tiempo y puede marcar una gran diferencia en el tráfico de su sitio.

Aquí hay algunos consejos adicionales para ayudar a que sus imágenes se clasifiquen más alto.

Texto alternativo

El texto alternativo, también conocido como 'texto alternativo' o 'etiqueta alternativa', es un atributo agregado a una imagen en HTML. El texto alternativo ayuda a los motores de búsqueda a comprender de qué se trata su imagen, describiendo qué incluye y cuál es su propósito.

Google se basa en el texto alternativo para determinar qué es una imagen, ya que todo lo que 've' es lo que hay en la etiqueta HTML. Cuando utiliza texto alternativo fuerte y descriptivo para sus imágenes, es más probable que vea su sitio en la lista adecuada en los resultados de búsqueda.

En WordPress, puede agregar texto alternativo a sus imágenes de dos maneras. Primero, puede agregarlo a las imágenes que se han colocado en publicaciones, haciendo clic en la imagen y usando la opción Configuración de imagen en el lado derecho de la pantalla.

Alternativamente, también puede agregar texto alternativo a una imagen visitando Medios > Biblioteca y eligiendo la imagen que desee. Luego, simplemente agregue su texto alternativo al campo Texto alternativo para esa imagen.

Etiquetas de título

Las etiquetas de título son similares a las etiquetas alt, pero son para lectores humanos, no para los robots de los motores de búsqueda. Una buena optimización de la etiqueta del título puede ayudar a los usuarios con problemas de visión a acceder a su sitio web.

Crear mapas de sitio de imágenes XML

Otra forma de hacer que sus imágenes sean notadas por Google es crear un mapa del sitio y enviarlo. Esta es una buena opción para las imágenes que los motores de búsqueda no pueden rastrear.

Estamos hablando de imágenes cargadas por JavaScript, por ejemplo. Los sitemaps brindan a los motores de búsqueda más información sobre las imágenes disponibles en su sitio, para que puedan comprender e indexar su contenido con mayor precisión.

En WordPress, los siguientes complementos pueden ayudarlo a crear un mapa del sitio:

• Mapas de sitio XML de Google
• Yoast SEO
• Paquete SEO todo en uno
• Udinra Todas las imágenes Mapa del sitio

Para los sitios web que no son de WordPress, también existen herramientas que pueden ayudar a crear un mapa del sitio, incluidos Screaming Frog, Dynomapper y más. Una vez que haya creado un mapa del sitio, querrá enviarlo a través de las herramientas para webmasters de Google.

Colocación de imágenes y subtítulos

Por último, pero no menos importante, echemos un vistazo a la ubicación de las imágenes dentro de una publicación de blog o página web. El lugar donde coloca sus imágenes dentro de una publicación puede tener un impacto significativo en su clasificación en Google.

Por ejemplo, si coloca una imagen más cerca de sus frases de palabras clave, es probable que se clasifique mejor. Además, tenga en cuenta que agregar una leyenda rica en palabras clave a su imagen cuenta como texto de búsqueda y puede ayudar a mejorar el SEO de la imagen.

Optimice su sitio web de WordPress con WP Engine

La optimización de imágenes cubre mucho terreno cuando se trata de mejorar su sitio web. La optimización puede ayudar a mejorar las experiencias de los usuarios y mantener los tiempos de carga por debajo de esa marca de cinco segundos. Aquí en WP Engine, entendemos el valor que la optimización de imágenes aporta a su sitio web. Es por eso que ofrecemos entornos de alojamiento de WordPress gestionados especializados. ¡Esto significa que tendrá soporte experto y herramientas y recursos de optimización completos al alcance de su mano!