Improve Your Image

The bane of every designer’s life is optimising images for the web. The process is tedious and time-consuming. Done correctly, no one will ever notice, poorly done, and a website will take significantly longer to load.

The first image was uploaded to the web in 1992, and ever since, designers have been seeking ways to reduce image file size. In 1987, CompuServe created the GIF file format. It compressed image files into 256 colors and was capable of including animation.

The GIF format was hugely successful and dominated early web pages – remember all those spinning logos? Although the format was tremendously popular, images looked poor quality. To fix the quality issues, the JPEG (jpg) format was introduced in 1992. It was a lossless format that preserved the visual quality while reducing the file size.

GIF & JPG

For the next 30 years, these two web file formats dominated the internet. GIFs became the default format for animating images, and JPGs were deployed when designers wanted to display high-quality visuals.

Although these two formats worked well, both had flaws. High-quality images with transparency still proved a problem for designers. In 2004, the PNG file format was introduced, and it addressed many of the limitations of GIFs while matching the quality of JPGs.

Designers embraced the new PNG format, as it proved a helpful bridge between GIF and JPGs. However, web technology was moving quickly, and the need for a single image format that could handle Animation, Transparency while delivering tiny file sizes was more vital than ever.

WEBP – THE NEW KID ON THE BLOCK

In 2010, Google announced a new image format called WebP. It would offer lossy and lossless compression, along with animation and alpha transparency. In short, one ring to rule them all!

By 2016 Google & Apple fully supported the new format. When Microsoft Edge Browser embraced the technology in 2020, WebP was well on its way to becoming the gold standard for internet images.

Despite the apparent benefits of the format, for web designers, it created a big headache. How to replace the hundreds and thousands of JPGs and GIFs which already exist on the websites they manage?

IMAGIFY TO THE RESCUE

For a web designer, converting existing images to WebP is a monumental task. Downloading images, converting, reuploading and changing file paths would take days, if not months.

What’s needed is a method to replace website images on the fly. Thankfully, I came across Imagify – A web-based service that automatically compresses images without you needing expensive image editing software. It has the added benefit of creating WebP file from existing images, and with their free WordPress plugin, you can replace all your existing image paths with the new WebP files.

I’ve tested this method on a number of our websites and can confirm it works perfectly! If you have a small website, the service is free! If you have more than 5000 images to convert, you’ll probably need the $4.99 a month plan to execute the changeover. You could cancel the plan once you’ve converted all the images and revert to the free option.

Overall, Imagify.io is a fantastic way to save yourself a lot of time. More importantly, your images will be around 30%-50% smaller, meaning your site will load like greased lightning.