Cómo optimizar imágenes para WordPress

Si tienes una web en WordPress, y has llegado hasta aquí buscando optimizar imágenes para WordPress, vas por buen camino, ya que estas representan un porcentaje bastante alto del peso total de la web.

¿Y por qué nos interesa esto? Pues, simple. A menor peso, más velocidad de carga y menos tiempo de espera para los usuarios que visitan nuestra página web, lo que contribuye con el SEO, y la optimización in site.

En este artículo, te explicaré en detalle todas las estrategias que debes aplicar para poder contar con una web WordPress bien optimizada en cuanto a imágenes se trata ¡Empecemos!

Paso a paso para optimizar imágenes para WordPress

Para hacer esto más simple, veamos algunos de los pasos que yo cumplo para poder hacer de mi web un poco más rápida, y que los navegadores nos amen. Veamos:

#1 Elige un formato correcto

Existen diferentes formatos de imagen actualmente, aunque cada uno tiene un uso específico, por lo que debemos aprender a identificar y usar el correcto para cada ocasión.

Esto es bastante simple, solo hay que tener conocimiento sobre cuáles son los formatos de imágenes actuales. Veamos los más comunes:

• JPEG: Formato pensado para imágenes con muchos colores y que no se centran en tipografía. Por ejemplo, una fotografía. Se caracterizan por ser de muy bajo peso.
• WEBP: Una alternativa a JPEG del propio Google. Tiene características similares a JPEG como un bajo peso y estar centrado en imágenes con muchos colores, con inclusive un ratio de compresión mayor a JPEG. ¿Lo malo? No tiene soporte para todos los navegadores actualmente, lo que nos obligaría a usar librerías adicionales como Modernizr.
• PNG: Un formato de imagen con mejor calidad, y detalles, ideado especialmente para tipografía, logos y demás. Sin embargo, tiene un mayor peso.
• GIF: Un formato de imagen con varios fotogramas que conforman una imagen con movimiento. Suele ser bastante pesada, por lo que no se recomienda un uso abusivo de ella. Quizás dentro de algún post, pero nunca en barras laterales, ya que aumenta el tiempo de carga total de la web.

¿Y qué pasa si mi web tiene una imagen con el formato incorrecto? Pues nada, habrá que cambiarlo por el correcto. Para ello, hay muchas herramientas. A continuación te dejo algunas de las que yo uso:

• ILoveIMG: Convertidor de PNG, GIF y WEBP a JPG
• Convertio: Convertidor que soporta casi todos los formatos de imagen, incluyendo los antes mencionados, obviamente

#2 Optimiza el tamaño de las imágenes

Cuando se trata de webs WordPress, sí importa el tamaño.

¿Meterías 3 pollos a un horno que tiene capacidad para 1? ¿Verdad que no? Pues, así es más o menos como se siente cuando una imagen es mucho más grande de lo que soporta tu theme WordPress, o cuando lo añades al lugar incorrecto.

Imagínalo de esta forma. Tienes una imagen de 1020 x 1020 px, y tu web solo mostrará la imagen a un máximo de 720 x 720 px. Ese tamaño excedente, únicamente representa un exceso de carga, y es inútil para los usuarios. No hará que la imagen se vea mejor, simplemente hará que se tarde más el tiempo en funcionar nuestra web.

Y claro, a esto habrá que sumar que habrá dispositivos aún más pequeños que no vean dicha imagen a 720 x 720, como los teléfonos móviles, que apenas verán una versión minúscula de esa imagen.

Quizás te interese: Cómo agregar un Favicon en WordPress

En este aspecto, tendremos que comprobar con nuestro theme el tamaño, aunque a continuación te dejo algunos de los tamaños que yo recomiendo en general para cualquier sitio, y que te podrían servir. Para hacerlo más simple, añadiré imágenes por secciones de la web:

• Dentro del post: 640 x 426 px
• Banner izquierdo o derecho: rectángulo pequeño (300 x 250 px), rectángulo grande (728×90 px)
• Pie de página o footer: Varía dependiendo de la ubicación del footer y lo que se busque mostrar. Puede ser de 90 x 728 px (footer completo)

