Cómo optimizar imágenes para WordPress [Guía definitiva]

Si tiene un sitio de WordPress, es consciente de las dificultades de mantenerlo. A veces, puede pasar horas en algo que debería tomar solo unos minutos para lograrlo. Esto puede ocurrir si su sitio es lento e inflado debido a imágenes demasiado grandes o mal optimizadas.

Además, el uso de técnicas de optimización de motores de búsqueda ayudará a los visitantes a encontrarlo y mantenerlos en su sitio web. Optimizar sus imágenes para la web es una de esas prácticas.

Considere cada píxel como un área posible de optimización cada vez que diseñe o edite una imagen. Se necesita tiempo y esfuerzo para considerar los píxeles como piezas individuales, pero vale la pena el esfuerzo.

Sin embargo, hay varias formas de optimizar las imágenes en WordPress. Recuerda que el objetivo es reducir el tamaño del archivo sin comprometer la calidad de la imagen.

Esta publicación le enseñará cómo optimizar sus imágenes de WordPress y liberar más tiempo para otras actividades.

¿Qué es la optimización de imágenes?

Es un proceso de reducción del tamaño del archivo de una imagen sin afectar su calidad y aplicando técnicas adecuadas de SEO de imágenes. Las imágenes optimizadas son más fáciles de almacenar en un disco duro o subir a Internet. Además, tiene menos problemas potenciales debido a las bajas velocidades de descarga.

El tamaño de sus imágenes tiene un impacto significativo en el tiempo de carga de su sitio web. En general, cuanto más grande sea la imagen, más tiempo tardará en cargarse el navegador del visitante. Puede ser frustrante para sus visitantes y puede llevarlos a abandonar su sitio web.

Debe seguir algunos consejos de optimización esenciales para asegurarse de que sus imágenes estén optimizadas para el rendimiento.

Beneficios de la optimización de imágenes

Para convertirse en un webmaster exitoso, debe comprender cómo funcionan las imágenes en un sitio web. También es posible que deba optimizar algunas imágenes de vez en cuando.

Los beneficios de la optimización de imágenes son:

• Tiempos de carga de página más rápidos: las imágenes optimizadas se cargan rápidamente, lo que se traduce en un sitio de carga más rápida. Esto es especialmente importante para los usuarios de dispositivos móviles, que tienen más probabilidades de abandonar un sitio web que tarda demasiado en cargarse.
• Posiciones SEO mejoradas: las imágenes optimizadas también ayudan a las clasificaciones SEO de su sitio. Google utiliza la velocidad de carga de su página como un factor de clasificación, por lo que optimizar sus imágenes puede ayudarlo a obtener una clasificación más alta en los resultados de búsqueda.
• Uso de ancho de banda reducido: las imágenes optimizadas usan menos ancho de banda, lo que puede ahorrarle dinero en su factura de alojamiento.
• Experiencia de usuario mejorada: un sitio web bien optimizado proporciona una mejor experiencia de usuario, con cargas de página más rápidas y un mejor rendimiento del motor de búsqueda.
• Reducción de los tiempos de descarga móvil: las imágenes optimizadas también pueden ayudar a que su sitio sea compatible con dispositivos móviles, lo que es crucial para las clasificaciones de Google en las búsquedas móviles.
• Satisfacción del cliente: una mejor experiencia de usuario aumenta la satisfacción del cliente, lo que genera mayores ventas y más clientes habituales.

14 cosas esenciales para optimizar imágenes para la web

Sería mejor considerar muchos factores al optimizar una imagen para uso web. Hay muchos tipos de archivos diferentes y varias formas diferentes de optimizarlos. Las siguientes son algunas cosas a tener en cuenta al optimizar imágenes para la web.

Calidad frente a tamaño:

La calidad de una imagen siempre es importante, pero también debe considerar el tamaño del archivo cuando se trata de optimizar para uso web. Sería mejor mantener el tamaño de archivo de sus imágenes lo más pequeño posible sin sacrificar la calidad para acelerar el tiempo de carga en las páginas web.

La resolución estándar para imágenes en la web es de 72 DPI (puntos por pulgada). Por lo tanto, se recomienda guardar las imágenes como JPG en lugar de PNG, ya que este tipo de archivo es más pequeño.

