Cómo optimizar imágenes para WordPress de forma profesional

Tener imágenes en WordPress optimizadas de forma profesional es un factor crucial cuando se trata de aplicar estrategias SEO a un sitio web. Las imágenes pueden ser el centro de atracción de Google o, si no lo haces bien, pueden convertirse en tu talón de Aquiles, tú decides.

Pese a toda la información que existe al respecto hoy en día, muchas páginas hacen caso omiso de esta parte del proceso de posicionamiento de un blog sin darle a las imágenes el valor que se merecen.

Has de saber que las imágenes con buena definición pueden ser una excelente opción para mejorar los tiempos de visualización de nuestros contenidos, ya que dan al lector la sensación de que está leyendo un material de calidad y le invitan a seguir, mientras que una mala gestión en este sentido puede echar a perder toda la estrategia digital de tu página web.

Es por ello por lo que resulta tan importante saber cuáles son los principales factores a tener en cuenta cuando pretendemos optimizar lo referente a las imágenes en nuestros contenidos. Te cuento esas claves a continuación.

Las claves para optimizar imágenes en WordPress

En el momento de embarcarnos en la optimización de imágenes para WordPress, hay tres factores esenciales que debemos tener en cuenta: la calidad, el tiempo de carga y la optimización enfocada a buscadores.

En primera instancia debes tener imágenes de calidad y en un contexto adecuado a los temas que estés tratando, ya que es algo que les dará la coherencia necesaria para que refuercen el contenido y, a su vez, el texto tenga más peso y, como decíamos antes, que transmita mayor sensación de calidad.

Por otro lado, es necesario que las imágenes no interfieran con los tiempos de carga de la página. Debes asegurarte de que sus tamaños y pesos sean adecuados a la plataforma y a la finalidad con que se colocan allí.

Y, por último, es necesario que después de cargar las imágenes en tu sitio les apliques su correspondiente optimización SEO con respecto a la palabra clave y los atributos ALT. No olvides que también te puedes posicionar en los resultados de imágenes de Google, por ejemplo.

Qué pasos debes seguir al subir una imagen a WordPress

1. Edición creativa

La primera parte de cualquier optimización de una imagen comienza por su edición. Es probable que si acudiste a un banco de imágenes, estas tengan una excelente calidad, pero también puede darse el caso de que debas hacer algún retoque antes de publicar la imagen.

Esto se refiere al balance de colores, la iluminación y el contraste de blancos y negros, entre otros factores sencillos que puedes retocar fácilmente con el programa adecuado. Te llevará unos pocos minutos y el resultado merecerá la pena.

Por otro lado, también es posible que quieras realizar otras cosas especiales para tus imágenes destacadas: pueden ser dos imágenes en una, un tríptico, añadir letras o emojis; en fin, de ti depende lo que coloques de acuerdo al estilo de tu sitio. Lo importante es que dediques tiempo a darle un último retoque a las imágenes antes de subirlas (si es que crees que lo necesitan).

2. El tamaño de las imágenes

Con respecto al tamaño en el que es recomendable subir las imágenes, lo ideal es conocer el ancho máximo de la sección de contenido de tu blog WordPress, ya que de esta manera puedes escalar la imagen a dicha proporción.

Es importante tener en cuenta que por defecto, al subir una imagen se crean en la biblioteca de medios distintas copias de la misma. Esto con el fin de adecuar los distintos tamaños utilizados por el Theme o estructura interna. Lo ideal es que la imagen tenga el tamaño máximo en que será utilizada, de lo contrario se verá pixelada si posteriormente trata de ajustarse a un tamaño mayor que el original.

Cómo saber el tamaño de subida de imagen ideal para mi blog WordPress

Como decíamos antes, sí puedes saber a qué tamaño es recomendable que subas tus imágenes fijándote en el diseño que tiene actualmente tu blog. Existe un truco que te permite descubrir el tamaño máximo recomendado para subida de imágenes en tu blog.

Lo único que tienes que hacer es dirigirte a uno de tus contenidos y, ya en el contenido que elegiste, debes dar clic en el comando de tu teclado F12 o hacer clic derecho en el cuerpo de la entrada y luego pulsar en “Inspeccionar”. Inmediatamente verás una ventana emergente como se muestra en la siguiente imagen:

