Es el error más frecuente y seguramente más grave entre los principiantes: no optimizar las imágenes antes de subirlas a su web. Esto provoca que los tiempos de carga se disparen, una verdadera catástrofe para el SEO. Sin ponerme demasiado técnico, te voy a explicar en esta guía las distintas formas de optimizar las imágenes antes de subirlas a tu web.

Cómo optimizar las imágenes para WordPress

A la hora de subir imágenes a tu sitio, ya sean tuyas propias o de algún banco de imágenes, hay que tener en cuenta dos cosas: su formato y su compresión. En combinarlos de la manera correcta está la clave del éxito.

El formato

Para el común de los mortales, los formatos más importantes son el JPG y el PNG.

• El JPG se usa para la mayoría de las imágenes y fotos. Es un tipo de archivo comprimido que reduce el peso de las imágenes.
• El PNG se usa en imágenes con fondo transparente, como por ejemplo el logo de tu web. Es un formato sin compresión y con más calidad de imagen. Pero claro, con bastante más peso.

Así que lo normal sería que subas tus imágenes a la web en JPG.

La compresión

La compresión es una forma de eliminar datos redundantes o irrelevantes de las imágenes con la menor pérdida de calidad posible.

Para comprimir una imagen, vas a tener que echar mano de herramientas de edición. Te voy a aconsejar algunas para que elijas la que más te guste o más fácil te sea de usar.

Programas de edición de imágenes

Adobe Photoshop

Photoshop es el software de edición de imágenes por excelencia, usado por millones de diseñadores, ilustradores, fotógrafos, etc.

Dentro de los cientos de miles de opciones que tiene, existe la de guardar una imagen para web, y es muy sencillo. Solo tienes que hacer clic en Archivo > Guardar para web.

Se abrirá una nueva ventana. En la parte derecha puedes cambiar el formato, y si eliges JPG la calidad de la compresión. Puedes elegir entre baja, mediana, alta, muy alta y máxima. La calidad de la imagen resultante la verás en la misma ventana. Abajo a la izquierda verás el peso que tendrá la imagen al guardarla, y abajo a la derecha puedes reducir el tamaño. Juega con todos esos valores hasta conseguir la mejor relación calidad – peso.

GIMP

Photoshop es una herramienta de pago (y no precisamente barata), aunque puedes conseguir una versión de prueba. Pero como lo normal será que no te compense la inversión, GIMP es la alternativa gratuita a Photoshop, y la puedes descargar libremente aquí. Eso sí, deberás instalar este plugin para habilitar la opción de «guardar para web». Lo bueno es que al trabajar ya con WordPress, no te sonará tan raro eso de los plugins 😛

Una vez descargado el plugin, extráelo y cópialo en la carpeta de instalación del programa. Si no la cambiaste durante la instalación, la ruta habitual sería:

C:\Documents and Settings\tu-nombre-de-usuario\.gimp-2.6\plug-ins

Una vez instalado el plugin en GIMP, la forma de guardar las imágenes para web es muy parecida a Photoshop. Haciendo clic en Archivo > Save for web se abrirá una ventana como esta:

Ajustando la barra de Quality se actualizará la previsualización de la imagen y el peso que tendrá (File size). La barra de Smoothing corresponde al suavizado, una especie de desenfoque para usar en imágenes de muy poca calidad, pero que no influye demasiado en el peso.

TinyPNG

TinyPNG es una aplicación web gratuita para reducir el peso de las imágenes. Y que no te engañe el nombre. También trabaja con archivos JPG.

Esta aplicación no la tienes que descargar o instalar, trabaja directamente online. Lo único que tienes que hacer es acceder a la web y subir tus imágenes. Lo bueno es que permite subidas múltiples. Una vez subidas, TinyPNG las comprimirá y te facilitará un enlace para descargar las imágenes ya optimizadas, que son las que tendrás que subir en tu web.

JPEG Mini

JPEG Mini es una herramienta muy parecida a la anterior. Trabaja también directamente en la web, aunque existe una versión para PC y para Mac que puedes probar, comprar y descargar. La reducción de peso que consigue en algunos casos es impresionante, con una pérdida de calidad prácticamente inapreciable.

ImageOptim

ImageOptim es otra opción a tener en cuenta, sobre todo si eres usuario de Mac. No hay versión PC, por lo que en ese caso tendrás que usar el servicio de optimización online, que tengo que decir que no es muy amigable en cuanto a facilidad de uso.

Compresión de imágenes con plugins

Smush

Smush es la manera de optimizar las imágenes de los más… vagos 😛 Un plugin que al instalarlo en tu web, te hace todo el trabajo. Irá optimizando automáticamente todas las imágenes que vayas subiendo. También tiene la opción de optimizar las imágenes ya subidas, aunque en la versión gratuita esta tarea está limitada a 50 imágenes cada vez.

Yo personalmente prefiero no usar plugins para optimizar imágenes por varias razones:

• Los resultados no son tan buenos como con los programas anteriores.
• Con plugins no vas a tener el control total sobre la compresión y la calidad final de la imagen.
• Te quitas un plugin de encima.

La prueba del algodón

Para ver cuál es la mejor opción de todas, vamos a ponerlas a trabajar. He elegido esta imagen con el típico fondo de Windows y la iré pasado por todas las herramientas. Es una imagen bastante grande y pesada, pero así se apreciarán mejor las diferencias entre unas opciones y otras.

Herramienta utilizada	Tamaño final
Imagen original	1,1 Mb
Photoshop (calidad máxima)	1,3 Mb
Photoshop (calidad muy alta)	883,7 Kb
Photoshop (calidad alta)	412,8 Kb
Photoshop (calidad media)	172,8 Kb
Photoshop (calidad baja)	97,79 Kb
GIMP (optimización nivel medio)	173,8 Kb
TinyPNG	252,6 Kb
JPEG Mini	399 Kb
ImageOptim (calidad alta)	404 Kb
ImageOptim (calidad media)	250 Kb
ImageOptim (calidad baja)	151 Kb

En la comparativa no entra Smush porque lo que este plugin hace es optimizar las miniaturas y los distintos tamaños de imagen que usa WordPress. La foto original solo la optimiza en cuentas PRO.

Conclusión y consejos

Como ya sabes, es fundamental cuidar el tamaño y peso de las imágenes. Y si, lo reconozco. Es un poquito coñazo tener que editar todas las fotos una a una, pero hay que hacerlo sí o sí. Como consejos finales, te podría decir que:

• Acostúmbrate a optimizar tus imágenes SIEMPRE.
• Programas como Photoshop o GIMP dan mejores resultados que las herramientas que trabajan en la nube. Además te van a permitir añadir tu logo o tu nombre y trabajar el branding.
• Como norma general, procura no subir imágenes mayores de 800 o 900 píxeles (piensa en los usuarios de móviles).
• El peso dependería del tamaño de la imagen, pero una imagen pequeña no debería pasar los 20 kb, y si para una cabecera o algo así necesitas una imagen muy grande, procura que no supere los 200 kb.

Así que ya sabes. A optimizar las imágenes y a compartir esta entrada con tus colegas blogeros que creas que no están optimizando bien sus fotos.

Si tienes cualquier duda o comentario, deja tu mensaje aquí abajo o contacta conmigo.