Aprende a optimizar imágenes en WordPress. Técnicas y plugins.

Como diseñadora web tengo varios clientes que en su día vinieron contándome lo lenta que iba su web. Y aunque sabían lo importante que era solucionar esto, desconocían a qué podía deberse. Ya te lo digo yo: en muchas ocasiones, su error había sido no optimizar las imágenes en WordPress.

Puede que pienses que tampoco es tan importante: pues te equivocas. Si durante años trabajas con imágenes grandes y pesadas, el resultado será que tu web irá muy lenta. Lo malo de esto es que a nadie le gusta: ni a tus visitas ni a Google.

Aunque a priori no lo parezca, el formato de tus imágenes es una de las cosas más importantes que debes tener en cuenta al gestionar una web con WordPress.

Así que si no quieres que algunos usuarios te abandonen y tampoco que Google te trate como a Cenicienta, sigue leyendo. Cuando acabes, sabrás cómo optimizar imágenes.

¿Qué hace WordPress con las imágenes al subirlas?

El hecho de subir imágenes sin ton ni son a tu página web y sin un tratamiento previo puede que al principio no afecte demasiado. Pero al cabo de un tiempo te aseguro que se puede convertir en un monstruo difícil de domar. Por eso es importante hacerlo bien desde el primer día.

Cada vez que añades una imagen, WordPress realiza varias copias de ella. Por defecto hace tres copias de diferentes tamaños. Por lo tanto, cuando subes una nueva imagen a tu biblioteca de medios en realidad estás añadiendo cuatro: la original y las tres copias.

¿Para qué sirven estas copias que hace WordPress? Para que puedas escoger el tamaño de la imagen que más te conviene cuando la insertes en una página o en un blogpost.

¿No lo habías visto antes? Tranquilo, no serías el primero ????. Al editar una imagen puedes escoger tres tamaños predefinidos. Para cada uno de ellos, WordPress tiene una copia almacenada en tu servidor web.

Pero, ¿sabías que puedes cambiar el tamaño predeterminado de las copias? Para ello debes ir a Ajustes > Medios. Rápido y fácil:

Entonces, ¿se trata solamente de cambiar el tamaño de estas copias?

Pues no. De hecho, yo suelo dejar el que viene por defecto y opto por usar otros métodos. El motivo es sencillo: haciendo sólo esto, estoy solucionando solamente una parte de la problemática. Y una parte pequeña, super pequeña.

Los tres problemas que puede ocasionar no optimizar imágenes WordPress

Que tu web vaya lentísima

Si las imágenes son grandes y pesadas, la web cargará más lenta. Si subes las imágenes a tu WordPress tal cual, sin redimensionarlas, tu web no cargará tan rápidamente como podría (y debería).

He visto webs en las que se han metido las fotos tal y como el fotógrafo las envió. Una foto profesional puede pesar tranquilamente 2MB. Y en una misma una página pueden juntarse 5 o 6 imágenes perfectamente. Por si fuera poco, imagina el drama de tu web siendo cargada desde un móvil: además de ir lenta, consumirá muchos datos móviles de tus usuarios.

Lo más gracioso es que si esa imagen la tratamos correctamente se puede ver igual de bien y pesar 100kB (¡un 95% menos!).

Una web gorda

Estoy muy a favor del body positive, pero en las personas. No en las webs.

Subiendo imágenes grandes solo conseguirás que tu servidor se llene más rápido y acabes tontamente pagando más por necesitar más espacio.

Además, si algún dia debes migrar tu web de un hosting a otro, la operación puede hacerse lenta y problemática ya que estarías moviendo una web que pesa demasiado.

Dejas tus intimidades al descubierto

Vale, este problema causado por no optimizar imágenes en WordPress te interesa solamente si tú creas tus propias imágenes. Por ejemplo, ¿vas a poner en tu web fotos que tú hayas tomado? Pues esto es para ti.

Resulta que, no sé si tu también, soy muy quisquillosa con el tema de la privacidad. Pues algo que mucha gente no sabe es que las imágenes pueden contener datos sensibles. Por ejemplo, las coordenadas GPS, el dispositivo que se utilizó, etc.

Si optimizas las imágenes y las tratas como te explico más abajo, eliminarás toda esa información que quizás no te interesa compartir. Además, sin esos datos, la imagen pesará menos. ¡Esto sí es un win-win! ????

Formatos de imágenes y para qué sirven