Además, sería mejor si usara la profundidad de color más baja posible sin comprometer la calidad de la imagen. La profundidad de color estándar es de 24 bits , que se puede cambiar en las propiedades del archivo.

Formato de archivo de imagen:

Para determinar qué formato de imagen elegir, es necesario comprender las diferentes imágenes y sus propósitos. Debe guardar su archivo como JPG , pero cuando optimice imágenes para la web, elija PNG-8 o PNG-24.

Generalmente, los archivos PNG son mejores para imágenes con muchos colores y fondos transparentes, mientras que los archivos JPEG son mejores para imágenes con muchos detalles.

Por lo tanto, debe usar el formato PNG para imágenes con fondos transparentes y JPEG para imágenes con mucho detalle para optimizar sus archivos de imagen para la web.

Tamaño y dimensiones del archivo:

Al optimizar una imagen para la web, dos factores principales a considerar son el tamaño del archivo y las dimensiones. Es mejor experimentar con uno de estos factores antes de cambiar el otro, para que pueda ver qué ayuda a su objetivo de tener un tamaño de archivo más pequeño o una imagen más grande.

Los archivos de imágenes grandes pueden hacer que un sitio web funcione lentamente , por lo que es necesario cambiar el tamaño de las imágenes antes de cargarlas. Las dimensiones recomendadas para las imágenes en una página web son de 600 a 800 píxeles de ancho y de 500 a 600 píxeles de alto.

Más significativo que esto probablemente hará que el navegador cambie el tamaño de la imagen, lo que resultará en una pérdida de calidad.

Rank Math es perfecto para ajustar automáticamente la resolución de sus imágenes. Agregará las dimensiones de la imagen por usted para que no tenga que preocuparse por sus dimensiones.

Mejorar el SEO de la imagen:

Cada imagen que subas a tu sitio web debe servir como fuente de información para los motores de búsqueda. Los archivos de imagen con más detalles son mejores para la optimización de motores de búsqueda.

Las prácticas de SEO de imágenes más convincentes son:

• Optimice el texto del título de la imagen: al guardar sus imágenes, asegúrese de darles títulos informativos. Aparecerá como información sobre herramientas cuando el cursor se desplace sobre la imagen. Además, es beneficioso para los motores de búsqueda aprender la imagen.
• Use etiquetas Alt: los motores de búsqueda también usan etiquetas Alt al indexar imágenes. El texto de la etiqueta alternativa debe adaptarse a cada imagen y describir lo que hay en la imagen con la mayor precisión posible.
• Utilice nombres de archivo de imagen adecuados: si es posible, los nombres de archivo de imagen también deben ser descriptivos e incluir palabras clave. Cuando trabaje con software de edición de imágenes, guarde sus imágenes con un nombre de archivo descriptivo.

Nota: si usa el complemento Rank Math WordPress, sus imágenes se optimizarán para SEO, y el nombre del archivo de imágenes y la etiqueta alt incluirán automáticamente palabras clave.

Compresión adecuada:

Este es otro factor clave a considerar al optimizar sus imágenes. Debe comprimir sus imágenes tanto como sea posible antes de subirlas al servidor.

Necesita usar una herramienta de compresión como Photoshop o GIMP para hacer esto. Alternativamente, puede usar herramientas gratuitas como TinyJPG e ImageOptim . Siempre se recomienda tener imágenes comprimidas en su sitio web para acelerar el tiempo de carga.

Alternativamente, puede usar un complemento como ShortPixel o WP-Optimize para comprimir automáticamente sus imágenes a medida que se cargan en su sitio web. Estos complementos se recomiendan para cualquiera que busque optimizar las imágenes en su sitio web.

Debe tener en cuenta los siguientes hechos al comprimir imágenes:

• Con pérdida: la compresión con pérdida es un tipo de compresión que elimina algunos datos de una imagen para reducir el tamaño del archivo. Este tipo de compresión se usa a menudo para imágenes que no tendrán ninguna pérdida notable de calidad.
• Lossless : una compresión sin pérdidas es una forma de compresión que elimina parte de la información redundante sin reducir la calidad del contenido. Este tipo de compresión se usa a menudo para imágenes que necesitan conservar su calidad después de la compresión, como imágenes JPEG sin pérdidas.

