Lunds universitet - Style Guide

Figure 

<figure class="figure">
    <img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="A generic square placeholder image with rounded corners in a figure." class=" figure-img img-fluid m-0">

    <figcaption class="figure-caption bg-dark text-white p-2">Bildtext proin porttitor auctor augue a aliquet risus dignissim at. Foto: Förnamn Efternamn</figcaption>
</figure>
 
<figure class="figure">
  {{render "@image" image}}
  <figcaption class="figure-caption bg-dark text-white p-2">{{{caption}}}</figcaption>
</figure>
 
{
  "image": {
    "src": "/images/_content/placeholder_1@1x.jpg",
    "src-2x": "/images/_content/placeholder_1@2x.jpg",
    "alt": "A generic square placeholder image with rounded corners in a figure.",
    "modifiers": [
      "figure-img",
      "img-fluid",
      "m-0"
    ]
  },
  "caption": "Bildtext proin porttitor auctor augue a aliquet risus dignissim at. Foto: Förnamn Efternamn"
}

Ideally images used in figures should be progressive jpeg images that are 1380px wide saved in 50-60% quality without metadata and compressed with Guetzli if possible.

Hero images spanning three columns may be up to 2580px wide but should be saved at 50% quality maximum.