En este cuadro emergente debes ubicar en la parte de arriba la herramienta “Selección de elemento” identificada por una flecha apuntando a un pequeño cuadrado. (Flecha roja en la imagen)

Luego, debes hacer clic en el contenedor o cuerpo de tu contenido (señalado en la imagen de arriba con un cuadrado azul). Asegúrate de dar clic en el fondo y no en las letras, imágenes o elementos fuera del contenedor.

Ahora, en el cuadro de inspección de elemento, en la pestaña “Estilos” o “Styles” (indicado por la flecha roja en la siguiente imagen) desplaza la barra hasta el final de la información (flecha azul) y encontrarás un cuadrado con el diagrama de tamaños de la página (indicado en cuadrado verde).

Como puedes ver en el diagrama de tamaños o diagrama de márgenes aparece una medida en el centro, la primera indica el ancho de tu contenedor. (En este ejemplo puedes ver las medidas en el cuadrado azul. El tamaño del contenedor en este caso es de 620 píxeles).

Es esta medida la que nos dice cuál es el tamaño ideal de carga para tus imágenes en tu blog de WordPress. Te dice el tamaño mínimo que deben tener las imágenes que vayas a subir a tu página.

La importancia de esto radica en que el tamaño del contenedor es el tamaño en que se mostrarán las imágenes. En este sentido si subo una imagen con un ancho de 320 píxeles cuando mi contenedor es de 620 píxeles, estaré dejando mucho espacio a los lados de la imagen; y si la subo de 2.000 píxeles de ancho y la inserto tal cual, entonces estaré gastando recursos de más de mi alojamiento.

Cómo configurar los tamaños predeterminados para mis imágenes en WordPress

WordPress es un gestor de contenidos orientado a facilitarnos la vida, y dispone de una funcionalidad que permite establecer tamaños de subida por defecto para las imágenes que añadas a tu blog.

Lo puedes configurar no solamente en las imágenes que se insertan dentro de los contenidos, sino también para las imágenes destacadas que se muestran por ejemplo como apertura de cada entrada.

Por lo general, la imagen destacada de una entrada es de mayor tamaño que las del contenedor del cuerpo, y también se requieren miniaturas para enlazar a los contenidos. Todas estas imágenes se realizan a partir de la imagen originalmente subida.

Configurar los formatos predeterminados de imágenes de contenido, banners y miniaturas

Para modificar el tamaño por defecto con el que se suben las imágenes a tu blog, lo único que debes hacer es entrar a tu escritorio de WordPress, ir a la pestaña “Ajustes” y seleccionar la opción “Medios” para ingresar al panel de tamaños de imagen.

Después de entrar en la sección de “Tamaño de imágenes“, puedes configurar el tamaño predeterminado que deseas para cada una de tus copias: miniaturas, medios y tamaño grande o tamaño completo.

Si decides modificar estos parámetros. asegúrate de ingresar los valores que realmente utilizarás o son apropiados para tu tema, de lo contrario solo conseguirías aumentar el numero de copias de la imagen colocando un tamaño que no usarás nunca.

Configurar tamaño de la imagen destacada

Existe una forma sencilla de configurar en WordPress los tamaños predeterminados para los distintos formatos requeridos por nuestro tema. Lo primero que debes hacer es ingresar a tu escritorio de WordPress, y después dirígete a la pestaña donde se encuentra el tema que estás usando (en nuestro caso es Génesis); después, haces clic en “Ajustes del tema” y se abrirá un panel de control.

Desplaza los ajustes hasta encontrar “Archivos de contenido“, y en “Imagen destacada” podrás modificar el tamaño predeterminado entre varias opciones que aparecen en la pestaña desplegable.

3. El peso de cada imagen

Otro factor que afecta directamente la velocidad de carga de un blog es el peso de las imágenes. Conociendo el tamaño ideal de carga para nuestro sitio, es necesario comprimir las imágenes para lograr el menor peso posible.