Puede conocer más detalles sobre la compresión sin pérdida de anuncios con pérdida en el blog de ShortPixel.

Sirva imágenes en formatos de próxima generación:

De forma predeterminada, los navegadores intentarán cargar las imágenes en el mismo formato en el que se guardaron. Por ejemplo, una imagen JPEG se carga cuando la URL contiene .jpg. Sin embargo, puede obligar a los navegadores a cargar un formato de imagen diferente usando la extensión de archivo correcta.

Por ejemplo, si tiene una imagen JPEG, puede cambiar la extensión a .png y el navegador cargará esa imagen.

Puede hacer esto usando el complemento de WordPress de JPG a PNG. Con este complemento, convertirá automáticamente todas sus imágenes JPG en archivos PNG. Puede seguir una guía sobre cómo convertir imágenes PNG a JPG en WordPress.

Puede encontrar fácilmente imágenes de servicio en el formato de próxima generación utilizando GtMatrix o la herramienta de información de velocidad de página de Google.

Nota: en general, es aconsejable guardar las imágenes como ambos tipos de archivos para que las vean los navegadores que reconocen diferentes extensiones de archivo. Al hacerlo, si un archivo no se carga, puede reemplazar el JPEG roto con un PNG sin tener que volver a cargar la imagen.

Combine imágenes usando CSS Sprites:

La combinación de imágenes se realizaba tradicionalmente mediante software de edición de imágenes. Sin embargo, ahora se descubre que el método de sprites CSS también podría usarse para combinar imágenes.

El proceso consiste en crear una imagen vacía y cargar las imágenes que desea combinar en diferentes posiciones. Luego, usando CSS, cada una de estas imágenes individuales se puede colocar sobre la misma área de la nueva imagen.

Por lo tanto, el navegador puede descargar un solo archivo de imagen en lugar de varias imágenes. Esto es especialmente importante para los dispositivos móviles, ya que suelen tener conexiones a Internet más lentas. Puedes hacer esto con un generador de sprites CSS.

Deshabilitar la vinculación activa de imágenes:

Vincular una imagen implica que cualquiera puede tomar sus imágenes y publicarlas en su sitio web. Como resultado, experimentará una molesta pérdida de ancho de banda ya que las imágenes se descargarán de su servidor a otro servidor. Puede evitar esto utilizando la protección de enlace activo para sus imágenes.

Puede configurar la protección de enlaces directos de imágenes a través de su cuenta de cPanel. El proceso es muy sencillo.

• Verá un icono etiquetado como Hotlink Protection en la pestaña Security.
• Haga clic en este icono para acceder a la siguiente ventana.
• Haga clic en el botón Habilitar para evitar que sus imágenes se vinculen.

Nota: si es un usuario de Cloudflare, puede evitar que sus imágenes se vinculen directamente habilitando la opción " Protección de enlace directo ".

Imágenes de caché:

Para cualquier sitio web, esto es esencial. Debe almacenar en caché sus imágenes para que las personas puedan verlas más rápidamente. En la mayoría de los casos, los visitantes del sitio web existente tienen esto almacenado en caché en su navegador, pero si hay un problema con su alojamiento, es posible que desee configurarlo por separado.

Cada vez que instala WordPress utilizando un servicio de alojamiento, el proveedor de alojamiento se encarga de todo el almacenamiento en caché por usted. También puede instalar un complemento de almacenamiento en caché.

WP Rocket es un complemento ideal para almacenar imágenes en caché, ya que es fácil de usar e instalar. Simplemente lo instala y lo activa, y luego está listo para comenzar. Por supuesto, existen otros complementos de almacenamiento en caché, pero WP Rocket es la mejor opción para este propósito.

Gravatares de caché:

Un gravatar es un pequeño ícono que sigue a tu dirección de correo electrónico en la web. Por ejemplo, cuando dejas un comentario en otro blog de WordPress, tu Gravatar aparecerá junto a él.

