Responsive Images In Hugo

_NOTE: I haven't run Hugo in a couple years. I don't know if this is still necessary or if something else is available now_

_NOTE: Need to combine this with this post_

This is the first version of responsive image code I made for Hugo.

It has the hard coded sizes that work with the Tale theme that I setup initially for the site in Nov. 2019.

You can drop full size images in and then when you call it the images are resized automatically by Hugo to the specific sizes.

It defaults to using the large size if a browser doesn't work with srcset.

Usage:

The code:

This version is basically the same, but it also prevents upsizing by comparing the width against the source image. Of course, if the CSS upsizes, this won't stop that.

References:

- https://dev.to/stereobooster/responsive-images-for-hugo-dn9 - https://www.adamwills.io/blog/responsive-images-hugo/