This blog briefly explains an approach to using images in responsive design whilst utilising SharePoint’s image renditions in conjunction with HTML’s “picture” and “source” attributes.
Picture and Source
- The Picture tag provides the ability to group and specify a number of image URL’s that can be called upon.
- The Source attribute contains an additional two attributes: Media and srcset.
- Media = This allows us to specify a traditional CSS media query to determine the size of the screen being used
- Srcset = A image reference(s) for one particular image
To explain this better, here is an example
- Firstly, we wrap the details for the image in a picture tag
- Each image specified is wrapped in side a source tag
- For the browser to know which image to load, we include a media attribute to specify a media query.
- Taking the first image example, we are saying that “If the minimum width of the screen is 1024px, show me my image that is using the SharePoint rendition with an ID of 1”
- At the very end, we need to include an img tag. This will insure that if the browser cannot understand the srcset syntax, then it has a fall back image. It also means that if none of the media query conditions are met, the browser again has a fall back image.
- Note: If you’re using JSLink, or a Display Template, you can create a variable for the image instead of hard coding the URL that’s seen in the demonstration above
For the above example, one image was uploaded (1024 x 700) with four image renditions created.
Rendition 1: 600 x 500px
This image is used when the minimum width of the screen is 1024px. It is intended for two images side by side
Rendition 2: 1024 x 500px
This image is used when the screen has a minimum width of 640px up until 1023px.
Rendition 3: 640 x 500px
This image is used when the minimum width of the screen is 400px. Instead of the above image staying at 100% of the screen, resulting in the height to also be reduced, we can call upon another rendition of the image that not only fills the width of the screen, but also has an increased height
Rendition 4: 300 x 500px
When the minimum width of the screen is 0px up to 399px, the below image is used. Like the scenario above, it allows us to call another rendition that allows a significant portion of the image to be displayed rather than the image height being based on the images 100% width.
What does this approach help resolve?
There may occasions during responsive design where you don’t want to rely on one Image Rendition alone. If on desktop the images are in tiles and appear relatively small, they might become full width on tablet or mobile. If a smaller rendition has been loaded to begin with you might end up with pixelated versions on tablet. The other way is that if you’re catering for the full width images on a tablet, you might end up loading larger images for the tiles in the desktop view.
This approach allows us to have a variation of dimensions for different screen sizes. It also allows the browser to determine which image to display and will only load the image that meets the conditions specified within the media query. The other images are ignored and therefore not loaded.
It’s worth noting that on some occasions where you’re loading images for things like articles, the rendition might well cut off certain parts of the image. If however, you’re catering for a constant image banner, or background image for a tile, you can chose the crops for the image renditions.