Hugo Responsive Images, Thanks to Bryce and ChatGPT
I’d been using a community Hugo module that supposedly enabled responsive images. I discovered recently that it was always serving up the lowest resolution images being served up.
Active Hugo community member Bryce Wray has written about Hugo responsive images. So yesterday I made an attempt to implement his approach and was 75% there when I discovered that it was, ironically, always serving up the highest resolution images. (My problem, not Bryce’s).
Today I learned how all the subelements and attributes of the html picture element actually work, and have my own image shortcode and underlying partial that makes it all work deliciously. The approach is Bryce’s, adapted for my special needs, primarily the need to support 1 to N images; multiple images render horizontally such as:
Takeways:
- Hugo’s image processing is really powerful. The three source images above were pngs downloaded right from Midjourney, never touching Pixelmator Pro. They are 1456px wide and weigh in at 2MB each. But thanks to Hugo, you’re likely seeing a 640px webp version—24KB! (The webp image format gets a lot of credit also.)
- ChatGPT (GPT-4 model) continues to be incredibly powerful as my pair programmer. For example, when I needed to really understand why my
pictureoutput wasn’t doing what it should, it gave very accurate guidance. I’d guess that my speed was at least doubled on this little project. - Midjourney 5.2’s zoom out function is a lot of fun. Here’s the right image above at 2x and 4x zoom out:
