Image

<img alt="Alt text" src="//placeponi.es/500/300">
<img alt="{{ alt }}" src="{{ src }}">
{
  "alt": "Alt text",
  "src": "//placeponi.es/500/300"
}

If JavaScript is available, all images are automatically given an entry animation.

The image starts off invisible and devoid of colour and saturation while it loads. When the image becomes available (via the ‘load’ event) the image opacity and saturation are increased and the grayscale effect decreased until the image appears as expected.