Auto Image Resizer
What was the Problem?
I am always looking for ways to speed up and reduce the payload size of my website pages, and images are essentially always use the most data on a webpage. So, how to reduce that?
- Lazy load - don’t load images unless the user has reached the part of the page with the image, this means images won’t be loaded unnecessarily,
- resize and minify - don’t upload an image straight from your DSLR camera that is >4000px across and 21mb in size. Resize it to the maximum size it would probably be displayed at (?1920px) and use a compressor to reduce its footprint.
We can do a combination of these by using the
loading="lazy" attribute on
<img/> elements and
srcset to serve images with different sizes depending on the size of the screen opening the website!
<figure> <img srcset=' https://finn.lesueur.nz/my-image-4096.png 4096w, https://finn.lesueur.nz/my-image-2048.png 2048w, https://finn.lesueur.nz/my-image-1024.png 1024w, https://finn.lesueur.nz/my-image-512.png 512w' src='https://finn.lesueur.nz/my-image.png' alt='This is my cool image!' loading="lazy"/> <figcaption>(📷: Finn LeSueur) This is my cool image!</figcaption> </figure>
This is a great improvement, but what if I don’t want to pre-decide what image dimensions I want, what if I want to just upload a large(ish) image and have it resized on the fly? Enter: Auto Image Resizer.
I wrote a tiny Lumen application that takes an image through a URL, stores it, resizes it as needed and serves it back! This is great because it allows me to simply upload a single image and get whatever sizes I need from that one image. Auto Image Resizer has one API endpoint and it looks like this:
You can learn how I integrated this into a Hugo snippet so that I could render a
<figure> element like above with a single line inside my Markdown over here. Implementing this has saved me a lot of time and effort and makes me feel confident that I am not wasting the bandwidth or time of my users when they come to my site.
- Lumen is great, it is like Laravel but faster. The way it makes itself faster is by doing very little out of the box and letting your turn things on yourself. It took some figuring to understand how it all works and do stuff like including another package (Intervention/Image) but I’m a big fan.
- When I first put it up I noticed that it wasn’t sending the appropriate headers for the images to be cached on the client side - I was checking my
.htaccessbut it turns out the simplest way to do this was to just add an array of
->response()function. Who’d have thought?
If you are interested in setting up AutoImageResizer for your website, head over to the Gitlab page and follow the instructions to get it set up on your website!
File an issue if it doesn’t work or send me an email if you get real stuck!
– Finn 👋