Geoptimaliseerde decoratieve afbeeldingen leveren

Als je geoptimaliseerde decoratieve afbeeldingen levert via CSS, verbeter je de waargenomen prestaties zonder dat dit ten koste gaat van de visuele kwaliteit. Met de CSS-functie image-set() kunt u de browser meerdere opties bieden voor één achtergrond- of maskerafbeelding. Je kunt moderne indelingen (zoals AVIF of WebP) invoeren naast verschillende resoluties (zoals 1x en 2x). De browser selecteert dynamisch de kleinste compatibele afbeelding die de juiste pixeldichtheid biedt voor het apparaat van de gebruiker.

LET OP: Als de afbeelding waarschijnlijk het element Largest Contentful Paint (LCP) is (bijvoorbeeld een grote hero-banner), houd er dan rekening mee dat afbeeldingen waarnaar in CSS wordt verwezen via image-set() niet kunnen worden gevonden door de preloadscanner van de browser. Dit kan het laden van afbeeldingen aanzienlijk vertragen en de LCP schaden. Overweeg voor LCP-kandidaten een standaard HTML-tag <img> of <picture> te gebruiken of de afbeelding vooraf te laden met de optie <link rel=preload> met een kenmerk media.

Implementatie

De functie image-set() wordt overal gebruikt waar CSS een <image>-waarde verwacht, meestal in background-image, content of mask-image. Hoewel je de beste resultaten krijgt als je zowel de bestandsindeling via type() als de resolutie (zoals 1x of 2x) invoert, zijn beide argumenten optioneel.

.gallery-item {
  /* Provide multiple resolutions and formats using image-set() */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.webp") type("image/webp") 1x,
    url("gallery-2x.webp") type("image/webp") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
  
  /* Standard decorative properties */
  background-size: cover;
  background-position: center;
}

Reservestrategieën

Voor oudere browsers die de functie image-set() niet ondersteunen, MOET u een standaardafbeeldingsdeclaratie vóór de regel image-set() opgeven. Deze progressive enhancement-strategie is gebaseerd op de trapsgewijze aard van CSS: niet-ondersteunde regels worden genegeerd.

.gallery-item {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  background-image: url("gallery.jpg");
  
  /* Modern browsers will apply this and override the fallback */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
}