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=
andheight=
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>