#3 Reduce el peso de tus imágenes

Vale, ya hemos elegido el formato correcto, y hemos elegido el tamaño ¿Qué es lo siguiente? Pues, reducir el peso de las imágenes.

Puede que no lo supieras, pero las imágenes tienen una serie de datos que aumentan el peso de las mismas. Estos son los meta-datos, e incluyen cierta información como el lugar donde se tomó la fotografía, y demás datos interesantes para algunos, que a la hora de optimizar imágenes para WordPress da igual.

Para esto, existen dos opciones. O usamos un plugin, o usamos herramientas offline/online. Veamos las ventajas y características de cada uno:

Usando plugins WordPress

Es la manera más sencilla de optimizar imágenes para WordPress, aunque también la que muchos no recomiendan, ya que algunos plugins como estos, pueden empeorar el tiempo de carga de nuestra web, o causar problemas a la hora de usar funciones bulk.

En mi experiencia, una vez usé una de estas herramientas para mejorar la carga de mi web, y terminé con una especie de bug, el cual dañó mi sitemap.xml. Por suerte, me di cuenta a tiempo, y resolví el problema.

No digo que esto pase todo el tiempo, pero es una posibilidad, por lo que te recomiendo, que si vas a usar funciones bulk para reducir el peso de todas tus imágenes de golpe, al menos hagas una copia de seguridad.

Dicho esto, algunas de las herramientas que usé sin problemas fueron:

• Smush – Lazy Load Images, Optimize & Compress Images
• EWWW Image Optimizer

El proceso de uso de estas herramientas es lo más simple. Instalas, y sigues el paso a paso. Con un par de botones, ya está.

Nota: Algunas de las funciones no son gratis, pero con lo más básico vamos bastante bien.

Usando herramientas offline/online

Estas herramientas son bastante más laboriosas, porque no son automáticas como los plugins. Sin embargo, suelen tener mejores resultados. De hecho, mi favorita es RIOT (la cual menciono más adelante).

De ahí en más, no hay margen de error o problemas con las subidas. Lo único malo es que tomará un poco más de tiempo. A continuación, veamos mis herramientas favoritas:

• RIOT (Radical Image Optimization Tool): Esta joyita es desconocida por muchos, y es, por mucho, la herramienta gratuita más eficiente que he usado. Puede reducir hasta el 30% de peso de una imagen JPEG a JPEG sin perder una gota de calidad. Cuenta con opciones de redimensión y funciones bulk automáticas, e inclusive de cambio de formato. Una navaja suiza.
• Kraken.io: Herramienta online de mis favoritas. En el plan gratuito, podremos reducir el peso de las imágenes sin mucho trabajo. Podemos elegir entre 3 opciones de optimización, acceder al modo bulk, e importar desde diferentes sitios rápidamente. Las imágenes están en la web por un periodo de 12 horas, y luego son eliminadas.
• ILoveIMG: Este servicio que mencioné antes también permite comprimir imágenes JPG con muy buena calidad y gratis.

Nota: Obviamente, hay otras opciones como Photoshop o GIMP, pero no las menciono porque son bastante más complejas de utilizar.

#4 Recorta la imagen si es necesario

Imagina que tienes una imagen muy amplia con un paisaje, pero a ti te interesa enseñar el ave que hay en medio de dicho paisaje. Pues, puedes recortar la imagen, para reducir todo ese peso adicional.

Para esto hay diferentes opciones. O lo haces con una herramienta como RIOT, Photoshop o GIMP, o con la función integrada de WordPress.

Bonus: Optimiza el SEO de la imagen

Para finalizar, podemos optimizar imágenes para WordPress en cuanto a SEO. Es bastante simple. Una vez subida la imagen, añadimos el texto alternativo, y modificamos el nombre de la imagen.

En ambos, tendremos que incluir la palabra clave de nuestro post siempre y cuando venga al caso. No es algo a introducir a rajatabla.

Por ejemplo, si he escrito todo este artículo, al lado he añadido una imagen con el texto ALT, y con un título modificado como “optimizar-imagen-seo-wordpress”.