A continuación voy a presentarte los diferentes formatos que pueden tener tus imágenes. Pero no todos los que existen: los que WordPress acepta a día de hoy.

El motivo por el que te hablo de esto es para que puedas optimizar una imagen en WordPress dándole el formato que más le conviene. Este seria el primer paso.

Formato JPG o JPEG

Lo cierto es que técnicamente son dos formatos distintos. Pero he decidido juntarlos en una misma sección porque a efectos prácticos son lo mismo.

Básicamente son los dos formatos que te aconsejo usar cuando quieras subir imágenes sin transparencias. Es decir, la mayor parte de las imágenes que gestionarás. Por ejemplo, una fotografía de un gato que encuentro super mono ????:

Lo bueno de este formato es que puedes reducir su calidad para que pese menos sin que apenas se note. Dicho de otra forma, reduces una calidad que el ojo humano no percibe pero que te permite optimizar imágenes para WordPress.

Puedes establecer qué porcentaje de calidad quieres respecto al archivo original e ir ajustando para que se siga viendo bien a la par que pese menos.

En este sentido, no hay una regla general que determina el nivel de calidad que debe tener una imagen. Ajusta la calidad en función del nivel de detalle que necesites.

Los puntos por pulgada

Voy a subir un poco el nivel técnico, pero creo que debo mencionarlo ya que puede interesarte. Otra opción que tienes con las imágenes JPG y JPEG es jugar con la concentración «ppp» o «dpi» (puntos por pulgada):

La concentración «ppp», conocida habitualmente como resolución, determina cuántos píxeles se ven dentro de una pulgada. De esta forma, cuantos más píxeles, más detalles tendrá la imagen pero más pesará.

El formato JPG puede usarse tanto para pantallas (web) como para imprenta. La concentración de ppp para pantallas estándar es de 72. En cambio, para imprenta es de 300.

En consecuencia, un fotógrafo generalmente te enviará las fotos a 300 ppp. Lo bueno es que tú puedes bajar las ppp a 72 para optimizarlas para tu WordPress, sin perder calidad.

De hecho, si lo piensas es absurdo subir una foto a 300 ppp cuando la mayoría de pantallas no pueden mostrar más de 72. ¿No crees? ????

Más adelante te doy varias herramientas con las que poder reducir los ppp, ¡don’t worry!

Formato PNG

El PNG es utilizado casi en exclusiva para pantallas. ¿Qué tiene de diferente? Este formato permite tener transparencias. Por lo que es ideal cuando debes colocar una imagen sobre un fondo de diferente color.

Te dejo un ejemplo:

¿Qué uso puedes darle a este formato en WordPress?

Generalmente, utilizarás el PNG para el logo, los iconos y las ilustraciones. Las imágenes PNG tienen una calidad máxima y no se les puede cambiar su concentración de ppp. Por lo que, si el tamaño es muy grande, pueden pesar demasiado para usarlas en la web. De ser así, pásate a su versión en SVG, JPEG o JPG.

Formato SVG

El SVG es un formato vectorial. Esto quiere decir que no pierde calidad al redimensionarse. Además, es editable con cualquier programa que trabaje con vectores como por ejemplo Adobe Illustrator.

Probablemente este sea el formato que menos te suene. Sin embargo, lo cierto es que el SVG está en auge dado que ofrece fondos transparentes, pero pesa muchísimo menos que un PNG.

¿Necesitas una ilustración grande con fondo transparente? El SVG es la mejor opción que existe.

¿Quieres saber cuál es el secreto del formato SVG? Pues que no es una imagen propiamente dicho, sino un código. Dicho de otra forma, el SVG traduce un código en una imagen.

Esto te permite ver el gatito anterior a toda pantalla, que el peso será exactamente el mismo. La explicación es sencilla: su código no ha cambiado. Por ejemplo, haz clic derecho sobre el gatito de encima y luego en «Abrir imagen en una pestaña nueva». Verás lo que pasa ????.

El formato SVG es ideal para iconos y para el logo. Subiendo una sola imagen podemos hacer que se vea a diferentes tamaños usando CSS y sin perder una gota de calidad.

Pero tiene dos inconvenientes:

1. Como todo código, el SVG es hackeable. Si descargas un icono SVG gratuito, hazlo desde una fuente de confianza, ya que puede tener código malicioso sin que lo sepas.
2. Al ser un formato muy moderno, no todas las plantillas y maquetadores de WordPress aceptan imágenes SVG.

GIF y otros formatos salvajes

