Cómo automatizar la optimización de las imágenes de tu web

Optimizar las imágenes de tu web es una tarea que ya deberías estar haciendo si quieres que tu blog sea rápido, ligero y que ofrezca una buena experiencia de usuario para tus lectores.

Ojo porque este no es el clásico artículo donde te enseñan 27 aplicaciones y plugins para optimizar tus imágenes pero nunca te explican ninguna en profundidad, y al final solo terminas con un cacao de nombres en la cabeza porque no sabes con qué solución quedarte.

En esta guía voy a hablarte de cuál es la mejor herramienta, la que utilizo yo, tanto por sus capacidades de compresión, tanto como su facilidad de uso y sus posibilidades de automatización, y además gratis.

Por qué optimizar las imágenes de tu web

Porque a no ser que tengas un blog por puro hobby (y aun así, seguro que te hace ilusión que te lea alguien), tu objetivo será aparecer en las primeras posiciones de Google para que la gente te descubra y vea que eres una persona que puede ayudarles.

Para conseguir aparecer en el top 10 de resultados vas a necesitar caerle bien a Google, y uno de los factores que más tiene en cuenta el buscador a la hora de decidir quién irá antes que quien, es la velocidad de carga de la web.

Gran parte de esta velocidad vendrá dada por tu proveedor de hosting (ya sabes que yo confío en SiteGround), pero una vez solucionado ese punto el resto está en tus manos.

Si petas una entrada de tu blog con 40 imágenes de 5MB cada una, ni SiteGround (ni ningún otro proveedor) podrán hacer nada para ayudarte.

Si te vas a páginas como GTmetrix, Google Pagespeed, o Pingdom, verás que gran parte del tiempo de carga y de las sugerencias de mejora que se proponen, están relacionadas con el peso de tus imágenes.

Google siempre quiere más

Yo optimizo absolutamente todas las imágenes antes de subirlas al servidor, y aun así siempre me encuentro con el maldito mensaje que me invita a comprimirlas aun más.

Tampoco tienes que obsesionarte con esto, ya que como ves Google te puede pedir hasta que comprimas y optimices una imagen para ahorrar un mísero KB.

No merece la pena llegar a ese nivel, lo importante es que seas consciente de la importancia que tiene optimizar tus imágenes para ganar velocidad, y comiences a hacerlo para cumplir unos mínimos.

Lo que debes saber a la hora de optimizar las imágenes de tu web

Optimizar las imágenes es algo que está en tu mano, aunque es cierto que puedes trabajar de manera inteligente y “delegar” esta tarea en alguna herramienta o plugin (como te enseñaré a lo largo de esta entrada), es importante que entiendas algunos conceptos básicos antes de hacerlo, ya que hay cosas que tendrás que hacer de manera manual.

Reduce la resolución para optimizar las imágenes de tu web

El típico error de novato que todos hemos cometido al comenzar con nuestros blogs.

Tenemos una foto de 3000 x 2000 px de cualquier banco de imágenes gratuitas y la subimos a nuestra web o blog sin más miramientos, sin ser conscientes de que eso es malgastar recursos.

En las páginas web (y sobre todo en los blogs, porque en e-commerces puede tener cierto sentido) no es necesario que las imágenes sean tan grandes.

Si incluyes una foto en un artículo, ésta solo se mostrará con el ancho que tu diseño permita, y este ancho suele andar entre los 700 y 900px, así que todo lo que suba de ahí simplemente sobra.

Es cierto que WordPress ha solucionado esto creando miniaturas (las puedes definir en Ajustes > Medios), pero en realidad esto es un pequeño parche que no es tan eficiente.

Si por ejemplo buscas un tamaño a medio camino entre el medio y el grande, terminarás por coger el grande para que se adapte automáticamente a tu ancho, y de nuevo estarás malgastando recursos; ya que lo que se verá será por ejemplo una imagen de 1.000px de ancho encerrada en un artículo de 700px de ancho.

Takeaway I: mide el ancho del contenido de tu web y haz que el máximo de las imágenes sea idéntico y así clavar la optimización; eso si, siempre que sea necesario. Si la imagen se ve bien con menos anchura, redúcela. El ancho del contenido de tu blog es tu máximo, no tu estandar.

Takeaway II: muchas veces no es necesario enseñarlo todo. Por ejemplo en la imagen anterior yo solo te he mostrado un apartado de los ajustes de WordPress y no WordPress entero, así que he eso me ha permitido añadir una imagen más pequeña y con menos peso.

Elige el formato adecuado para optimizar las imágenes de tu web

No soy un experto en este punto así que tampoco puedo explicarte a ciencia cierta por qué es así, pero la realidad es que ciertos formatos pesan más que otros, aunque esto varía en función del tipo de imagen que estés tratando (no es lo mismo una captura de pantalla que una fotografía)

Puede que estés cumpliendo el punto anterior a rajatabla, subiendo las imágenes a tu blog con las medidas justas para que carguen lo más rápido posible; pero si las estás subiendo por ejemplo en formato png, cuando utilizando un formato jpeg podría ofrecerte la misma calidad con un peso más reducido, entonces también estarás malgastando los recursos de tu servidor.