El servicio Gravatar genera Gravatar, que los almacena en caché en sus servidores. Por lo tanto, si comenta en una gran cantidad de blogs, o incluso en algunos de alto tráfico, su Gravatar se almacenará en caché en los servidores de Gravatar.

Como resultado, su Gravatar se cargará rápidamente en todos esos blogs. Pero, por otro lado, también puede ser una desventaja, ya que si el servicio de Gravatar no está disponible, o tu Gravatar es eliminado de uno de los blogs que has comentado, tu Gravatar desaparecerá de todos esos blogs.

Es increíblemente poco atractivo personalizar un Gravatar con una imagen completa. Esto se debe a que si su gravatar personalizado no aparece en esos blogs, se usará el gravatar predeterminado en su lugar, lo que podría no ser apropiado.

Hay dos posibles soluciones a este problema:

• Haz tu Gravatar lo más pequeño posible. Las imágenes más pequeñas se cargarán más rápido y consumirán menos ancho de banda que las más grandes.
• Debe alojar su propia versión del servicio Gravatar en un dominio que controle. Esto requerirá un servidor web Apache, PHP y una base de datos MySQL para almacenar Gravatars localmente en lugar de almacenarlos en caché en los servidores Gravatar.

Servir imágenes desde un CDN:

Si sus imágenes son servidas por una red de entrega de contenido (CDN), asegúrese de habilitar el almacenamiento en caché. Como resultado, los navegadores y otros dispositivos no tendrán que descargar la misma imagen varias veces.

Sería mejor considerar cómo se mostrarían sus imágenes al configurar un CDN. Además, se debe habilitar una reescritura de CDN en sus imágenes. Puedes hacer esto con el complemento Perfmatters

Con este complemento, puede conectar fácilmente su sitio a una red CDN. Como resultado, si su sitio puede servir contenido a través de una red de entrega de contenido, sus imágenes serán realizadas por los servidores CDN.

Puede utilizar cualquiera de las siguientes redes CDN.

• Llamarada de la nube
• conejitoCDN

Lo que no debes hacer al optimizar imágenes para tu sitio web

Evite los redireccionamientos de URL de imágenes:

Si utiliza una redirección de URL en su sitio web, retrasa la aparición de la imagen. Además, el navegador no almacena en caché la imagen, lo que puede provocar un retraso en la carga de la página.

Por lo tanto, cuando optimice sus imágenes para la web, debe evitar el uso de redireccionamientos de URL.

Evite el encabezado Expires:

Si usa un encabezado de caducidad en sus imágenes, es posible que el navegador no las almacene en caché. También hace que el navegador vuelva a solicitar la imagen cada vez que se carga en una página.

Debe evitar configurar encabezados caducados en las imágenes de su sitio web si desea optimizarlos.

Evite incrustar imágenes:

Es importante no incrustar imágenes en la página al optimizar imágenes para la web. Esto se debe a que cuando incrusta una imagen, el navegador descarga la imagen completa antes de mostrarla.

Esto puede hacer que su sitio web se cargue lentamente y frustrar a sus visitantes. En su lugar, utilice una etiqueta <img> o una etiqueta <object> para incluir un enlace a la imagen en su servidor. Por lo tanto, el navegador puede descargar solo el archivo de imagen, no la página completa.

Las mejores herramientas de optimización de imágenes:

El contenido de alta calidad es esencial para desarrollar blogs profesionales. Además, las imágenes de calidad son necesarias para que un blog parezca atractivo. Sin embargo, es difícil encontrar herramientas gratuitas para optimizar imágenes sin perder resolución e imágenes bellamente diseñadas.

Como resultado, he compilado una lista de algunas de las herramientas de optimización de imágenes más efectivas para facilitar nuestro trabajo.

• TinyJPG: TinyJPG es una práctica herramienta en línea para comprimir imágenes JPEG. La tasa de compresión de esta herramienta es muy alta y la calidad de la imagen sigue siendo excelente.
• Toolur: Toolur es una útil herramienta en línea para optimizar imágenes para la web. Optimiza las imágenes al reducir el tamaño del archivo sin afectar la calidad de la imagen.
• ImageOptim: ImageOptim es una de las principales herramientas de optimización de imágenes. Esta herramienta lo ayuda a mejorar la velocidad de carga de su sitio al optimizar las imágenes en la página web. Incluso puede optimizar imágenes que ya han sido comprimidas.
• GIMP: GIMP es un excelente editor de imágenes que le permite reducir el tamaño del archivo de la imagen mientras conserva la calidad de la imagen. Es una alternativa digna a Adobe Photoshop.