En general, los tres formatos anteriores son los más habituales para las imágenes WordPress. Pero existen otros: por ejemplo, tenemos los GIFs y los TIFFs.

Los GIF son un tipo de imagen que nos permite crear una secuencia. El resultado es que parece que se muevan, como un pequeño video. El problema es que pesan muchísimo, por eso debes usarlos con cautela. Aunque molen mucho.

Y si eres de la vieja escuela quizás tengas por ahí alguna foto o logo en formato TIFF. Es un formato muy específico de imprenta que guarda toda la información de la imagen, sin comprimir (a diferencia del JPEG). No deberías usarlo en web porque pesa un coj*n, básicamente ????

Pssst: ¿te gustan las imágenes que he usado? Echa un ojo a este artículo sobre los 3 secretos para elegir las adecuadas para tu web.

Cómo optimizar la medida de una imagen

Vale, lo has pillado. Cuanto más pequeña sea la imagen y menos información contenga, mejor. Anteriormente has visto que el primer paso es darle el formato adecuado. Ahora debes decidir qué medida necesitas. Es decir, el ancho y alto correctos.

Pero, ¿cómo puedes saberlo?

Combinando Analytics y el sentido común

El hecho es que las medidas de las imágenes de una web no tienen porqué ser las mejores para otra. Por eso, si ya tienes una web funcionando, echa mano de la info de Google Analytics y consulta cuál es la resolución de pantalla más usada por tus visitantes.

Dicha resolución te servirá para decidir la medida de tus imágenes más grandes. Hay dos formas de obtener esta información:

1. Si te mola el mundillo de Analytics, te dejo este tutorial en inglés.
2. Si tu dominio del tema es justito, lo que sí puedes hacer es ir a Audiencia > Tecnología > Dispositivos móviles. Así al menos sabrás si tus usuarios son más de pantallas grandes (PC) o pequeñas (móviles y tablets)

De todas formas, y para que te sirva como guía, por lo general yo pienso que las medidas y los pesos ideales son los siguientes:

• Para fondos a toda pantalla: más de 1200px de ancho pero siempre menos de 150kB de peso.
• Para imágenes individuales: entre 600px y 800px de ancho y menos de 100kB.
• Imágenes de producto para galerías tipo WooCommerce: me gusta establecer que el ancho sea de 1200px y el peso menor de 120kB. Si bien es cierto que en la mayoría de plantillas las imágenes de producto son más pequeñas, la tendencia es ir poniéndolas cada vez más grandes.
• Iconos, ilustraciones y logos: no me suelo preocupar por el tamaño ya que por motivos de diseño suelen ser pequeños. Pero me gusta que pesen menos de 80kB.

Tranqui, ahora explico cómo reducir el peso de una imagen ↙️

Herramientas para reducir tamaño de las imágenes

Como te he dicho antes, yo no uso mucho el sistema que WordPress tiene integrado para cambiar el tamaño de las copias que hace. Me gusta dar un tamaño muy concreto a las imágenes, por lo que generalmente las redimensiono a mi gusto y las subo tal cual.

• Photoshop, Illustrator, Paint, GIMP: casi cualquier programa de edición de imágenes, por sencillo que sea, te permite cambiar el tamaño de las imágenes. Los más avanzados además te permiten hacerlo con varios archivos a la vez.
• Bulkresizephotos.com: hace años que la uso. Puede procesar muchas imágenes a la vez y redimensionarlas a un ancho o alto concreto en un clic y listo. Cuando tienes que hacerlo en 100 imágenes, te aseguro que te ahorrará mucho tiempo.

Plugins para comprimir imágenes en WordPress

Si no quieres que tu web acabe siendo la Ramona Pechugona de Internet, te voy a dar un par de consejos. Consejos que admito que me cuestan seguir. No soy la más indicada y de hecho alguna disertación sobre el tema con morros incluidos he tenido con Pablo.

1. Si la imagen no es importante, intenta que pese lo mínimo posible. Ya sé, es una foto muy bonita y que podría lucir más. Sé que los colores son brutales. Entiendo que el hecho de que se vea el bigote del gato es un detalle gracioso. Pero si no es crucial para tu usuario, prescinde de ello.
2. Baja la calidad de la imagen al mínimo aceptable para el ojo humano y sube esa versión a tu web. El peso será óptimo.

Da mucha pereza, lo admito. Pero comprimir imágenes es un paso crucial para que tu web sea ligera.

