Responsive and optimized images with Hugo | BryceWray.com

Discusses the ground-up rebuild of this site, using Hugo, and Tailwind CSS, and more.

As a believer in text is king, I store all my content in markdown formatted plain text. You know, like grandpa used to do on punch cards but now with links and more octothorpes. Alongside text, I reference images in said text with a  snippet. In turn, this ends up as HTML rendered by Hugo for browsers to consume. By default, Joe Public viewing the blog receives that image byte for byte as I saved it even when a much smaller image that looks visibly indistinguishable would do.

How to set up automatic responsive image resizing in Hugo using shortcodes, generating optimized WebP and JPEG files for your static site