Cómo optimizar las imágenes y miniaturas en WordPress … ¡sin plugins!

¿Porqué no utilizar plugins para optimizar imágenes en WordPress?

Sabemos de la importancia de  optimizar y comprimir las imágenes de nuestros artículos en WordPress, tanto en dimensiones como en resolución y calidad, para que reducir el tiempo de descarga de nuestras páginas y no penalizar nuestro posicionamiento SEO.

Esto podemos (¡debemos!) hacerlo fácilmente con las imágenes que creamos y subimos nosotros mismos al gestor de contenidos, pero ¿cómo comprimir las imágenes que WordPress, el Theme o los plugins generan automáticamente cada vez que subimos una imagen?

Una solución, generalmente válida, consiste en utilizar cualquiera de los plugins disponibles para que hagan esta tarea. Sin embargo, presenta algunos inconvenientes:

• Supone tener un plugin más instalado en WordPress, lo que siempre tiene algún efecto en el rendimiento final del gestor de contenidos.
• Consumen recursos del servidor (memoria, procesador o ancho de banda) cuando están optimizando las imágenes.
• Pueden requerir tareas adicionales de instalación o configuración que no todos estamos en disposición de hacer (por ejemplo, EWWW Image Optimizer requiere tener algunas librerías de compresión instaladas en el servidor).
• Dependen de servidores terceros para realizar la optimización (como WP Smush It). Aunque esto libera a nuestro propio servidor, estaríamos sujetos a las especificaciones, limitaciones de ese tercero o, raro pero posible, que el servidor se haya caído y no estemos al tanto de ello.
• A muchos de nosotros (me incluyo) nos produce cierta “incomodidad” el que haya un proceso ejecutándose en segundo plano sin saber muy bien qué están haciendo, a veces manipulando la base de datos, y que añaden un punto de posible fallo.

Sin embargo, con las herramientas adecuadas y un procedimiento bien definido, nosotros mismos podemos optimizar estas imágenes dentro del propio proceso de publicación, en apenas un minuto.

Procedimiento para optimizar imágenes en WordPress al publicar tu post

Mientras estamos escribiendo un artículo o lo releemos antes de su publicación, siempre surge alguna idea nueva, un enfoque ligeramente distinto o algún retoque.

Por este motivo, os recomiendo que dejéis la optimización de imágenes en WordPress para el último momento, cuando tengáis claro que ya vais a publicar el artículo tal como está. De esta forma, os evitáis tener que repetir el proceso de optimización. En mi caso, lo hago después de publicarlo y de haber hecho una revisión rápida del artículo.

Para la optimización sólo vamos a necesitar dos herramientas: un cliente FTP (aquí utilizaré FileZilla) y una utilidad para comprimir imágenes, sea online o aplicación de escritorio  (aquí utilizaré la herramienta online Kraken).

Podéis utilizar cualesquiera otras de vuestra preferencia, pero es importante que la herramienta de optimización permita la compresión por lotes; es decir, que pueda optimizar un bloque de imágenes de una vez. También ayuda, y mucho, que el cliente FTP sea gráfico, no mediante comandos de texto.

Veamos ahora el procedimiento, paso a paso:

1. Organiza las carpetas de imágenes por mes y año.

Aunque no imprescindible, es recomendable que en WordPress organicemos los archivos en carpetas por mes y año, ya sea en el mismo dominio que la web o en un subdominio. Aunque hay mucho debatido sobre la conveniencia o no de hacerlo así, lo cierto es que nos facilita enormemente la organización y posterior gestión de los ficheros.

Por un lado, nos facilita la localización de los ficheros de imágenes en WordPress y, por otro, sigo considerando que para un sistema operativo y un sistema de ficheros resulta mucho más fácil manejar 10 carpetas con 1.000 ficheros cada una, que 1 carpeta con 10.000 ficheros.

2. Accede por FTP a tu servidor de alojamiento

Conéctate con tu cliente FTP a tu servidor de hosting y ubícate en la carpeta de las imágenes que quieras optimizar. En mi caso, la carpeta correspondiente al mes de abril de 2016:

3. Localiza las imágenes que quieras optimizar

Tu cliente FTP te mostrará todos los ficheros que haya en esta carpeta. En el momento de escribir la presente, estamos a mediados abril y ya tengo casi 500 ficheros, ocupando 15Mb… Fijaos también en cómo se repiten las imágenes, cambiando sólo las dimensiones en el nombre del fichero:

4. Seleciona las imágenes que vayas a optimizar

Ahora selecciona las imágenes que vayas a optimizar. En este caso, seleccionaré las correspondientes a mi artículo de recopilación sobre Marketing Digital de marzo. Me resulta fácil hacerlo porque habitualmente subo todas las imágenes de un artículo cuando prácticamente lo tengo terminado, así que todas tienen la misma fecha y hora. En este caso, “sólo” son 88 imágenes, que ocupan 2,5 Mb. Para que os hagáis una idea, ese artículo tiene 14 imágenes; el resto las ha generado WordPress, el Theme y los plugins, ¿veis ahora lo importante que es optimizarlas?:

5. ¡Copia las imágenes a tu ordenador!

Copia estas imágenes a una carpeta vacía de tu ordenador. Es importante que esté vacía para facilitar las operaciones posteriores. Además, esta carpeta quedaría como copia de seguridad en caso que metamos la pata (hay que curarse en salud… ¡SIEMPRE!).

¡CON UN 20% DE DESCUENTO!

6. Prepara tu herramienta para optimizar imágenes

Ejecuta (si es aplicación de escritorio) o accede (si es una aplicación online) a tu herramienta de optimización de imágenes favorita. Kraken tiene un interface muy sencillo, optimiza tanto PNG como JPG con o sin pérdida (casi siempre elijo con pérdida (2), “lossy”, que es inapreciable) y, lo más importante, permite optimizar un lote de imágenes de una vez, con sólo arrastrar los ficheros al cuadro (3):

7. Ahora sí: optimiza las imágenes desde tu ordenador

Arrastra o carga las imágenes en la herramienta de optimización, espera unos segundos y… ¡ya están todas optimizadas! En el caso de Kraken, muestra un listado con todas las imágenes, indicando la reducción en tamaño:

Como podéis ver en las columnas de “Savings” y “% Savings”, la optimización ha reducido el espacio ocupado por las imágenes en 700 Kb, casi un 30% menos que al principio.  Habida cuenta que la mayoría son thumbnails e imágenes de pequeño tamaño, es una reducción bastante apreciable. Observaréis también que hay algunas imágenes que Kraken no optimiza (1): son las originales que subí a WordPress, ya más que optimizadas.

En Kraken podéis descargar las imágenes una a una (2), almacenarlas en vuestro Dropbox (3) o descargarlas en vuestro ordenador un fichero comprimido ZIP (4) con todas ellas. Descarga el fichero ZIP y descomprímelo en una carpeta de tu ordenador.

8. Copia las imágenes optimizadas a tu servidor con el cliente FTP

Utiliza el cliente FTP para copiarlas de vuelta a la misma carpeta donde estaban, sobrescribiendo las anteriores (recordad que seguís teniendo una copia de las originales en vuestro ordenador, por si cometéis algún error en algún punto).

Como son muchas imágenes, asegúrate que le indicas al cliente FTP que sobrescriba todos los ficheros (1 y 2), pero sólo durante esta sesión o cola de copiado (3); en contadas ocasiones es aconsejable dejar por defecto que se sobrescriban los ficheros:

9. ¡Y ya está!

Ya hemos terminado y ahora podemos admirar en el servidor, a través del cliente FTP, nuestras flamantes imágenes optimizadas 🙂

En la siguiente imagen, os muestro algunos ficheros después (izquierda) y antes de la optimización (derecha), para que veáis cuánto se ha reducido cada uno. Observad cómo en las imágenes del bloque 1, la optimización ha sido mucho mayor que para las imágenes del bloque 2:

En función de la complejidad de la imagen (número de colores, variedad gráfica, dimensiones, etc.), las imágenes se optimizan en más o menos tamaño. En este caso, las imágenes del bloque 2 son menos complejas que las del bloque 1, lo que da menos margen para la optimización.

En este punto, si queréis, podéis navegar por vuestra web un ratito para comprobar que todo está perfecto, pero dado que sólo hemos copiado ficheros, sin ejecutar nada en el servidor ni tocar la base de datos, y siempre que hayamos sido cuidadosos y sistemáticos, difícilmente puede haber un procedimiento más seguro y estable que éste.

Conclusiones

Sin lugar a dudas, los plugins de WordPress nos proporcionan utilidades y funcionalidades extremadamente útiles en la gran mayoría de los casos. Sin embargo, no es menos cierto que esta ventaja viene con un precio; a saber: mayor consumo de recursos de nuestro servidor de alojamiento.

Por este motivo, siempre hay que evaluar el beneficio que un plugin nos proporciona frente al posible perjuicio que nos podría provocar e, incluso, si es posible sustituirlo por tareas menos automáticas o por líneas de código PHP, HTML o CSS personalizados.

Cuando subimos una imagen a la librería de medios, WordPress genera varias imágenes de diversos tamaños, en función de su configuración, del Theme y de los plugins instalados. Aunque la imagen original esté optimizada, estas copias no lo están.

Disponemos de plugins optimizadores de imágenes, como EWWW Image Optimizer o WP Smush It, que pueden optimizar las imágenes de WordPress por nosotros, pero os propongo una alternativa manual, basada en un procedimiento sencillo de pocos pasos que solo requiere utilizar dos herramientas: un cliente FTP y una aplicación de optimización de imágenes. Este procedimiento se aplicaría cuando se publique el artículo y, dada su sencillez, apenas supondría un minuto adicional de nuestro tiempo.

¿El beneficio que se obtiene? Tener un plugin menos consumiendo recursos del servidor, controlar directamente la optimización de imágenes y eliminar una posible fuente de errores debido a un proceso que estaría ejecutándose en segundo plano.

¿Qué opinas de prescindir de plugins optimizadores de imágenes? Posiblemente sean buena opción para blogs con alto índice de publicación (varios artículos diarios y diversos autores) pero, para blogs con solo un autor y una frecuencia de publicación semanal o varias veces por semana, creo que este procedimiento manual es más que suficiente, ¿piensas lo mismo? ¿Por qué no 😉 ?

Imágenes: iconfinder, lifeofpix, elaboración propia.

Twitter

Facebook

email