Por eso, a continuación comparto contigo herramientas y plugins que te permiten quitar datos y peso a tus imágenes sin que pierdan (casi) calidad. ¡Básico para optimizar tus imágenes en WordPress!

Imagify

• Instalaciones activas: más de 100.000.
• Valoración de usuarios: Muy alta.
• Precio: Gratis hasta 25MBs al mes o hasta 50MBs si te inscribes.
• Enlace al repositorio oficial: Imagify Image Optimizer.

De los tres plugins para optimizar imágenes en WordPress que te listo, este es el único que hemos probado y utilizamos. Por lo tanto, es el que personalmente te puedo recomendar. ¿Quiere decir esto que los demás no son adecuados para ti? Para nada. Simplemente, en SrMomo nos gusta hacer énfasis en lo que utilizamos en nuestro día a día.

¿Por qué es nuestro plugin elegido? La razón viene por la forma en que lo conocimos. Los autores de este plugin son los mismos que están tras el plugin de caché WP Rocket. Este último ya lo utilizábamos desde hacía tiempo y al estar encantados con él, rápidamente confiamos en ellos para optimizar imágenes.

Dicho esto, voy a lo que te interesa: ¿cómo te ayuda Imagify a optimizar las imágenes de tu WordPress? Al utilizarlo, Imagify reemplaza automáticamente las imágenes con su versión optimizada.

Además, te permite escoger tres niveles de compresión distintos:

• Normal: es el nivel de menor compresión. Eso sí, la imagen no pierde ni un ápice de calidad.
• Agresivo: a este algoritmo de compresión se le llama «lossy». Te comprime mucho una imagen con una mínima pérdida de calidad. Cabe decir que esta pérdida es casi siempre imperceptible para el ojo humano. Este es el nivel que nosotros utilizamos.
• Ultra: como su nombre indica, te aporta el mayor nivel de compresión. Eso sí, tu imagen también pierde algo más de calidad.

¿Qué nivel de compresión es el ideal para ti? Depende de hasta qué punto quieres tener tus imágenes optimizadas. En este sentido, mi mayor consejo es que hagas pruebas y decidas por ti mismo. De todos modos, te dejo un enlace que los de Imagify facilitan para que puedas comparar los diferentes niveles.

La razón por la que aún así te recomiendo que lo pruebes es que no debes preocuparte por perder la imagen original. Efectivamente, Imagify por defecto guarda la imagen que tú subes a WordPress y te permite restaurarla en cualquier momento.

Fíjate, esto es lo que aparece en la biblioteca de Medios junto a una imagen que ha sido optimizada:

Pero esto no es todo.

Otros puntos interesantes de Imagify

• Por defecto, elimina los datos EXIF de tus imágenes. ¡Viva la privacidad!
• Puedes escoger que por defecto te optimice toda imagen que subas de forma automática. Así luego no tienes que ir una por una.
• ¿Qué pasa con todas las imágenes subidas previamente? Sin problemas. Imagify tiene la opción de Optimización Masiva en la que básicamente va optimizando tus imágenes de más recientes a más antiguas. Es una optimización en bulk. Eso sí, lo hará hasta que topes con tu límite mensual de megas.
• Los 50MBs gratuitos para optimizar imágenes que tienes al mes te da para entre 500 y 1.000 imágenes. Creo que está super bien. Irás sobrado si tú ya subes las imágenes redimensionadas. Y si no es suficiente para ti, por 4,99$ al mes tienes un límite de 1GB (te da para unas 10.000 imágenes).

En definitiva, Imagify es un plugin excelente que optimiza imágenes y las comprime. Sin duda te ayudará a ganar en velocidad de carga.

WP Smush.it

• Instalaciones activas: más de un millón.
• Valoración de usuarios: Excelente.
• Precio: Gratis. Opción Pro a 49$ al mes para más funciones.
• Enlace al repositorio oficial: Smush Image Compression and Optimization.

Smush es sin duda el plugin más popular para optimizar imágenes en WordPress. La inmensa cantidad de instalaciones junto a la excelente valoración son dos argumentos de peso para que le eches una ojeada.

Respecto a Imagify, lo bueno que tiene Smush es que no tiene un límite mensual de cantidad de megas que te permite procesar. Lo malo es que para algunas opciones tienes que pillarte la versión de pago. Por ejemplo, la optimización masiva o en bulk, así como la redimensión automática, que sí te vienen con la versión gratuita de Imagify.

EWWW Image Optimizer

