Priority images

Images are lazy-loaded by default: the browser only fetches them when they come close to the viewport. That is right for every image but the one visible at once, often the largest element of the page, which Largest Contentful Paint measures. Mark that one priority:

<twig:Picasso:Image src="hero-banner.jpg" width="1920" height="1080" sizes="100vw" priority="{{ true }}" alt="Hero banner" />

<picture>
    <source
        type="image/avif"
        srcset="/image/glide/filesystem/meeting.jpg?w=16&h=9&fm=avif&q=75&fit=contain&s=a12733fa07bfddaf23db1c490409d1b0 16w, /image/glide/filesystem/meeting.jpg?w=32&h=18&fm=avif&q=75&fit=contain&s=44827f4008ea12057affcd06489e78c4 32w, … 13 more …, /image/glide/filesystem/meeting.jpg?w=2400&h=1350&fm=avif&q=75&fit=contain&s=4a8999ff231b35e0bb890a9e45317ec9 2400w"
        sizes="100vw"
    />
    <source
        type="image/webp"
        srcset="/image/glide/filesystem/meeting.jpg?w=16&h=9&fm=webp&q=75&fit=contain&s=26d7c5b85db6b21f5d0dd4d104a56809 16w, /image/glide/filesystem/meeting.jpg?w=32&h=18&fm=webp&q=75&fit=contain&s=0fd32e8dd4cc8609bc40771b28b77f1c 32w, … 13 more …, /image/glide/filesystem/meeting.jpg?w=2400&h=1350&fm=webp&q=75&fit=contain&s=24ae9fd7e41fbe50c91060d7272ec55d 2400w"
        sizes="100vw"
    />
    <img
        src="/image/glide/filesystem/meeting.jpg?w=1920&h=1080&fm=jpg&q=75&fit=contain&s=872ab814e43d8bfefa1457a037743d55"
        srcset="/image/glide/filesystem/meeting.jpg?w=16&h=9&fm=jpg&q=75&fit=contain&s=8f005e8af09b2877ab73f7fb0fb36238 16w, /image/glide/filesystem/meeting.jpg?w=32&h=18&fm=jpg&q=75&fit=contain&s=06f41d5d8ddcfb012a3678455a290fa7 32w, … 13 more …, /image/glide/filesystem/meeting.jpg?w=2400&h=1350&fm=jpg&q=75&fit=contain&s=faaea4e518c173c8dc189112226a0284 2400w"
        sizes="100vw"
        width="1920" height="1080"
        loading="eager"
        fetchpriority="high"
        alt="A meeting"
    />
</picture>

loading="eager": fetched at once, not when scrolled to.
fetchpriority="high": ahead of the other images and scripts of the page.
No placeholder, even with a default one: the image itself should be on screen as soon as possible.

Use it on one image per page, two at most: if everything is a priority, nothing is.

To fine-tune instead, set loading and fetchPriority yourself:

{# Visible at once, but not the main element #}
<twig:Picasso:Image src="logo.png" width="200" height="80" loading="eager" alt="Logo" />