`Image` Component

Web HTML facilitates a wide-varieties of displaying images using various image tags like <img>, <amp-img> and <picture> in their respective outputs. Bissetii supports them seemlessly in their respective outputs.

This component is available starting from v1.11.0.

Sass Styling Parts

The Sass styling script responsible for styling images is located in:

assets/css/bissetii/modules/core/_Image.scss

Javascript Parts

This component does not rely on any Javascript.

HTML Parts

There are a number of ways to embed an image on your site.

Simple Image Embed

The simpliest way to embed an image is to use the basic <img> html tag. Bissetii set <img> width to 100% of the parent while having proportional scaling responsively. Optionally, if you need an explicit sizing, you can use the width or height property.

For saving data bandwidth, you can use the newly implemented loading property. It saves loading bandwidth by not loading images should the reader didn’t view it. Please remember that this property is very new and it is only implemented on some chrome-based browsers: https://caniuse.com/#feat=loading-lazy-attr.

As a best practice, you should always define alt property first since it is the fallback presentation when something went wrong with the image.

An example for vanilla HTML would be:

<img alt="image title/purpose"
	src="https://bissetii.zoralab.com/en/img/bg/img_placeholder.svg"
	width="150"
	height="112"
	loading="lazy"
/>

For Acelerated Mobile Pages (AMP), there are a set of compulsory differences:

The HTML code will be using the <amp-img> instead of the <img>.
There is an explicit closing tag (</amp-img>).
There is no loading= attribute.
both width= and height= attributes are compulsory.

An example for AMP-HTML would be:

<amp-img alt="image title/purpose"
	src="https://bissetii.zoralab.com/en/img/bg/img_placeholder.svg"
	width="150"
	height="112"
	layout="responsive"
>
</amp-img>

This will render as:

Multiple Image Source Selection

Another way to embed image for restrictive bandwidth (e.g. on mobile data) is to use the srcset and sizes properties. This, however, requires you pre-render the same image in multiple sizes and serve multiple image files for a single image.

sizes property is optional and not needed for Bissetii since it had styled the parent’s width dimension and applied default <img> styling.

srcset property is the key for image downloads based on dimensions. Its value is defined using “an url”, “a space”, and then the “dimensional condition”. You can define by magnification (1x, 2x, …) or by pixels width (480w, 800w, …). The pattern is as follow:

srcset="<URL> <CONDITION>,
	<URL> <CONDITON>,
	...
	"

From experience, using width dimension is more practical since it does not involve additional mathematical calculation. Moreover, it interacts with the exact image pixel dimension, allowing browser to make percise and fast selection.

For AMP HTML, srcset is fully supported.

Keep in mind that you still need to define src URL link with the default choice for the sake of unsupported browsers.

A full HTML example would be:

<img alt="image srcset with sizes"
	srcset="https://bissetii.zoralab.com/en/img/bg/img_480w.svg 480w,
		https://bissetii.zoralab.com/en/img/bg/img_800w.svg 800w,
		https://bissetii.zoralab.com/en/img/bg/img_1024w.svg 1024w,
		https://bissetii.zoralab.com/en/img/bg/img_2048w.svg 2048w,
		https://bissetii.zoralab.com/en/img/bg/img_4096w.svg 4096w"
	src="https://bissetii.zoralab.com/en/img/bg/img_480w.svg"
	width="200"
	height="150"
	loading="lazy"
/>

A full AMP-HTML example would be:

<amp-img alt="image title/purpose"
	src="https://bissetii.zoralab.com/en/img/bg/img_placeholder.svg"
	srcset="https://bissetii.zoralab.com/en/img/bg/img_480w.svg 480w,
		https://bissetii.zoralab.com/en/img/bg/img_800w.svg 800w,
		https://bissetii.zoralab.com/en/img/bg/img_1024w.svg 1024w,
		https://bissetii.zoralab.com/en/img/bg/img_2048w.svg 2048w,
		https://bissetii.zoralab.com/en/img/bg/img_4096w.svg 4096w"
	width="200"
	height="150"
	layout="responsive"
>
</amp-img>

From the example above, if the effective pixel width is 2000px, 2048w condition will be selected and loads its image source: https://bissetii.zoralab.com/en/img/bg/img_2048w.svg.

This will render as:

NOTE: You can try to perform responsive inspection from the smallest dimension to the biggest. You will see the image changes accordingly. If the larger image is downloaded. It will be used instead over the smaller ones.

Picture Element

IMPORTANT NOTE: <picture> is disallowed in AMP. Hence, you can only use it in vanilla HTML.

Another more robust way to embed image is to use the <picture> HTML element. This is make browser to avoid too many dramatic source selection. In another words, it will download all sources.

This element is also very powerful to the point of defining the image format itself at the expense of large bandwidth. Hence, the impracticality exists.

One example would be:

<picture>
	<source media="(min-width: 20em)"
		srcset="https://bissetii.zoralab.com/en/img/bg/img_800w.svg 1x,
		https://bissetii.zoralab.com/en/img/bg/img_1024w.svg 2x,
		https://bissetii.zoralab.com/en/img/bg/img_2048w.svg 3x">

	<source media="(min-width: 40em)"
		srcset="https://bissetii.zoralab.com/en/img/bg/img_800w.svg 1x,
		https://bissetii.zoralab.com/en/img/bg/img_1024w.svg 2x,
		https://bissetii.zoralab.com/en/img/bg/img_2048w.svg 3x">

	<img alt="picture elements"
		src="https://bissetii.zoralab.com/en/img/bg/img_placeholder.svg"
		width="200"
		loading="lazy"
	/>
</picture>

Image Component