• Instalaciones activas: más de 700.000.
• Valoración de usuarios: Muy alta.
• Precio: Gratis pero si quieres usar su API (sus servidores) pagas por uso.
• Enlace al repositorio oficial: EWWW Image Optimizer.

Este plugin hace lo mismo que los anteriormente comentados. Por eso voy solamente a comentarte lo que creo que lo diferencia a partir de las informaciones que he leído, sin haberlo usado.

Lo bueno que tiene EWWW es que no tiene limitaciones, al igual que Smush. La parte negativa es que la versión gratuita optimiza tus imágenes directamente en el servidor de tu hosting. Para utilizar sus servidores debes pagar por ello. En cambio, Imagify trabaja siempre desde sus servidores, algo a priori deseable pues son servidores mejor preparados para ello.

Herramientas externas

Ya has visto que tienes a tu disposición varios plugins WordPress con los que puedes optimizar imágenes. Puedes optimizar imágenes con cualquier de ellas pues para mi son los mejores plugins en este sentido. Adicionalmente, hay herramientas online que también te pueden ayudar en dicha labor.

Estas son las herramientas online fuera de WordPress que más utilizo:

• Photoshop, Illustrator, GIMP o similares: este tipo de programas de edición gráfica nos permiten ajustar los ppp y el porcentaje de calidad de las imágenes. Pero la mayoría son de pago y requieren de conocimientos para usarlas adecuadamente.
• TinyJPG o TinyPNG: esta web te permite subir varias imágenes en JPEG/JPG/PNG y las comprime quitándole todos esos datos inútiles que te comentaba más arriba. En las JPG además baja la resolución a 72ppp. La verdad es que ahorra mucho espacio y a mí me encanta: la utilizo en mi día a día. Y no, no es porque tenga un panda super mono (que también ????).

Importante: de nada sirve usar alguna herramienta o algún plugin para optimizar imágenes WordPress (aligerar su peso) si antes no las has dimensionado correctamente.

Trucos para que una imagen pese (aún) menos

Por retorcido que parezca, existen más cosas que se pueden hacer para que una imagen pese menos. Básicamente se trata de disminuir el número de colores que aparecen en una imagen. El color es información: cuantos menos colores, ¡menos peso!

Por ejemplo, con un poco de soltura podrías hacer lo siguiente:

• Una imagen en blanco y negro.
• Con efecto duotono: similar al blanco y negro, pero puedes escoger los dos colores. El resultado queda mucho más moderno.
• Con una capa semitransparente: añádela encima de la imagen y guarda una nueva imagen con el resultado.
• Imagen con un degradado semitransparente encima: misma mecánica que en el punto anterior, pero el resultado es mucho más guachi.

[Extra] Lazy Load: qué es y para qué sirve

El Lazy Load es un patrón que se usa en desarrollo web para que las imágenes se carguen a medida que el usuario las necesite y no antes. Es decir, si una imagen se encuentra a mitad de nuestra página, cargará cuando el usuario llegue a la mitad de la página.

Esta pequeña funcionalidad te sirve para que los tiempos de carga inicial de la web se reduzcan. Mientras el contenido escrito se carga en su totalidad, las imágenes lo hacen de forma gradual con el scroll.

Por ejemplo, el Lazy Load es muy útil si haces uso de sliders, ya que irá cargando las imágenes de las diapositivas a medida que se vayan desplazando. Hablando de sliders, te recomiendo sin duda Slider Revolution. Entre otras caracaterísticas, ¡lleva de serie el Lazy Load!

De todas formas, si de verdad te interesa esta función de carga diferida de imágenes, necesitas un plugin de caché que la incorpore. Por ejemplo, WP Rocket, que te he mencionado ya anteriormente, lo hace y es el que nosotros utilizamos y te podemos recomendar.

Conclusión: reduce, redimensiona y optimiza tus imágenes WordPress

En este blogpost he querido mostrarte todo lo que necesitas para saber cómo optimizar imágenes. Desde el formato de una imagen hasta su peso pasando por su tamaño.

La optimización de imágenes es un coñazo… lo sé. Pero a la larga te acostumbras y es automático. Llega un punto que cada kB de más en una imagen te duele.

Entonces es cuando te preguntas cómo demonios has podido dormir todo este tiempo subiendo imágenes grandes y pesadas. ????

¿Tienes alguna duda? ¿Conoces otro plugin u otra herramienta para optimizar imágenes en WordPress que quieras compartir? ¡Déjame tu comentario!