In modern web design an image needs to be available in multiple croppings and resolutions in order to be rendered in all layouts across all devices or be usable in more than one slot (banner, slider, thumbnails, gallery etc.). The Crownpeak PWA Template offers a variety of tools to ensure the correct image gets loaded at the proper time. In order to save on bandwidth and thus reduce page loading times, it is important to generate and store the same image in multiple resolutions and croppings.
The FirstSpirit CaaS contains meta information about the various resolutions your image is available in. When you encounter an image reference for your page or section, it will probably look like this.
"st_media": {
"fsType": "FS_REFERENCE",
"name": "st_media",
"value": {
"fsType": "Media",
"name": "test_cam",
"identifier": "72c4dd5d-2266-4baa-a242-a350dc05e512",
"uid": "test_cam",
"uidType": "MEDIASTORE_LEAF",
"mediaType": "PICTURE",
"url": "https://your.caas.url/your-project/d8db6f24-0bf8-4f48-be47-5e41d8d427fc.preview.content/72c4dd5d-2266-4baa-a242-a350dc05e512.en_GB"
}
}As you can see, the data contains a URL reference that usually points towards the FirstSpirit CaaS media collection. Sending a request to that URL will yield all the available resolutions of the image in the new json result (see example below). Each entry has a name that corresponds to the FirstSpirit image resolution in the project settings and contains a URL pointing to the location of the image in that specific resolution. This URL can point towards the CaaS, or it can point to a CDN that stores your image depending on your project configuration.
"ORIGINAL": {
"fileSize": 113958,
"extension": "jpg",
"mimeType": "image/jpeg",
"width": 1280,
"height": 720,
"url": "https://where.your.image.is.stored/d8db6f24-0bf8-4f48-be47-5e41d8d427fc/preview/Images/Product-Images/Security-Camera.jpg"
},
"banner_slider": {
"fileSize": 275856,
"extension": "jpg",
"mimeType": "image/jpeg",
"width": 1920,
"height": 1080,
"url": "https://where.your.image.is.stored/d8db6f24-0bf8-4f48-be47-5e41d8d427fc/preview/Images/Product-Images/Security-Camera_banner_slider.jpg"
},
"echo_show5": {
"fileSize": 73716,
"extension": "jpg",
"mimeType": "image/jpeg",
"width": 960,
"height": 480,
"url": "https://where.your.image.is.stored/d8db6f24-0bf8-4f48-be47-5e41d8d427fc/preview/Images/Product-Images/Security-Camera_echo_show5.jpg"
},FirstSpirit offers a tool set to create and store multiple croppings and/or resolutions for the same image. This functionality is reflected by the CaaS. You can define your resolutions in the project settings. An editor can choose for each image individually which resolutions they want to have generated. There is also a cropping tool available in case a specific resolution changes the aspect ratio of an image.
The ability of the page layout to adapt to multiple screen resolutions and aspect ratios is called responsiveness. To achieve this behavior for images in the Crownpeak PWA Template we defined a custom Image.vue component which makes it easy to directly use the resolutions data from the CaaS to render images in different sizes. The image becomes responsive by leveraging the srcset property of img tags. For detailed information on how it works, please check out Mozilla’s guide to responsive images. Another way to make images responsive is by working with different breakpoints.
The term lazy loading refers to loading certain resources at the latest possible moment, as opposed to loading all resources at the initial rendering of a page. If you would like to lazy load certain components in Nuxt 3 you can prefix the component name with the Lazy keyword. Check out their official documentation on lazy loading here. This can contribute immensely to reduce initial page loading times, but should be used sparingly. If used too much, it could result in a page that appears very laggy because images will be fetched during scrolling or other navigation interactions.