Skip to content

Serve up responsive images

Cee Nell requested to merge lazy-load into main

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

Merge request reports

Loading