Para comprimir una imagen en WordPress es necesario recurrir a una herramienta, y esta puede ser manual, online o un plugin que instales en tu sitio de WordPress.

Ventajas de comprimir y reducir el peso de una imagen

Antes de seguir, vamos a resolver una pregunta que puede que te estés haciendo ahora mismo: ¿para qué querrías optimizar las imágenes de tu blog en WordPress si hasta ahora no te lo habías planteado nunca?

Tiempos de carga

• 

• 

El primer motivo vale su peso en oro (nunca mejor dicho): comprimir las imágenes que usas en tu sitio de WordPress puede mejorar notablemente los tiempos de carga de tu web. Además, recuerda que por cada imagen se suben al menos seis u ocho copias en distintos tamaños, y todas se basan en el archivo que subas originalmente.

Si subes la imagen comprimida, las solicitudes al servidor se completarán más rápido, y se trata de un factor que además de mejorar los tiempos de carga también es tenido en cuenta por los motores de búsqueda a la hora de posicionar tu web.

Espacio en servidor

Lógicamente, al reducir el peso de las imágenes ocuparás menos espacio en el servidor. Piensa que si subes una imagen de la cual se crean diversas copias, un buen proceso de optimización previo puede reducir el peso del paquete incluso a la mitad o más.

Ahora piensa lo anterior multiplicado por los cientos o quizá miles de imágenes que están o estarán en tu sitio web. Es sencillo deducir que ahorraremos un montón de espacio.

Recursos

Como consecuencia del peso reducido, las solicitudes a tu hosting se resolverán más rápidamente, lo que evitará el consumo innecesario de recursos.

Cómo editar, cambiar el tamaño o comprimir una imagen para WordPress

Edición manual en Windows o Mac

Para realizar desde tu ordenador las modificaciones necesarias a tus imágenes de forma manual necesitarás contar con algún programa de edición de imagen.

En este caso te ensañamos cómo hacerlo usando Photoshop, puesto que es uno de los editores de imagen más populares y accesibles de toda la red. Aunque el proceso puede ser parecido en la mayoría de editores, como por ejemplo la alternativa gratuita Gimp.

Tanto en Photoshop como en cualquier otro programa de edición de imágenes, para cambiar el tamaño de una fotografía debes abrir el programa y configurar un nuevo espacio de trabajo, luego abrir la imagen, seleccionar la opción “Tamaño de imagen” en el menú “Imagen” que se encuentra en la barra de herramientas superior e introducir (en píxeles) el tamaño al que deseas convertirla.

A la hora de editar el tamaño de una imagen, siempre asegúrate de que esté marcada la opción “Restringir proporciones” para que el cambio del ancho sea automático y la fotografía no se distorsione con respecto a la altura.

Si deseas hacer edición creativa, este es el momento de agregar títulos, brillos, o jugar un poco con el color y demás opciones. Para esto puedes buscar tutoriales en YouTube y encontrarás miles de ellos.

Ventajas de este método

Usar la edición manual de imágenes puede facilitar la optimización de la calidad y la revisión particular de cada imagen. Además, puede ser una oportunidad perfecta para añadir algunos detalles especiales que hagan únicas a tus imágenes.

Otra ventaja es que con la edición desde Windows o Mac puedes guardar tus imágenes en distintos formatos, lo que te permite tener mayor flexibilidad frente al uso que vayas a hacer de cada imagen en particular.

Desventajas de este método

Como principal desventaja de la edición manual de imágenes para blogs está lo tedioso que resulta hacer edición a cada imagen que vamos a subir, esto a razón del tiempo invertido por cada imagen.

Por otro lado, está la imposibilidad de editar las imágenes que ya se encuentran en el blog. Esto significaría descargar, eliminar, editar la imagen descargada y subirla de nuevo.

Edición manual directamente en WordPress

Si el anterior método no te convence o no se adapta a lo que estás buscando, has de saber que en WordPress mientras editas un contenido puedes escalar la/s imagen/es de forma manual. Pero esto presenta más inconvenientes que soluciones.

