Images

New

RESPONSIVE

Breakpoints

Click here to see what are the breakpoints used

Banners & Content Images

For both responsive Banners and Content images, we usually use 8 image sources.
One image per breakpoint, and each one of them have a high-resolution (2x) version.

To handle responsive images, we use the <picture> tag, see snippet bellow

Variety of company logos 
<picture>
    <!-- Mobile Portrait and down -->
    <source 
        media="(max-width: 478px)" 
        srcset="/images/librariesprovider11/default-album/banners-2025/hero-image-mobile-portrait.png 1x, /images/librariesprovider11/default-album/banners-2025/[email protected] 2x" 
        width="398" 
        height="318" 
    />
    <!-- Mobile Landscape and down -->
    <source 
        media="(max-width: 767px)" 
        srcset="/images/librariesprovider11/default-album/banners-2025/hero-image-landscape.png 1x, /images/librariesprovider11/default-album/banners-2025/[email protected] 2x" 
        width="540" 
        height="432" 
    />
    <!-- Tablet and Small Desktop -->
    <source 
        media="(min-width: 768px) and (max-width: 1280px)" 
        srcset="/images/librariesprovider11/default-album/banners-2025/hero-image-hero-tablet.png 1x, /images/librariesprovider11/default-album/banners-2025/[email protected] 2x" 
        width="528" 
        height="442" 
    />
    <!-- Desktop Large -->
    <source 
        media="(min-width: 1281px)" 
        srcset="/images/librariesprovider11/default-album/banners-2025/hero-image-hero-desktop-lg.png 1x, /images/librariesprovider11/default-album/banners-2025/[email protected] 2x" 
        width="528" 
        height="442" 
    />
    <img 
        class="w-full h-auto of-cover" 
        alt="Variety of company logos" 
        src="/images/librariesprovider11/default-album/banners-2025/hero-image-hero-tablet.png" 
        width="720" 
        height="575" 
    />
</picture>

LAZY LOAD

Images that are BTF (Below The Fold), must be lazy loaded.

We can achieve that by using the loading="lazy" attribute

Example (short)

<img loading="lazy" alt="Image description here" src="/image/path/example.jpg" width="720" height="575" />

Example (actual image)

Variety of company logos 
<picture>
    <!-- Mobile Portrait and down -->
    <source 
        media="(max-width: 478px)" 
        srcset="/images/librariesprovider11/default-album/banners-2025/hero-image-mobile-portrait.png 1x, /images/librariesprovider11/default-album/banners-2025/[email protected] 2x" 
        width="398" 
        height="318" 
    />
    <!-- Mobile Landscape and down -->
    <source 
        media="(max-width: 767px)" 
        srcset="/images/librariesprovider11/default-album/banners-2025/hero-image-landscape.png 1x, /images/librariesprovider11/default-album/banners-2025/[email protected] 2x" 
        width="540" 
        height="432" 
    />
    <!-- Tablet -->
    <source 
        media="(min-width: 768px) and (max-width: 1280px)" 
        srcset="/images/librariesprovider11/default-album/banners-2025/hero-image-hero-tablet.png 1x, /images/librariesprovider11/default-album/banners-2025/[email protected] 2x" 
        width="528" 
        height="442" 
    />
    <!-- Desktop -->
    <source 
        media="(min-width: 1281px)" 
        srcset="/images/librariesprovider11/default-album/banners-2025/hero-image-hero-desktop-lg.png 1x, /images/librariesprovider11/default-album/banners-2025/[email protected] 2x" 
        width="528" 
        height="442" 
    />
    <img 
        class="w-full h-auto of-cover" 
        loading="lazy" 
        alt="Variety of company logos" 
        src="/images/librariesprovider11/default-album/banners-2025/hero-image-hero-tablet.png" 
        width="720" 
        height="575" 
    />
</picture>

Logos and Icons

Single file provided - SVG

The assets for logos and icons are usually provided in one single size and as SVG.

For this reason we don't need to worry about responsiveness and lazy loading, as SVG are already optimized and scalable.

Example

<img width="98" height="96" src="/images/librariesprovider11/default-album/icons-2025/icon-self-directed-investing.svg" alt="" aria-hidden="true" />

Single file provided - SVG - Full Width

Example

<img class="w-full h-full of-cover" width="98" height="96" src="/images/librariesprovider11/default-album/icons-2025/icon-self-directed-investing.svg" alt="" aria-hidden="true" />

Two files provided (regular and @2x) - PNG, JPG, JPEG and all formats except SVG

There might be some cases were two files will be provided, the regular one and the retina (@2x) one.

In this case, see example below.

Example

<img
    loading="lazy"
    width="384"
    height="216"
    src="/images/librariesprovider11/default-album/icons-2025/gift-box-16-9.png"
    srcset="/images/librariesprovider11/default-album/icons-2025/gift-box-16-9.png 1x, /images/librariesprovider11/default-album/icons-2025/[email protected] 2x"
    alt=""
    aria-hidden="true"
/>