Images and website speed are a pain for pro’s and populators alike.
It can seem like a never-ending chore, and that’s when you already know what you're doing. As a web designer, I like to take charge of populating websites to ensure they look like the best they can. After all, we know how important first impressions can be. But way too much time is wasted on resizing, cropping and uploading images – I can’t imagine how many hours myself, my team and our clients have spent doing this in the past. Well. In fact, I can.
Image sets. Argh!
On one of our latest projects, Happy Kitchens, there was a total of 557 images to crop, resize, save, optimise and upload. We want every image to look and perform as well as possible. That way, they look great and load quick too. We use image sets on top of this too. These are a set of images (normally four) that are used for different devices and screen resolutions. It means you don’t need to load a huge desktop image on a tiny mobile screen with a face half cropped out – ugly! Those 557 images I mentioned quickly turn into TWO THOUSAND TWO HUNDRED AND TWENTY-EIGHT. Yes, 2,228 images to manually optimise. This is literally what I look like thinking about it.
Time. Time. Time.
Each image set creation would probably take around ten minutes to get onto the website. That’s 92 hours (over two work weeks) of designer time just to populate the images across the website. And that’s forgetting about the rest of the content. We’re assuming you’re not a robot (beep-boop) and can’t do what is essentially a mind-numbing task for two weeks straight without going insane. That doesn’t sound fun, economical or productive. Fortunately for my sanity, and yours, our latest innovation for Alfred CMS comes to the rescue. What is Alfred you ask? Alfred CMS is the Laravel PHP and Angular CMS engineered by our very own team.
IMGIX, thank you. You saved my life
Ok, maybe an exaggeration but you get my point. IMGIX rules! So, what is this… ‘IMGIX’ (Pronounced "im•ij•iks")? We believe IMGIX are the industry leaders in smart image processing and delivery. They give our customers (and us) the future of image on the web. With this fantastic tool implemented, those 92 hours of work have been slashed down to an hour and a half. It’s hard to argue with stats like that.
We can save up to 99% of your time doing image population by implementing IMGIX in Alfred.
Resize, crop, save, repeat no more
What was potentially a 20-step task (especially when you’re making image sets and compressing them all) now turns into a 2-step task - just upload your images to the file-manager in Alfred and then drop them in where they're needed in the page. It really is that simple. IMGIX will generate all of the images that a user will see, properly sized, optimised, cropped and so much more. IMGIX automatically detects if a browser can support next-generation web file formats like WebP too. No automation tool we have used in the past optimises images to the level IMGIX does.
“On my WordPress site I already just do those two steps, what’s the difference?” I hear you ask. Well, quite a lot. If you’re not doing any of the manual steps that I mentioned earlier, you’re probably having issues with slow loading – especially on mobile. As I’m sure we all know these days, slow load times means much higher bounce rates, far fewer conversions and much lower perceived quality of brand. Most platforms out there will just resize your original image and if you’re lucky, optimise the file size a little. We’re talking about way more.
Without boring you too much with the numbers, an HD image on a desktop just isn’t suitable in size for a mobile experience, especially if you’re on a 3G/4G connection. Using IMGIX we can deliver images at the correct size on any device – on the fly and automatically by integrating it’s powerful image processing with our front-end image sets and responsive background images. This means images on your site look amazing and load super-fast, no matter what device they’re viewed on, and you don’t have to lift a finger.
Our top features of IMGIX
We’re constantly innovating and making updates to our front-end techniques, utilising tools like IMGIX. We have some cool stuff in the pipeline (auto creation of Open Graph images using IMGIX smart compositing features to name just one) but here’s our current list of our favourite features we are using right now.
- Smart cropping – every image in our set is automatically cropped to make the image look the best whatever the size we’re showing
- Resizing – showing the user the perfect image for their device to save unnecessary load times
- Auto format – delivering progressive file types for even better performance
- CDN enabled – delivering images from a location near the user
The big question.
So, is IMGIX the right solution right for you and your business? The big question. I can honestly say, I have not met a customer to this date that wouldn’t benefit from any of the advantages of using our IMGIX implementation. Faster loads times, better looking images, less time and effort needed to add images to your website and better delivery through distributed server localisation (a fancy way of saying closer servers to your computer means faster load times).
IMGIX is just one of the many ways we’re looking to constantly innovate. Expect many more advances in our implementation over the coming months and get in touch to find out how else we can make your website better looking, faster and easier to manage using IMGIX.
Take a look at IMGIX yourself.