Los mejores complementos de optimización de imágenes para WordPress

Hay varios complementos de optimización de imágenes diferentes disponibles para WordPress. Elegir el más adecuado a tus necesidades puede resultar complicado. Aquí hay una lista de los mejores complementos.

• Optimizador de imágenes EWWW
• Imagina por WP Rocket Team
• Optimizador de imágenes de píxeles cortos
• WP Smush
• reSmush.it

Puede usar los complementos EWWW Image Optimizer , Imagify de WP Rocket Team y ShortPixel Image Optimizer de la lista anterior.

Debe usar un complemento premium para la optimización de imágenes para obtener el resultado óptimo. Si quieres ahorrar algo de dinero, prueba EWWW Image Optimizer .

preguntas frecuentes

¿Cómo creo imágenes WebP en WordPress?

Cuando usa WP Rocket para optimizar imágenes en su sitio, las guardará automáticamente como WebP. Por el contrario, si desea convertir una imagen JPG o PNG en una imagen WebP, puede hacerlo con un complemento.

Puede usar cualquiera de los siguientes complementos para esto.

• Convertidor WebP para medios
• WebP Express

Un gran complemento que uso para WebP es Flying Images de WP Speed ​​Matters. Funciona con cualquier tema y maneja todo. Además, le permite crear imágenes WebP de cualquier tamaño que desee y proporciona un servicio CDN de imágenes gratuito, lo cual es un beneficio significativo.

¿Cómo aplazo las imágenes fuera de pantalla?

El atributo defer se puede usar en JavaScript para cargar imágenes fuera de la pantalla, lo que permite que el navegador procese la carga de la página inicial más rápidamente. Esto requiere las etiquetas de inicio y final. Por ejemplo:

<img src=”image-source.png” alt=”” width=”100px” height=”100px” title=”Algunos textos de información sobre herramientas” data-defer=”offscreen-image.jpg” />

Nota: Defer solo es compatible con HTML5, no con XHTML.

Mediante el uso de un complemento de JavaScript como Perfmatters, puede diferir la carga de sus imágenes. Como resultado, puede cambiar la etiqueta img a cualquier elemento que desee, como un div.

<div data-defer=”imagen-fuera de pantalla.jpg”></div>

¿Cómo arreglar las imágenes diferidas fuera de la pantalla?

• Imágenes de carga perezosa.
• Imágenes de fondo de carga perezosa.

Las imágenes de la mitad superior de la página deben excluirse de la carga diferida para garantizar que los usuarios las noten rápidamente. Sin embargo, para resolver imágenes diferidas fuera de pantalla o de carga diferida en un sitio de WordPress, puede usar el complemento Perfmatters. El complemento le permite mejorar la velocidad de carga de su sitio de WordPress al diferir la carga de imágenes fuera de pantalla.

Nota : puede habilitar la carga diferida de imágenes con el complemento WP Rocket. Así que puedes usar cualquiera de ellos.

En conclusión

WordPress es un poderoso sistema de administración de contenido que le permite crear y administrar su propio sitio web. Sin embargo, optimizar imágenes para WordPress puede ser difícil sin las herramientas adecuadas.

El problema con la optimización de imágenes para WordPress es que hay muchos métodos diferentes disponibles. Por ejemplo, puede usar un complemento, una herramienta en línea o incluso su propio software.

El método más efectivo para optimizar imágenes para WordPress es combinar todas estas técnicas . Además, puede usar un complemento que identificará qué imágenes deben cambiar de tamaño y también puede cambiar su tamaño manualmente.

Además de optimizar los tamaños de imagen para WordPress, también debes optimizar la cantidad de archivos por publicación. Intente usar complementos premium para optimizar la imagen y la velocidad del sitio web. Como resultado, podrá desarrollar un sitio web fácil de usar, rápido y eficiente.