The formatting in the examples for this page got messed up during a site migration.
While moving my site, I wanted to come up with a better way to handle images. My goal was to design a setup where the images look good on desktops, tablets, and phones. Something that's known as "Responsive Images" in the web industry. The software I moved to doesn't do it out of the box, but with some research, I was able to hack together a solution.
My goals were:
Store all my images in a single directory
Store the images at their full size
Setup so devices don't download images larger than they need in order to make pages load faster
Automatically resize the image files for different devices to they don't download files that are larger than they need
Setup so that smaller images are rendered as big as they can be without up-sizing them.
Prevent images larger than the necessary size from being generated or made available
The code I came up with is:
Need the style sheet setup (your using Tale with some modifications, but this should work)
First create a folder and associated index file to house all the images (e.g. "content/01-images/index.md" )
Store any images inside the folder (e.g. "content/01-images/cat-photo.jpg")
Call it with:
^2]: The post I found is [Responsive Images for Hugo](https://dev.to/stereobooster/responsive-images-for-hugo-dn9) by [@stereobooster](https://stereobooster.com/). There's another similar post with the similar title [Responsive Images in Hugo](https://www.adamwills.io/blog/responsive-images-hugo/) by [Adam Wills
_NOTE: This is a related post that needs to be combined in here link_
Other links to examine: