Serve up responsive images
This adds the generate_responsive_images.sh
script, which I used to create jpg and webp versions on the chapter images. I manually uploaded those to the s3 bucket and modified the image paths in content.json
. Then I edited StoryPAge.vue
to use the <picture>
element to be able to serve up the two different image sizes and file types for the browser to select from based on viewport size. This should make the page a little bit faster and reduce file sizes.
Then I added lazy loading to prioritize the first image in the sequence. In theory, it should check that the first image is loaded before loading any of the other ones, so that any delays won't be visible to the user.
Edited by Cee Nell