Si la idea es hacer más grande una imagen para que llegue al tamaño ideal, esta va a perder bastante calidad puesto que esta opción de WordPress solo estira la imagen y no equivale a un escalado digital de edición de imagen.

Si la idea es hacer la imagen más pequeña para tratar de comprimir su peso, es perder el tiempo puesto que este escalado no afecta el peso de la imagen. De hecho, estarías generando una nueva copia de la misma.

Aunque esto no afecte los tiempos de carga directamente, no presta las funciones básicas que se esperan de escalar y comprimir imágenes, y por otro lado estaríamos aumentando el peso total de nuestra web. Por lo tanto, lo mejor es que descartes esta alternativa.

Edición de imágenes por medio de plugins

Dejando atrás las dos anteriores opciones, una forma mucho más rápida de optimizar imágenes para WordPress pasa por usar plugins. Existen varios plugins especializados en este tema y diseñados exclusivamente pensando en los requerimientos de WordPress.

El uso de plugins de WordPress siempre facilita la vida en cuanto a organización y optimización de un sitio web. Aunque también puede representar una dificultad en algunos casos específicos, tal y como veremos a continuación.

Ventajas

Los plugins son por lo general bastante intuitivos y fáciles de utilizar. Permiten comprimir imágenes en WordPress por grupos, y el tamaño de estos grupos puede variar de un plugin a otro, pero en general todos aceleran el proceso que estamos buscando.

Por otro lado, algunos plugins además te permiten revisar y comprimir imágenes que ya se encuentran subidas en tu sitio web.

Desventajas

Pero antes de probar ninguno de los que te vamos a recomendar a continuación, has de saber que también tienen sus desventajas. Por ejemplo, es muy común que algunos plugin que se presentan como gratuitos en realidad sean versiones inferiores de un plugin para optimizar imágenes de WordPress premium, de forma que tendrán límites en cuanto a compresión o cantidad de imágenes mensuales.

Obviamente en estos casos, basta con comprar la versión premium para salvar estos inconvenientes. Pero eso implica pasar por caja.

Además, nunca olvides que un uso excesivo de plugins en WordPress acaba generando problemas de carga en el servidor. Puede ser que esta afectación en el rendimiento no sea relevante en cuanto a tiempos de carga y funcionalidad, pero es algo a tener en cuenta, sobre todo si ya tienes un número considerable de plugins instalados.

El SEO enfocado a optimizar imágenes para WordPress

Por último, cuando ya estén listas tus imágenes debes subirlas a tu sitio web sin olvidarte de optimizarlas según los parámetros del SEO. En este proceso es indispensable prestar especial atención a los atributos ALT y al título de cada imagen.

Primero, deberás agregar tu palabra clave de la manera más natural posible al título y los atributos ALT de cada imagen. El título debe relacionarse con la imagen y también con el contenido en el que va a ir insertada; por otra parte, los atributos ALT son una breve descripción de la imagen, lo más clara y precisa posible. Describe la imagen como si lo hicieras para alguien que no la puede ver.

No olvides añadir en esta descripción tu palabra clave y darle un enfoque relacionado con el tema. Por ejemplo, si hablas de negocios y estás subiendo una fotografía de una reunión de empresa, no dirás “Grupo de personas reunidas”, sino más bien algo como “Personas hablando de negocios”.

En definitivas cuentas, los plugins son una solución que te ahorrará muchas horas de trabajo cuando se trata de optimizar de forma eficiente cientos (o miles) de imágenes en un blog de WordPress.

Pueden facilitarte mucho la vida en este sentido, sobre todo, porque en su mayoría cumplen funciones bastante especificas y necesarias, y por otro lado los desarrolladores siempre se aseguran de que sean sumamente sencillos de usar.

• 

• 

• 

• 

• 

A continuación te dejamos con una lista de algunos de los mejors plugins de este tipo que puedes instalar en tu blog.

1. Short Pixel

Short pixel es una excelente herramienta para complementar tu estrategia SEO en lo que a imágenes se refiere. Esta herramienta es más que un simple compresor de imágenes: es un aliado estratégico.

Con Shortpixel estás a un clic de olvidarte de la gestión de imágenes. La herramienta es totalmente automática y redimenciona y optimiza todas las imágenes y PDF que agregues en tus contenidos.

Lo mejor es que te da la opción de revisar y comprimir todas las imágenes que se encuentran ya publicadas en tu sitio web. Una labor que sin duda realizar a mano sería casi imposible para la mayoría de plataformas con bastante contenido.

Esta, como su misma descripción lo indica, es un aplicación freemium, es decir, una herramienta gratuita pero con opciones adicionales de pago.

Vale la pena destacar que esta herramienta de Image Optimizer es el producto insignia de la compañía Shortpixel, por lo que tiene un nivel de desarrollo bastante elevado.

Ventajas

Tres modos de compresión en relación directa calidad-peso.

Automatización para nuevas subidas.

Trabaja múltiples formatos: JPEG, PNG, GIF y PDF.

Desventajas

La versión gratuita solo permite comprimir 100 imágenes al mes.

2. ReSmush.it

ReSmush.it es una de las extensiones para optimizar imágenes desde WordPress más populares de todo el mercado, no solo por la empresa creadora que goza de gran trayectoria, sino por la calidad lograda por su compresor de imágenes.

Este complemento rastrea y modifica las imágenes subidas a tu sitio y te facilita la vida al momento de cargar imágenes en tus nuevos contenidos.

La extensión es gratuita y se jacta de haber convertido casi tres mil millones de imágenes y de seguir brindando este servicio sin necesidad de cobrar por él.

Esta extensión desde 2016 fue modificada especialmente para mejorar su compatibilidad con WordPress por lo que muchos la señalan como la extensión oficial de este gestor de contenidos.

Si después de probar la extensión consideras que vale la pena, puedes hacer una pequeña donación en la página oficial de descarga, esto puede ayudar a sus organizadores a mantenerla gratuita y libre de publicidad.

Ventajas

Algoritmo de desarrollo propio que permite compresión hasta del 70%.

API 100% gratuita con la posibilidad de donación.

Desventajas

Solo puedes procesar imágenes de peso inferior a 5 MB.

3. WP Smushit

Perteneciente a la familia de la herramienta anterior, WP Smush es una de las mejores extensiones de compresión de imágenes de todos los tiempos. Y no es una subjetividad.

Esta herramienta recibió el premio “Plugin madness” durante dos años consecutivos como la mejor de su tipo en cuanto a calidad, velocidad y resultados finales.

Esta herramienta tiene muchísimas opciones de edición que puedes configurar y se ejecutarán automáticamente cuando subas una nueva imagen a tu sitio.

Puedes configurar de forma predeterminada el tamaño máximo de las imágenes y otros atributos especiales para que se apliquen en cada subida. Además, puedes editar y comprimir tus imágenes antiguas de forma manual en grupos de hasta 50 archivos.

Un plus de este plugin es que puede optimizar todas las imágenes publicadas en tu sitio, incluso aquellas que no se encuentran en la biblioteca de medios.

Otra de las ventajas de esta extensión en particular es que te brinda la posibilidad de diferir las imágenes en segundo plano optimizando los tiempos de carga en primer plano. Sus creadores prometen que este proceso agiliza los tiempos de carga en general.

Ventajas

Toda el proceso de optimización corre en los servidores de la API por lo que no consume recursos de tu hosting.

No tiene límite mensual de imágenes.

Funciona automáticamente para nuevas subidas.

Desventajas

Al comprimir imágenes solo lo puedes hacer en grupos de 50. Si tienes muchas imágenes puede tomar bastante tiempo.

Solo funciona para imágenes de menos de 1 MB.

4. EWWW Image optimizer

Este plugin va más allá de un simple gestor de imágenes, ya que su consigna es lograr mejorar los tiempos de carga de tu sitio web.

En este sentido, Ewww Image Optimizer ofrece un servicio complementario entre un compresor de imágenes y un gestor de carga de imágenes en paralelo.

Para esto se vale de la gestión de cargas en segundo plano y de carga en paralelo para aliviar las solicitudes de primer plano y mejorar directamente la experiencia de usuario con respecto a los tiempos de carga.

