Dimensiones

Una de las cosas que tienes que tener claras a la hora de preparar tus imágenes y optimizarlas es el tamaño en píxeles que va a ocupar en tu web. Pues si se va a mostrar en un espacio de 500px x 350px, es bastante absurdo que las subas en un tamaño de 1280px x 896px, ya que no se está mostrando a su tamaño real, por lo que estarías obligando a WordPress a redimensionarla y por lo tanto a consumir recursos solo para esta tarea.

Además, aunque parezca extraño no solo se pierde calidad al agrandar las imágenes, sino que, a veces, al reducirlas también se pierde. Por lo tanto, asegúrate de redimensionarlas correctamente a las que se van a mostrar.

Peso

Otra cosa muy importante, es el peso que tengan las fotos a la hora de subirlas a nuestra web. A día de hoy hay gente que todavía tiene la idea equivocada de que si pesa mucho quiere decir que se va a ver mejor, y para nada es así. Debes buscar un equilibrio entre el peso de la imagen y su calidad, y a esto también ayuda que, como indicábamos en el punto anterior, tengan las dimensiones correctas. A ser posible, procura que nunca superen los 100kb, pero, si es menos, mejor que mejor.

Formato

El formato es otro punto clave. Y aquí debemos tener claro el tipo de imagen que vamos a necesitar para poder utilizar uno u otro. Por ejemplo, si no va a tener transparencia, no necesitaremos guardarla en PNG. Este formato guarda el canal alpha, del cual no estaremos haciendo uso y no vale la pena lo que “ganamos en calidad” al no comprimirla, con el peso final que obtendremos.

El formato JPG/JPEG es el recomendado para subir nuestras imágenes optimizadas en WordPress.

Por lo tanto, es recomendable en la mayoría de los casos utilizar el formato JPG/JPEG, ya que es un formato que comprime bastante bien las imágenes y, bien utilizado, la pérdida de calidad que tiene es tan mínima que no es apreciable.

Hay que indicar, que el formato WebP, sería el más indicado para las imágenes de nuestra web, pues es un formato que optimiza a las mil maravillas tanto la calidad como el peso. Pero por desgracia no todos los navegadores lo soportan, por lo que para poder utilizarlo es mejor usar algún plugin que te permita detectar si el usuario puede verlo (luego os hablaré de él).

Optimizar imágenes en WordPress manualmente

Si eres de los que prefiere controlar desde su propio escritorio el proceso de optimización de imágenes para WordPress, puedes hacerlo con varias herramientas. Entre ellas se encuentran:

Photoshop

Este programa de pago mundialmente conocido para la edición de fotografías, cuenta con una herramienta específica para guardar imágenes optimizadas para web, y es realmente sencilla de utilizar. Por ello te voy a dar una breve explicación de cómo utillizar esta herramienta.

Después de haber adaptado el tamaño de tu imágen, solamente tendrás que ir a Archivo->Exportar->Guardar para Web (heredado) y te mostrará una pantalla en la que podrás elegir varias opciones, entre las que controlarás el formato y la calidad, a la vez que podrás controlar el peso resultante antes de guardarlo y siempre con una previsualización disponible en tiempo real. Así podrás valorar tú mism@ dónde queda el punto de equilibrio entre el peso y la calidad.

Affinity Photo

Una alternativa más económica que Photoshop, la cual también dispone de funciones integradas de optimización de imágenes. Todo es que la pruebes y valores si la prefieres a Photoshop.

Gimp

Una herramienta gratuita, algo compleja de aprender a utilizar al principio, pero con buena optimización de imágenes. La puedes descargar desde el siguiente enlace.

Optimización de imágenes para WordPress online

Puedes utilizar herramientas online que hacen sencilla la tarea de optimizar imágenes para WorPress. Y algunas de esas herramientas son:

TinyPNG

Esta herramienta online es muy sencilla de utilizar. Pues básicamente se trata de acceder a su web y subir las imágenes que queramos (bien arrastrando o seleccionando desde el navegador). Una vez las procesa de forma automática y casi instantánea, nos da la opción de descargarla y además indica el porcentaje de optimización que ha sido posible aplicarle con la mínima pérdida de calidad posible.

Optimizilla

Otra alternativa que al igual que TinyPNG es rápida y fácil de usar. Podemos subir hasta 20 imágenes de golpe, pero con la diferencia de que esta herramienta sí nos deja seleccionar la calidad, controlando mejor el peso final.

También muestra una previsualización de cómo se verá el resultado final. Para poder probarla puedes acceder a su página desde aquí.

Compressor.io

Similar a las otras 2 herramientas online que podemos usar. Esta web nos ofrece la posibilidad de seleccionar entre los tipos de compresión LOSSY, LOSSLESS y CUSTOM (este último está disponible con suscripción) y los resultados son muy óptimos también.

De nuevo tan solo tienes que seleccionar las imágenes a comprimir, con un peso límite de 10MB y la herramienta hará el resto del trabajo.

Imagify

Versión Premium que podemos descargar desde aquí. En su versión gratuita optamos hasta hasta 25MB mensuales para imágenes que tengan un peso máximo de 2MB. Su configuración es muy básica y sencilla y consiste en indicar los niveles de optimización y dejar que el propio plugin haga el resto del trabajo. Además en la galería podrás ver las estadísticas de compresión (algo muy útil para comprobar el trabajo que está haciendo, y para tenerlo en cuenta a la hora de generar las fotos antes de subirlas).

Imsanity

Este plugin “solo” tiene una función, pero resuelve el mayor problema que nos ha pasado a todos, y es la de redimensionar las imágenes. No te desvelo nada si te digo que las fotos suelen aumentar su peso cuanto mayor es su tamaño, así que al redimensionarlas a su tamaño real, automáticamente vas a conseguir una reducción de su peso.

Imsanity te permite configurar el máximo de ancho, alto y calidad de las imágenes que tengas almacenadas como las que vayas a subir a partir de su instalación. Con esto te aseguras de que aunque se suba alguna de mayor medida, ésta va a ser redimensionada automáticamente.

A3 Lazy Load

Como he dicho al principio del artículo, las imágenes tienen un gran impacto en la velocidad de carga una web. Así que, ¿qué tal si “engañamos” a Google con este plugin? Tiene la opción de hacer que las fotografías vayan cargando a medida que el usuario va haciendo scroll. Con esto vas a lograr que la velocidad de carga mejore ya que no tendrán que cargar todas de golpe.