Como ya te he dicho no soy ningún experto en este tema, así que hasta que de con la clave de por qué sucede esto lo que yo suelo hacer es ensayo-error.

Antes de subir las imágenes a mi blog compruebo de manera local si todas las fotos que quiero incluir en la entrada pesan menos como .jpeg o como .png, el formato que resulte ganador es el que subo a la galería multimedia.

En mi experiencia te diré que normalmente las imágenes tipo fotografía (hechas con una cámara, con tu smartphone…) pesan menos como jpeg, mientras que las capturas de pantalla, diagramas, etc. (sobre todo si tienen pocos colores), pesan mucho menos si son archivos png.

Takeaway: una vez hayas optimizado el ancho y alto de tus imágenes, comprueba si pesa menos la versión «jpeg» o «png» de la imagen. En muchas ocasiones un simple cambio de formato puede significar una redución del 50% en el peso del archivo.

Ojo con los gifs

Hablando de formatos… Los gifs pesan una puta barbaridad.

Si se usan bien quedan muy chulos en los artículos y le dan un soplo de aire fresco y alegría al texto, pero yo procuro evitarlos a toda costa.

Todos los que he visto, (y los que he intentado crear), se suben rápidamente a los 2 o 3 MB de peso, así que si no es estrictamente necesario, yo evitaría incluirlos.

Takeaway: si puedes evitar el uso de gifs en tus artículos, eso que te llevas, no dejan de ser un archivo con decenas de imágenes reproduciéndose en bucle.

Si quieres explicar algo en movimiento el vídeo tiene muchos más beneficios.

Cómo optimizar las imágenes de tu web con TinyPNG

Una vez te hayas acostumbrado a seguir los consejos de los apartados anteriores de manera natural, llega el momento de meterle un poco más de magia al asunto.

Y es que en Internet vas a encontrar decenas de plugins, servicios y herramientas que te ayudarán a reducir el peso de las imágenes utilizando algoritmos, los cuales te permitirán conseguir una versión de la imagen que ocupe menos MB (o kB en las medidas en que nos movemos)

Más que optimización esto se conoce como una compresión de imágenes, y ojo porque hay dos tipos:

• Compresión sin pérdida (lossless). Es “la buena”, la imagen final será idéntica a la original, solo que mágicamente ocupará menos espacio. Por ese motivo la compresión es mucho menor.
• Compresión con pérdida (lossy). Es “la mala” ya que pierde un poco de información por el camino (lo que afecta a la calidad), pero a cambio la compresión es mucho mayor. Eso si, no pienses que vas a pasar de una foto que se ve perfectamente nítida a una imagen totalmente pixelada. Las compresiones lossy son muy respetuosas, y en muchas ocasiones no vas a notar la pérdida de calidad respecto a la foto original.

Y para realizar compresiones de las imágenes de tu web, en mi opinión hay una herramienta que se lleva la palma: TinyPNG y su panda.

No te dejes llevar por el nombre, porque este servicio también permite comprimir y optimizar imágenes en formato .jpeg.

Además de ser una herramienta muy buena y gratuita hasta cierto punto, tiene un logotipo muy majo, solo por eso ya deberías darle una oportunidad ?

Antes de nada has de saber que TinyPNG utiliza un algoritmo de compresión lossy, pero está tan bien programado que yo no noto la diferencia, y gracias a eso se consiguen unos ahorros de peso increíbles.

Es cierto que en la imagen del ejemplo las imágenes utilizadas eran pequeñas, pero te invito a que hagas la prueba con tus propios archivos para que veas que utilizar TinyPNG es totalmente seguro para la calidad de tus imágenes.

Cómo optimizar imágenes en la web de TinyPNG

Esta es la forma en la que seguramente más veces utilices la herramienta, ya que es muy fácil de utilizar y además es gratuita.

Cuando entres a la web de TinyPNG encontrarás una zona donde arrastrar y soltar tus archivos (.jpeg o .png)

La únicas limitaciones que existen aquí son que:

• No puedes arrastrar más de 20 elementos de una sola vez. Esto no sera un impedimento para ti, ya que seguramente no crees muchos artículos con más de 20 imágenes. Y si lo haces no tienes más que refrescar la web y volver a lanzar otras 20.
• No puedes arrastrar imágenes de más de 5MB cada una. De nuevo, si has seguido los consejos que te di al comienzo de este artículo (reducir la resolución, y elegir un buen formato) esto tampoco supondrá un problema para ti.

Salvando esos dos puntos, puedes utilizar TinyPNG tantas veces como quieras sin pagar ni un euro.

Si alguna de esas dos limitaciones te impiden trabajar con fluidez, puedes apuntarte a TinyPNG Pro por $25 al año para tener más flexibilidad de trabajo.