Con Ewww existe la posibilidad de configurar los formatos y tamaños preestablecidos para nuevas cargas. Además, ofrece una de las mejores relaciones entre compresión/definición de todo el mercado.

Como bonus, esta API cuenta con cifrado por código SSL lo que brinda mayor confianza en la comunicación y accesos necesarios. La seguridad es otro de sus puntos fuertes.

Ventajas

Alto nivel de respuesta a las dudas de los usuarios, lo que es una suerte de soporte técnico en este caso.

Gestión en segundo plano.

Gestión de compresión para nuevas subidas.

Desventajas

Aunque para muchos no sea desventaja, esta API se hace con los derechos de autor de todas las imágenes subidas. OJO con esto.

El proceso se realiza con recursos de tu hosting, para hacerlo con el host de la API debes acceder a la versión de paga.

5. Compress JPEG & PNG images

Compress JPEG y PNG images es un plugin dedicado, por lo que está diseñado con gran compatibilidad para la mayoría de herramientas específicas de WordPress.

Por medio de este plugin desarrollado por TinyPNG, puedes modificar todas las imágenes existentes en tu galería, el problema es que debes configurar y comprimir todas las imágenes usando los mismos parámetros.

Vale la pena destacar que luego de la aplicación de la extensión no es necesario modificar las nuevas imágenes manualmente, ya que el plugin lo hace de manera automática.

Ventajas

Alta tasa de compresión.

Puede usarse en cualquier dispositivo (incluso desde el móvil).

Entrega Zip con los archivos comprimidos e indica cuál fue la tasa de compresión.

Cuenta con un complemento de Photoshop enfocado a la optimización de imágenes para WordPress. Este cuesta 50 dólares. Pero puedes estar seguro que lo vale.

Desventajas

Solo permite procesar 500 imágenes al mes.

Solo permite gestionar 20 imágenes al mismo tiempo, lo que puede ser tedioso si tienes muchas imágenes.

Herramientas en línea para optimizar (y editar) imágenes

Si se da el caso de que no quieres, no puedes, o no sabes cómo instalar una extensión o plugin, y prefieres optimizar tus imágenes por medio de alguna herramienta en línea, entonces te interesa lo que te vamos a contar en este apartado.

Aunque WordPress es uno de los gestores de contenido más populares de todo Internet, no hay que perder de vista que es solo uno de los muchos existentes y los desarrolladores no le prestan toda su atención exclusiva. Hay alternativas, tanto de gestores de contenidos como de herramientas creadas específicamente para optimizar online imágenes.

1. Optimizilla

Una excelente opción de compresión si lo que quieres es trabajar sobre tus contenidos futuros es Optimizilla. Puedes subir tus imágenes y controlar el nivel de compresión y otros atributos enfocados a conservar la mejor calidad del archivo.

Esta herramienta online también te da la posibilidad posterior de controlar tus imágenes subidas comparando el resultado con las originales, así sabrás exactamente hasta qué punto está funcionando con respecto a la economía del espacio.

Lo mejor es que brinda la posibilidad de generar cambios en bloques hasta de 20 imágenes, lo que nos permite optimizar tiempos y seleccionar grupos de varios ficheros a la vez.

2. Tiny PNG

La tarea de optimizar imágenes, WordPress o cualquier otro gestor de contenidos, con Tiny.png es sumamente eficiente pues usa un algoritmo totalmente diferente. Este se basa en la selección y eliminación de colores complementarios.

Sobra decir que esto no afecta mayormente la imagen original, que se conserva casi intacta mientras se genera gran diferencia con respecto al tamaño de la misma. Esto representa una enorme ventaja cuando se trata de conservar los atributos de imagen que son tan necesarios para un adecuado posicionamiento.

Esta herramienta permite trabajar hasta en 20 imágenes al tiempo para así sacar el mayor provecho y rendimiento a la misma.

Estos son algunas de las herramientas y extensiones que puedes tener en cuenta para optimizar tus imágenes y potenciar tu sitio web. No olvides tener presentes estos factores de optimización de imagen para WordPress y procura trabajar en cada uno de ellos tan fuerte como sea posible.