Responsive imgs

• generate_responsive_images takes an input image (e.g., input-image.jpg) and generates resized versions of it at widths of 320px, 640px, 1280px, and 1920px to serve up for browser selection.
• For each width, the script generates two image formats:
  • A JPEG image (e.g., input-image-320.jpg).
  • A WebP image (e.g., input-image-320.webp).
• All output files are stored in the responsive_images directory.

To run this script, in the terminal:

chmod +x generate_responsive_images.sh
./generate_responsive_images.sh

This should take all of the images in the src/assets/images/original_images folder and create multiple versions of each in the responsive_images subdirectory. After each image a sentence is printed comparing the original and largest responsive images.

Responsive images are only created when the image width is smaller or equal to the responsive target widths to avoid creating images that are bigger than what is needed (under the assumption that the original images are the largest they will need to be). If the original image is smaller than the highest width target of 1920, then the original image width is used at the upper bound on the responsive images. I expect there is a better way to do this that will facilitate the html syntax to serve up the images without having to code the specific file endings for each image.