En cualquier caso la interfaz siempre será la misma, y una vez hayas subido tus imágenes, se comprimirán solas, y no tendrás más que volver a descargarlas ya optimizadas, bien una por una, todas a la vez (Download All) o guardándolas directamente en tu Dropbox.

Como ves en la imagen las reducciones que se consiguen son bestiales.

Cómo optimizar imágenes con el plugin de Photoshop de TinyPNG

Si no eres de trabajar con interfaces web estás de suerte, ya que TinyPNG cuenta con un plugin para utilizar su algoritmo de compresión directamente en Photoshop.

Eso sí, al tratarse de una solución más profesional te tocará pasar por caja y desembolsar los $50 que cuesta actualmente hacerse con él (puedes pagar con tarjeta de crédito a través de Stripe, o con Paypal)

Instalar el plugin de TinyPNG en Mac es tan sencillo como arrastrar los archivos que te enviarán en el email en la carpeta Aplicaciones / Adobe Photoshop / Plug-ins.

Mientras que para instalarlo en Windows tendrás que ejecutar el instalador que recibirás, y luego copiar el archivo de la licencia en la ruta C: / Program Files / Adobe / Adobe Photoshop / Plug-ins

En ambos casos utilizarlo resulta muy sencillo, ya que en Photoshop encontrarás unas nuevas preferencias de exportación en el menú Archivo > Exportar > TinyPNG y TinyJPEG.

Podrás acceder rápidamente a esta exportación con Alt + Ctrl + P en Windows, o con ⇧⌘P en Mac.

Y por si te quedaba alguna duda: puedes exportar utilizando este plugin tantas veces com quieras, y sin restricciones de ningún tipo.

Cómo optimiza imágenes con la API de TinyPNG

TinyPNG también cuenta con una API (un código de letras y números) que podrás utilizar en aplicaciones de terceros para convertir imágenes al vuelo.

Esta API es gratuita, y con ella podrás optimizar hasta 500 imágenes por mes (más que suficiente para la mayoría de los bloggers que publican una o dos veces por semana)

Si esto se te queda corto existen planes de pago bastante económicos, aunque como ya te digo seguramente no te hagan falta 🙂

Esta API te permitirá automatizar la compresión y optimización de tus imágenes.

Por ejemplo puedes usar este flujo de trabajo en Alfred (aplicación para Mac sobre la que puedes encontrar un curso en el Studio de Limni) para así comprimir las imágenes directamente en tu equipo sin tener que acudir a la web.

O este flujo de trabajo en Workflow para poder comprimir imágenes fácilmente desde tu iPhone o iPad, algo perfecto para los “guerreros de la carretera”

Workflow es una aplicación gratuita solo disponible en iOS, puedes aprender más sobre ella en este libro.

Como ves las posibilidades que ofrece la API son muchas. En la actualidad hasta están coqueteando con Zapier, algo que sin duda abrirá un mundo de posibilidades y automatizaciones.

Cómo optimiza imágenes con TinyPNG en WordPress

Seguramente esta sea la opción que más te interese.

La he puesto al final porque para que funcione necesitas tener una API (el “código” que te envían al rellenar tus datos en su página de desarrolladores)

Para optimizar las imágenes de tu web directamente en WordPress, necesitarás el plugin de WordPress de TinyPNG.

Una vez instalado deberás configurarlo en la ruta de WordPress Ajustes > Medios, introduciendo tu API en el cajetín que han preparado para ello.

Ahí es donde también deberás decidir qué imágenes quieres que se optimicen en tu blog.

Ten en cuenta que WordPress crea miniaturas de diferentes tamaños por cada imagen que subes a tu blog, así que en realidad (si no desactivas las opciones anteriores) cuando subas una nueva imagen TinyPNG puede que tenga que comprimir 4 o 5, así que tu límite gratuito de 500 imágenes mensuales puede durar mucho menos de lo que esperabas.

Mi consejo, además de que configures el plugin correctamente, es que tengas una API para tu uso personal (para usar de manera local, quizá con fotos no relacionadas con tu blog, etc.) y otra para tu uso profesional.

Es decir, con el email de tu dominio regístrate en la página de desarrolladores de TinyPNG y utiliza esa API que te ofrecen única y exclusivamente para tu blog.

Si no sabes donde almacenar todos estos datos (APIs) ya sabes que yo siempre recomiendo 1Password (Amazon, iBooks) para tenerlo todo perfectamente organizado.

Por cierto, el plugin no hace falta ni explicarlo. Una vez configurado simplemente sube las imágenes a tu blog como lo harías normalmente, y deja que el Panda haga la magia él solo por detrás 🙂

[Tweet «Cómo optimizar las imágenes de tu web de manera eficiente»]

¡Y eso es todo!

Espero que esta entrada te haya resultado útil y que a partir de ahora comiences a optimizar mejor las imágenes de tu web, tus usuarios (y sus tarifas de datos) te lo agradecerán, y Google te querrá mucho más 🙂

Si quieres leer algo más acerca de cómo optimizar tu web échale un vistazo a mi guía sobre AMP.

Un fuerte abrazo,

Javi