In today\u2019s 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. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
The Challenge: Performance<\/strong><\/p>\n\n\n\n My work with my client isn\u2019t just about \u201credesigning a website\u201d. 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\u2019re not just seeking visual impact, but also aiming to meet clear business objectives, such as increasing interest in enrolments.<\/p>\n\n\n\n However, aesthetics (the Aesthetic-Usability Effect<\/a> 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<\/a> 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.<\/p>\n\n\n\n The Image Problem and the AVIF Solution<\/strong><\/p>\n\n\n\n Images are the lifeblood of a school\u2019s 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.<\/p>\n\n\n\n Although Elementor offers an AVIF optimisation tool<\/a>, 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. <\/p>\n\n\n\n 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.<\/p>\n\n\n\n On shared hosting, such as that typically used for WordPress sites, there isn\u2019t 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.<\/p>\n\n\n\n That\u2019s why I decided to split the problem into two parts:<\/p>\n\n\n\n Creating my own web app<\/strong><\/p>\n\n\n\n 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>, 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\u2019d manually upload it to WordPress, which took up valuable time.<\/p>\n\n\n\n As this web app works so well, what I did was use Codex<\/a> to create an app inspired by Squoosh, but called Squishy (a name inspired by the jellyfish from Finding Nemo \u2013 delicate, yet powerful \ud83e\udebc\ud83d\ude02).<\/p>\n\n\n\n\n