Skip to content

Latest commit

 

History

History
79 lines (63 loc) · 4.86 KB

WorkingWithImages.adoc

File metadata and controls

79 lines (63 loc) · 4.86 KB
Raw

Working with Images

Introduction

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 FSXA-PWA 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.

Working with CaaS

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"
},

Resolutions in FirstSpirit

FirstSpirit offers a toolset 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.

Responsiveness

The ability of the page layout to adapt to multiple screen resolutions and aspect ratios is called responsiveness. For images this is usually achieved by defining breakpoints for screen sizes at which the browser will switch to a different version of the image. The predefined components of the FSXA-UI library use 5 breakpoints internally. Keep this in mind when developing your own components.

Lazy Loading

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 use the FSXA-UI image component you can set the lazy loading prop to true and the image will only be loaded when it’s on the screen. 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.

SourceSets

Source sets are an HTML5 feature that allows to define multiple sources for the same <img> tag. There are multiple ways to use them. You can either define a source set using the srcset attribute at an <img> tag or you can use the <picture> tag and define the sources using <source> tags. Or you can use the FSXA-UI image component which will combine all the images you provide to a source set. However you do it, the main advantage is that the browser will only request the image defined for the current viewport size. You can read more about source sets in the MDN docs