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.
— Continued in part two