The Hugo documentation can be abstract as it tries to cover as many use cases as possible. It took a long time to get my head around page bundles. So I had to ensure all my posts used the page bundle content hierarchy.
Processing is what enabled me to generate multiple image sizes from one original image. Resources with a type of image can also be processed by Hugo’s Image Processing. You could just include a shortcode in the post (or outside the post) that says “grab all the images that match these criteria.” Page bundles are useful as they enable you to group resources (such as images) with a post without having to include them in that post’s front matter. Hugo’s page bundles are a way to structure your Hugo content hierarchy. Eric Portis’s thorough Srcset and sizes post also helped me understand the basics with loads of examples. Because I have a terrible memory, and I can only keep updating my blog if it’s really easy to do so.Įdit: I learned loads about srcset and responsive images from Mat Marquis’s wonderful book, Image Performance. An example of the shortcode is included by default with every new post.Images grouped in figures can be arranged in a responsive grid.Each image is resized into multiple sizes by Hugo, and included in the srcset list for the img.Every image has alt text, even if it’s used outside of its post.Multiple images can be used inside one figure. Every image can be used alone, wrapped in a figure with a figcaption, and/or wrapped in a link.Images live in the same folder as their post (in page bundles).My content is written in markdown, using shortcodes that mirror the HTML output as closely as possible.Over the last few weeks, iteratively and clumsily, I’ve developed a system that works for me:
With an archive of blog posts going back nearly a decade, it was going to be a big job to get my whole site working consistently, but I had an inkling I might be able to do it with Hugo’s Image Processing. The images were all huge and it was my only big barrier in web performance (no tracking here!). Over the last few months, I’d become embarrassed to share my blog posts, particularly image-heavy posts, as I was handling responsive images so badly.