In today’s design world, our work has moved beyond the purely aesthetic to become a multidisciplinary field that combines psychology, business strategy and, increasingly, AI-powered programming.
Recently, I faced a challenge with one of my clients, Colegio San Jorge de Arica, which led me to cross that boundary: from being a user of tools to becoming the creator of one.
The Challenge: Performance
My work with my client isn’t just about “redesigning a website”. The aim is to transform their platform into a tool that reflects their identity: a blend of innovation and tradition. By professionalising their corporate image, we’re not just seeking visual impact, but also aiming to meet clear business objectives, such as increasing interest in enrolments.
However, aesthetics (the Aesthetic-Usability Effect suggests that beauty is perceived as more usable) are of no use if the platform is slow. This is where theory meets technical reality: the Doherty Threshold tells us that productivity and satisfaction skyrocket when the system response time is under 400ms. In the context of a school, where parents are looking for information quickly, every millisecond counts; this is why it is so important to focus on image optimisation, and all the more so for this project, given that 68% of users access it via mobile phones.
The Image Problem and the AVIF Solution
Images are the lifeblood of a school’s website, but they are also its biggest drag on loading speed. This is where the AVIF format comes in. It is currently the king of compression: it offers an impressive reduction in file size without any noticeable loss of visual quality.
Although Elementor offers an AVIF optimisation tool, it does so via an additional paid service. So, NOT wanting to pay for this service was what motivated me to create my own AVIF image optimiser.
At first, we tried to solve this directly within a WordPress plugin. The plugin could take images uploaded to the media library and generate optimised versions. However, a major problem arose: image conversion relies heavily on the resources and capabilities of the server hosting WordPress.
On shared hosting, such as that typically used for WordPress sites, there isn’t always full support for AVIF, WebP, Imagick, GD or modern compression libraries. Furthermore, converting large images consumes CPU, memory and processing time. This can lead to errors when uploading images, queued processes, timeouts or a poor user experience.
That’s why I decided to split the problem into two parts:
- Create an external web app dedicated exclusively to optimising images.
- A WordPress plugin that communicates with my web app and uses the optimised result within WordPress.
Creating my own web app
Up until now, my workflow for optimising images has been manual. I would crop my image and then drag it onto https://squoosh.app, a brilliant web app that compresses images into AVIF format, leaving them weighing practically nothing whilst still looking great. So, once I had the resulting AVIF image, I’d manually upload it to WordPress, which took up valuable time.
As this web app works so well, what I did was use Codex to create an app inspired by Squoosh, but called Squishy (a name inspired by the jellyfish from Finding Nemo – delicate, yet powerful 🪼😂).
I now had my own web app for optimising images, at a fraction of the price Elementor would charge me for its image optimisation service. If you’d like to try it out, you can do so here: https://squishy.yuridek.com/
The next task would be to create a WordPress plugin that uses my app, compresses the image ‘externally’, and then uses the result in WordPress.
Como creé una web app con Codex
En el mundo del diseño actual, nuestra labor ha dejado de ser meramente estética para convertirse en una disciplina multidisciplinaria que combina psicología, estrategia de negocios y, cada vez más, programación potenciada por IA.
Recientemente, me enfrenté a un desafío con uno de mis clientes, el Colegio San Jorge de Arica, que me llevó a cruzar esa frontera: de ser un usuario de herramientas a convertirme en el creador de una.
El Desafío: Rendimiento
Mi trabajo con mi cliente no es solo “re-diseñar una web”. El objetivo es transformar su plataforma en una herramienta que refleje su identidad: una mezcla de innovación y tradición. Al profesionalizar su imagen corporativa, no solo buscamos un impacto visual, sino cumplir objetivos de negocio claros, como aumentar el interés en las matrículas.
Sin embargo, la estética (el Aesthetic-Usability Effect sugiere que lo bello se percibe como más usable) no sirve de nada si la plataforma es lenta. Aquí es donde la teoría se encuentra con la realidad técnica: el Doherty Threshold nos dice que la productividad y la satisfacción se disparan cuando la respuesta del sistema es de menos de 400ms. En el contexto de un colegio, donde los padres buscan información rápida, cada milisegundo cuenta, es por esto que es tan relevante preocuparse de la optimización de imágenes, y con mayor razón este proyecto que el 68% de los usuarios llegan a través de celulares.
El Problema de las Imágenes y la Solución AVIF
Las imágenes son el alma de la web de un colegio, pero también su mayor lastre de velocidad. Aquí entra el formato AVIF. Es, actualmente, el rey de la compresión: ofrece una reducción de peso impresionante sin perder calidad visual perceptible.
Aunque Elementor ofrece un compresor de optimización AVIF, lo hace a través de un servicio de pago adicional. Entonces, el NO querer pagar este servicio fue lo que me motivó a crear mi propio optimizador de imágenes a AVIF.
Al comienzo intentamos resolverlo directamente dentro de un plugin de WordPress. El plugin podía tomar imágenes subidas a la biblioteca de medios y generar versiones optimizadas. Sin embargo, apareció un problema importante: la conversión de imágenes depende mucho de los recursos y capacidades del servidor donde está alojado WordPress.
En un hosting compartido, como el que suele usarse para sitios WordPress, no siempre hay soporte completo para AVIF, WebP, Imagick, GD o librerías modernas de compresión. Además, convertir imágenes grandes consume CPU, memoria y tiempo de ejecución. Eso puede provocar errores al subir imágenes, procesos que quedan en cola, timeouts o una mala experiencia para el usuario.
Por eso decidí separar el problema en dos partes:
- Crear una web app externa encargada exclusivamente de optimizar imágenes.
- Un plugin de WordPress que se comunica con mi web app y usa el resultado optimizado dentro de WordPress.
La creación de mi propia web app
Mi flujo de trabajo para optimizar imágenes hasta ahora era manual. Recortaba mi imagen y luego la arrastraba a https://squoosh.app, una web app que es maravillosa ya que te comprime las imágenes en formato AVIF y quedan pesando prácticamente nada y se siguen viendo muy bien. Asi que una vez que tenía la imagen AVIF resultante la subía manualmente a WordPress, lo cual me consumía tiempo valioso.
Como esta web app funciona tan bien, lo que hice fue crear con Codex una app inspirada en Squoosh, pero llamada Squishy (nombre inspirado en la agua viva de buscando a Nemo, chica, pero poderosa 🪼😂).
Ya tenía mi propia web app para optimizar imágenes y a una fracción de precio de lo que Elementor me cobraría por tener su servicio de optimización de imágenes. Si quien pueden probarla aquí:
https://squishy.yuridek.com/
Ahora la tarea sería crear un plugin para WordPress que utilice mi app, comprima la imagen de forma “externa” y el resultado utilizarlo en WordPress.