Advanced images

HTML/CSS

Responsive images

Werken met media

Dit is jouw website

Je hebt nu ook een mobile versie.

Kijk naar de aangeduide foto.

Wat merk je op? Zijn er nadelen?

Dit is jouw website

Probleem:

Groot deel van de foto niet getoond, wel ingeladen
De afbeelding werkt visueel minder goed op dit scherm

Dit is jouw website

Het zou dus beter zijn om op de mobile versie een andere afbeelding te tonen

Twee afbeeldingen?

Is dit een goede oplossing?

Met het picture element en verschillende sources kunnen we dit oplossen. Er is een standaard img tag voor de browsers die dit niet ondersteunen.

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>

Source - srcset

We kunnen ook de browser zelf laten bepalen door mee te geven hoeveel ruimte een afbeelding in neemt.
Kleiner dan 600px? Afbeelding van 480px nodig.

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

Picture - Sizes

Afbeelding grootte

Werken met media

Snelheid is alles

Wanneer een gebruiker naar je website surft, wil die zo snel mogelijk alle content zien.

Daarom is het belangrijk om de juiste image sizes te voorzien. Gebruik dus nooit zo maar een afbeelding zonder deze na te kijken en aan te passen.

Bij voorkeur is een afbeelding niet groter dan 150kb of max 200kb voor een grote afbeelding.

Hoe verkleinen?

Je kan Photoshop, Figma of online tools gebruiken om je afbeelding te verkleinen in grootte. Er zijn twee mogelijkheden waarmee je kan spelen:

Verkleinen in dimensies (breedte en hoogte)
Verminderen van de kwaliteit (aantal pixels, scherpte)

MAAR: niet gemakkelijk om een goede balans te vinden tussen kwalitatieve afbeeldingen en de bestand grootte

WebP

Om die reden heeft Google in 2010 een nieuw bestandsformaat uitgevonden speciaal voor het web, WebP.

Dit is standaard kleiner in bestandsgrootte dan het JP(E)G of PNG formaat.

Je kan via Photoshop en online tools een afbeelding omvormen naar WebP. In Figma heb je een extra plugin nodig.

WebP (2024)

Het formaat is ondertussen goed ondersteund.

Avif

Een nog nieuwer formaat is het avif formaat uit 2019. Dit is nog kleiner in bestandsgrootte t.o.v. WebP zonder kwaliteitsverlies.

Avif (2024)

Ook dit formaat is al redelijk goed ondersteund.

Support

Om zeker te zijn dat iedereen je afbeelding ziet, werk je best met een fallback. Ook hiervoor kunnen we de source en srcset gebruiken. De browser zal automatisch het juist bestand laden.

<picture>
    <source srcset="/url/to/image.avif" type="image/avif">
    <source srcset="/url/to/image.webp" type="image/webp">
    <img src="/url/to/image.jpg"
         alt="A picture of a thing.">
</picture>

Responsive

Dit kan ook in combinatie met responsive images

<picture>
  <!-- Use avif format for modern browsers -->
  <source srcset="image-400w.avif 400w, image-800w.avif 800w" 
          sizes="(max-width: 600px) 400px, 800px" 
          type="image/avif">
  <!-- Use WebP format for modern browsers -->
  <source srcset="image-400w.webp 400w, image-800w.webp 800w" 
          sizes="(max-width: 600px) 400px, 800px" 
          type="image/webp">
  <!-- Fallback to JPEG -->
  <source srcset="image-400w.jpg 400w, image-800w.jpg 800w" 
          sizes="(max-width: 600px) 400px, 800px" 
          type="image/jpeg">
  <!-- Default img tag for backward compatibility -->
  <img src="image-800w.jpg" 
       alt="A description of the image">
</picture>

Advanced images

More from Lecturer GDM