# Beeld en assets

Pixels, vectoren, formaten en bestandsgroottes. Waarom je foto van 8 MB je site sloopt en je logo wazig wordt.

Multimedia & Creatieve Technologie · 0.0 General · Zelfstudie · versie 1.0.0 · 2026-09-20

Tags: images, html

Slides: <https://slides.mctantwerp.be/nl/general/06-beeld-en-assets>

Speaker notes: <https://slides.mctantwerp.be/nl/general/06-beeld-en-assets.notes.md>

<!-- slide 2 -->

## Agenda

1. Pixels en vectoren: Twee manieren om beeld te bewaren
2. Formaten: jpg, png, webp, avif, svg
3. Gewicht: Wat een beeld kost aan bytes
4. In je pagina: srcset, lazy, alt
5. Video en geluid: Het minimum
6. Werkbestanden: Bron en export uit elkaar houden

<!-- slide 3 -->

## Zelfstudie: Werkwijze

*45 minuten, Alleen*

Reken op drie kwartier. Hou een project met beelden open, dan kan je alles meteen toepassen.

1. Het formaatlabo en de drill staan halverwege
2. De richtlijnen achteraan zijn het spiekbriefje dat je later terug opzoekt
3. Sluit af met vijf beelden uit je eigen project, opnieuw geëxporteerd

<!-- slide 4 -->

## 1. Pixels en vectoren

*Twee volledig andere manieren om beeld op te slaan, en je gebruikt ze allebei.*

<!-- slide 5 -->

**Een foto is een raster, een logo is een recept.**

Een raster is een tabel met een kleur per pixel. Een vector is een beschrijving: een cirkel hier, een lijn daar, in deze kleur. Die tweede kan je oneindig vergroten.

<!-- slide 6 -->

### Raster en vector

#### Raster

- Een rooster van pixels, elk met een kleur
- Foto's, screenshots, texturen, alles met detail
- `jpg`, `png`, `webp`, `avif`, `heic`
- Vergroten geeft blokken of wazigheid

#### Vector

- Vormen, lijnen en kleuren als instructies
- Logo's, iconen, illustraties, diagrammen
- `svg`, `ai`, `pdf`
- Op een billboard even scherp als op je horloge

<!-- slide 7 -->

### Wat een resolutie is

*Twee getallen: hoeveel pixels breed en hoeveel hoog. Alles wat je op een scherm ziet, is dat.*

| Voorbeeld | Pixels | Waarvoor |
| --- | --- | --- |
| Een full hd scherm | 1920 × 1080 | De canvas van deze slides |
| Een foto van je gsm | 4032 × 3024 | 12 megapixel, veel te groot voor het web |
| Een beeld over de volle breedte | 1600 × 900 | Ruim genoeg voor elk laptopscherm |
| Een thumbnail in een kaartje | 400 × 300 | Meer heeft geen zin op die plek |

> [!NOTE]
> Megapixels zijn breedte maal hoogte. Twaalf miljoen pixels in een kaartje van 400 pixels breed proppen, is elf en een half miljoen pixels downloaden voor niets.

<!-- slide 8 -->

### DPI bestaat niet op het web

*Die 72 of 300 in je exportvenster doet online helemaal niets.*

#### Print

- DPI zegt hoeveel punten inkt per inch papier
- 300 dpi is de norm voor drukwerk
- Een A4 op 300 dpi is 2480 × 3508 pixels
- Hier bepaalt dpi hoe groot je afdruk wordt

#### Scherm

- Een browser kent alleen pixels
- Dezelfde 800 pixels op 72 of op 300 dpi zijn identiek
- Wat wel telt: `devicePixelRatio`, oftewel retina
- Daarom exporteer je op 2x en toon je op 1x

<!-- slide 9 -->

### Waarom 2x

*Een retina-scherm zet vier fysieke pixels op elke css-pixel. Een beeld op ware grootte ziet er daar zacht uit.*

```html
<!-- Toont op 400 px, levert 800 px aan pixels -->
<img src="kaart-800.jpg" width="400" height="300" alt="Kaart van Antwerpen">

<!-- Of laat de browser kiezen -->
<img src="kaart-400.jpg"
     srcset="kaart-400.jpg 1x, kaart-800.jpg 2x"
     width="400" height="300" alt="Kaart van Antwerpen">
```

> [!TIP]
> Drie keer zo groot exporteren heeft weinig zin meer. Het verschil tussen 2x en 3x ziet bijna niemand, het gewicht voelt iedereen.

<!-- slide 10 -->

### Je exporteert een beeld op 300 dpi voor een webpagina. Wat verandert er?

- A. Niets, de browser kijkt alleen naar het aantal pixels
- B. Het beeld wordt scherper
- C. Het beeld wordt vier keer zo groot getoond
- D. De kleuren worden dieper

**Antwoord:** A. Niets, de browser kijkt alleen naar het aantal pixels

Dpi is een getal dat in het bestand zit voor drukwerk. Een browser doet er niets mee. Wil je scherper op retina, dan exporteer je meer pixels, geen hoger dpi-getal.

<!-- slide 11 -->

## 2. Formaten

*Vijf die je nodig hebt en twee die je beter vermijdt.*

<!-- slide 12 -->

### De drie voor foto's

*Alles met verlopen en detail, van je camera of je render.*

| Formaat | Waarvoor | Let op |
| --- | --- | --- |
| `jpg` | De veilige keuze voor foto's, overal ondersteund | Geen transparantie, elke keer opslaan kost kwaliteit |
| `webp` | Zelfde beeld, ongeveer 30% kleiner | Werkt in elke browser van de laatste jaren |
| `avif` | Nog kleiner, vooral bij grote vlakken | Trager om te maken, ondersteuning is goed maar niet volledig |

> [!TIP]
> Vandaag is webp de standaardkeuze voor een foto op het web. Jpg hou je achter de hand voor wat door een oud systeem moet.

<!-- slide 13 -->

### De rest

*Vlakke kleuren, transparantie, beweging en vectoren.*

| Formaat | Waarvoor | Let op |
| --- | --- | --- |
| `png` | Screenshots, tekst in beeld, transparantie | Verliest niets, maar wordt fors zwaar bij foto's |
| `svg` | Logo's, iconen, illustraties | Is tekst, dus schaalbaar en aanpasbaar met css |
| `gif` | Niets meer, eerlijk gezegd | 256 kleuren en enorme bestanden, neem mp4 of webp |
| `heic` | Wat je iPhone maakt | Zet het om voor je het gebruikt, browsers tonen het niet |

<!-- slide 14 -->

### Transparantie

*Alleen als het formaat een alfakanaal heeft, blijft je achtergrond doorzichtig.*

- **Wel transparant**: `png`, `webp`, `avif` en `svg`. Elk van die vier kan een pixel half doorzichtig maken, dus ook zachte randen.
- **Niet transparant**: `jpg` kent geen alfakanaal. Exporteer je een logo op transparant als jpg, dan krijg je een witte of zwarte achtergrond terug.

> [!WARNING]
> Dat zwarte kader rond je logo op een donkere site komt hier vandaan. De oplossing is niet meer gummen, maar het juiste formaat.

<!-- slide 15 -->

### Een svg is gewoon tekst

*Open er eentje in VS Code en je ziet de vormen staan. Daarom kan je hem stylen en animeren.*

```html
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="9" />
  <path d="M12 7v5l3 3" />
</svg>
```

> [!NOTE]
> `currentColor` neemt de kleur van de tekst eromheen over. Eén icoon, elke kleur, zonder een tweede bestand te exporteren.

<!-- slide 16 -->

### Drill: welk formaat

*Zes gevallen die je dit semester nog tegenkomt.*

**1. Het logo van je portfolio, scherp op elk scherm en in elke grootte.**

- **svg** ✓
- png
- jpg
- gif

Een logo is gemaakt uit vormen, dus vector. Een svg blijft scherp van favicon tot billboard en weegt meestal een paar kilobyte.

**2. Een foto van je maquette, over de volle breedte van je pagina.**

- png
- **webp** ✓
- svg
- gif

Foto met veel detail: webp geeft hetzelfde beeld als jpg aan ongeveer twee derde van het gewicht. Png zou hier vier keer zo zwaar zijn.

**3. Een screenshot van een interface, met kleine tekst erin.**

- jpg op 60%
- **png** ✓
- gif
- avif op 30%

Scherpe randen en tekst lopen vies uit bij lossy compressie. Png bewaart elke pixel. Webp zonder verlies kan ook, dat is dezelfde aanpak met een kleiner bestand.

**4. Een icoon dat van kleur verandert wanneer je erover hovert.**

- Twee png-bestanden
- **svg** ✓
- Een gif
- Een jpg met css-filter

Met een svg zet je de kleur in css en verander je hem bij hover. Twee bestanden bijhouden voor twee kleuren is werk dat je nooit meer stopt.

**5. Een schermopname van acht seconden waarin je je app toont.**

- gif
- **mp4** ✓
- Een reeks png-bestanden
- webp

Een gif van acht seconden weegt al snel 10 MB en ziet er slecht uit. Dezelfde opname als mp4 is een paar honderd kilobyte, met betere kleuren.

**6. Een productfoto die je uitgeknipt op een gekleurde achtergrond zet.**

- jpg
- **png** ✓
- Het maakt niet uit
- pdf

Je hebt transparantie nodig, en jpg kan dat niet. Png werkt, webp met alfakanaal werkt even goed en is lichter.

<!-- slide 17 -->

## 3. Gewicht

*Elke kilobyte die je stuurt, wacht iemand af op mobiel internet.*

<!-- slide 18 -->

### Formaatlabo

*Dezelfde foto, andere breedte en ander formaat. De bytes volgen meteen.*

<!-- slide 19 -->

### Met en zonder verlies

*Twee soorten compressie, en je gebruikt ze voor andere dingen.*

#### Lossy

- Gooit detail weg dat je oog toch amper ziet
- `jpg`, `webp`, `avif`, `mp4`
- Veel kleiner, en onomkeerbaar
- Perfect voor foto's en video

#### Lossless

- Bewaart elke pixel exact
- `png`, `webp lossless`, `zip`
- Groter, maar je verliest niets
- Voor screenshots, tekst en vlakke kleur

<!-- slide 20 -->

### Generatieverlies

*Een jpg openen, bewerken en opnieuw opslaan, comprimeert opnieuw. Elke ronde eet detail.*

1. **Eerste export**: Uit je bronbestand naar jpg op 80%. Ziet er goed uit, niemand merkt iets.
2. **Vijfde bewerking**: Elke keer opnieuw openen en opslaan legt artefacten bovenop artefacten. Randen krijgen halo's.
3. **De oplossing**: Bewerk altijd het bronbestand en exporteer opnieuw. Een export is een eindproduct, geen werkbestand.

> [!WARNING]
> Hetzelfde geldt voor een screenshot van een screenshot, en voor een beeld dat vier keer door WhatsApp is gegaan.

<!-- slide 21 -->

### Richtlijnen die werken

*Geen wetten, maar hiermee zit je zelden fout.*

| Waar | Breedte | Gewicht |
| --- | --- | --- |
| Beeld over de volle breedte | 1600 tot 2000 px | Onder 300 KB |
| Beeld in een kolom | 800 tot 1200 px | Onder 150 KB |
| Kaartje of thumbnail | 400 tot 600 px | Onder 60 KB |
| Een hele pagina samen | Zoveel beelden als nodig | Liefst onder 2 MB |

> [!NOTE]
> Tien beelden van 4 MB op één pagina is 40 MB. Op 4G is dat een minuut wachten, en de helft van je bezoekers is dan al weg.

<!-- slide 22 -->

### Gereedschap

*Vier manieren om hetzelfde te doen, van slepen tot scripten.*

- **[squoosh.app](https://squoosh.app)**: Sleep een beeld erin, vergelijk formaten naast elkaar en zie het gewicht live. Draait in je browser.
- **[ImageOptim en TinyPNG](https://imageoptim.com)**: Knijpt png en jpg uit zonder zichtbaar verschil. Handig voor een hele map tegelijk.
- **Je ontwerptool**: Figma exporteert naar png, jpg, svg en pdf, met 1x, 2x en 3x. Photoshop doet hetzelfde onder Exporteren als.
- **De terminal**: Voor een map vol beelden in één commando, of in een script dat bij elke build draait.

<!-- slide 23 -->

### In één commando

*Voor wie een map met dertig beelden moet omzetten en daar geen namiddag aan wil besteden.*

```console
$ sips -Z 1600 *.jpg
macOS: schaal alles naar maximaal 1600 px
$ cwebp -q 80 foto.jpg -o foto.webp
foto.webp: 184 KB (was 612 KB)
$ ffmpeg -i schermopname.mov -vcodec h264 -crf 26 demo.mp4
video kleiner maken zonder zichtbaar verlies
$ npx @squoosh/cli --webp auto beelden/*.jpg
of gewoon een script dat je map doorloopt
```

<!-- slide 24 -->

## 4. In je pagina

*Het juiste beeld op het juiste scherm, zonder dat je layout verspringt.*

<!-- slide 25 -->

### Vier attributen die tellen

*Deze vier staan op elk beeld dat je op een pagina zet.*

```html
<img
  src="maquette-800.webp"
  srcset="maquette-400.webp 400w, maquette-800.webp 800w, maquette-1600.webp 1600w"
  sizes="(max-width: 700px) 100vw, 700px"
  width="800" height="533"
  alt="Maquette van het stationsplein, gezien vanaf de perrons"
  loading="lazy"
>
```

> [!TIP]
> `srcset` laat de browser het lichtste bestand kiezen dat scherp genoeg is. Dat scheelt op mobiel meer dan al je andere optimalisaties samen.

<!-- slide 26 -->

### Breedte, hoogte en lui laden

*Twee attributen tegen verspringende tekst, en één tegen nutteloos downloaden.*

| Wat | Waarom |
| --- | --- |
| `width` | Samen met height weet de browser de verhouding voor het beeld binnen is |
| `height` | Zonder die twee springt je tekst naar beneden zodra het beeld laadt |
| `loading="lazy"` | Beelden onder de vouw worden pas gehaald wanneer je erheen scrolt |
| `alt` | Wat er te zien is, voor screenreaders en voor wanneer het beeld niet laadt |

> [!WARNING]
> Zet nooit `loading="lazy"` op je grootste beeld bovenaan. Dat is net het beeld dat meteen moet verschijnen.

<!-- slide 27 -->

### Alt-tekst die iets zegt

*Beschrijf wat er te zien is, niet dat het een afbeelding is.*

| Niet | Wel |
| --- | --- |
| `alt="afbeelding"` | `alt="Maquette van het stationsplein"` |
| `alt="IMG_2043.jpg"` | `alt="Drie studenten aan een werktafel"` |
| `alt="logo"` | `alt="Karel de Grote Hogeschool"` |
| `alt="decoratieve lijn"` | `alt=""` |

> [!NOTE]
> Een leeg alt-attribuut is een bewuste keuze: dit beeld is versiering, sla het over. Het attribuut helemaal weglaten is dat niet.

<!-- slide 28 -->

### Kleur

*Je export ziet er fletser of net te fel uit in de browser. Meestal ligt het aan het kleurprofiel.*

- Het web gaat uit van sRGB, dat is de veilige ruimte
- Je camera en je Mac werken vaak in Display P3, met fellere kleuren
- Exporteer je zonder profiel, dan gokt de browser en kiest sRGB
- Zet in je exportvenster het profiel op sRGB en sluit het mee in

> [!TIP]
> Hetzelfde geldt voor je scherm. Een beeld dat er op jouw laptop prachtig uitziet, kan op een goedkoop scherm helemaal anders overkomen.

<!-- slide 29 -->

## 5. Video en geluid

*Dezelfde logica, andere getallen.*

<!-- slide 30 -->

### Video in het kort

*Vier dingen waar je nooit naast zit.*

| Wat | Waarom |
| --- | --- |
| mp4 met h.264 | Speelt overal, ook op oudere toestellen |
| 1080p is genoeg | 4K op een webpagina is vier keer het gewicht voor niets |
| `-crf 26` | De knop waarmee je in ffmpeg de kwaliteit tegen de grootte afweegt |
| `poster` | Een beeld dat toont voor de video geladen is |

> [!WARNING]
> Video hoort niet in je git repo. Zet ze op een server of een dienst en verwijs ernaar met een url.

<!-- slide 31 -->

### Geluid

*Twee formaten volstaan, en het verschil is hetzelfde verhaal als bij beeld.*

#### wav

- Ruwe opname, niets weggegooid
- Ongeveer 10 MB per minuut
- Wat je bewaart en bewerkt
- Nooit wat je op een pagina zet

#### mp3 of m4a

- Gecomprimeerd, klaar om te delen
- Ongeveer 1 MB per minuut
- 128 kbps voor spraak, 192 of hoger voor muziek
- Wat je exporteert en publiceert

<!-- slide 32 -->

## 6. Werkbestanden

*De map waar je in werkt, en de map die je doorgeeft.*

<!-- slide 33 -->

### Bron en export

*Twee verschillende dingen, en het verschil kost je een namiddag als je het door elkaar haalt.*

- **Je bronbestand**: `.fig`, `.psd`, `.ai`, `.blend`. Alle lagen, alle tekst, alles nog aanpasbaar. Dit bewaar je, ook na de deadline.
- **Je export**: `.webp`, `.png`, `.svg`, `.mp4`. Platgeslagen en geknepen voor één doel. Weggooien mag, je maakt hem opnieuw.

> [!WARNING]
> Een export bewerken is werken aan een kopie waar al informatie uit weg is. Ga altijd terug naar de bron.

<!-- slide 34 -->

### Waar je ze zet

*Dezelfde naamregels als voor de rest van je bestanden, en een aparte map voor je bronnen.*

```bash
portfolio/
  src/
  public/
    img/
      maquette-stationsplein-800.webp
      maquette-stationsplein-1600.webp
      logo.svg
  design/                      # bronbestanden, niet mee in de build
    maquette.fig
    posters.psd
```

> [!NOTE]
> Klein geschreven, geen spaties, de breedte in de naam als je meerdere versies hebt. Zo weet je bij het aanpassen van je srcset meteen welk bestand je nodig hebt.

<!-- slide 35 -->

### Waarom is een png meestal een slecht idee voor een foto?

- A. Png gooit niets weg, dus een foto wordt er enorm zwaar in
- B. Png kan geen fotokleuren tonen
- C. Png werkt niet in elke browser
- D. Png verliest te veel kwaliteit

**Antwoord:** A. Png gooit niets weg, dus een foto wordt er enorm zwaar in

Png bewaart elke pixel exact. Bij een foto met duizenden kleurnuances levert dat een bestand op dat vier tot tien keer zwaarder is dan dezelfde foto als webp of jpg, zonder zichtbaar verschil.

<!-- slide 36 -->

### Spiekbriefje

*Wat je bij elk beeld even nagaat.*

- **Formaat**: Foto: webp. Logo of icoon: svg. Screenshot met tekst: png. Beweging: mp4.
- **Breedte**: Niet groter dan de plek waar het staat, maal twee voor retina.
- **Gewicht**: Onder 200 KB per beeld, onder 2 MB voor een hele pagina.
- **In html**: `width`, `height`, `alt`, en `loading="lazy"` behalve bovenaan.
- **Kleur**: Exporteer in sRGB en sluit het profiel in.
- **Bestanden**: Bron apart houden, export opnieuw maken in plaats van bewerken.

<!-- slide 37 -->

### Opdracht: Vijf beelden opnieuw

*20 minuten, Alleen*

Neem een project waar beelden in staan. Een oefening, je portfolio, om het even wat online staat.

1. Kijk in de developer tools, tabblad Network, hoeveel elk beeld weegt
2. Exporteer de vijf zwaarste opnieuw op de juiste breedte, in webp
3. Zet width, height en alt op elk beeld in je html
4. Meet opnieuw en noteer het verschil in totale paginagrootte

<!-- slide 38 -->

### Verder

*Vier bronnen waar je later nog naar teruggaat.*

- **[squoosh.app](https://squoosh.app)**: Formaten naast elkaar vergelijken, met het gewicht erbij.
- **[web.dev images](https://web.dev/learn/images)**: De volledige uitleg over beeld op het web, van formaten tot srcset.
- **[svgomg](https://jakearchibald.github.io/svgomg/)**: Poetst de rommel uit een svg die uit Figma of Illustrator komt.
- **[caniuse.com](https://caniuse.com)**: Welke browser welk formaat ondersteunt, altijd actueel.

## Begrippen

- **Raster**: Een beeld bewaard als een rooster van pixels, elk met een eigen kleur. Foto's en screenshots zijn raster, en vergroten geeft blokken of wazigheid. (slide 6)
- **Vector**: Een beeld bewaard als instructies: vormen, lijnen en kleuren. Blijft even scherp op elke grootte, dus de keuze voor logo's, iconen en illustraties. (slide 6)
- **Resolutie**: Hoeveel pixels een beeld breed en hoog is, zoals 1920 × 1080. Breedte maal hoogte geeft het aantal megapixels. (slide 7)
- **DPI**: Hoeveel punten inkt er per inch papier komen. Telt enkel voor drukwerk (300 dpi is de norm), een browser kijkt alleen naar het aantal pixels. (slide 8)
- **Retina**: Een scherm met meer fysieke pixels per css-pixel, in JavaScript uit te lezen met devicePixelRatio. Daarom exporteer je op 2x en toon je op 1x, anders ziet je beeld er zacht uit. (slide 9)
- **jpg**: Het veilige formaat voor foto's, overal te openen. Geen transparantie, en elke keer opnieuw opslaan kost kwaliteit. (slide 12)
- **webp**: Hetzelfde beeld als jpg aan ongeveer 30% minder gewicht, met transparantie als je die nodig hebt. Vandaag de standaardkeuze voor een foto op het web. (slide 12)
- **avif**: Nog lichter dan webp, vooral bij grote vlakken. Trager om te exporteren, en de ondersteuning in browsers is goed maar niet volledig. (slide 12)
- **png**: Een formaat zonder verlies, met transparantie. Goed voor screenshots en tekst in beeld, veel te zwaar voor een foto. (slide 13)
- **svg**: Een vectorformaat dat gewoon tekst is: je ziet de vormen staan als je het opent. Schaalbaar, en aan te passen met css, dus ideaal voor logo's en iconen. (slide 15)
- **currentColor**: Een css-waarde die de kleur van de tekst eromheen overneemt. Eén svg-icoon krijgt zo elke kleur, zonder een tweede bestand. (slide 15)
- **Alfakanaal**: De informatie in een beeld die per pixel zegt hoe doorzichtig hij is. png, webp, avif en svg hebben er een, jpg niet, en dan krijg je een witte of zwarte achtergrond. (slide 14)
- **Lossy**: Compressie die detail weggooit dat je oog amper ziet. Veel kleiner en onomkeerbaar. jpg, webp, avif en mp4 werken zo, prima voor foto's en video. (slide 19)
- **Lossless**: Compressie die elke pixel exact bewaart. Groter, maar je verliest niets: png, webp lossless en zip. Voor screenshots, tekst en vlakke kleur. (slide 19)
- **Generatieverlies**: Kwaliteit die je kwijtspeelt door een jpg telkens opnieuw te openen en op te slaan, want elke ronde comprimeert opnieuw. Bewerk daarom altijd je bronbestand en exporteer opnieuw. (slide 20)
- **srcset**: Een attribuut op <img> met meerdere breedtes van hetzelfde beeld. De browser kiest het lichtste bestand dat scherp genoeg is voor het scherm. (slide 25)
- **Lazy loading**: Met loading="lazy" haalt de browser een beeld pas op wanneer je ernaartoe scrolt. Nooit op het grote beeld bovenaan, dat moet meteen verschijnen. (slide 26)
- **Alt-tekst**: Beschrijft wat er op een beeld te zien is, voor screenreaders en voor wanneer het niet laadt. Een lege alt="" zegt bewust: dit is versiering, sla het over. (slide 27)
- **sRGB**: De kleurruimte waar het web van uitgaat. Je camera en je Mac werken vaak in het fellere Display P3, dus exporteer in sRGB en sluit het profiel in. (slide 28)
- **CRF**: De instelling in ffmpeg (-crf) waarmee je de kwaliteit van een video afweegt tegen de grootte. Met 26 wordt een mp4 flink kleiner zonder zichtbaar verlies. (slide 30)
- **Bronbestand**: Je werkbestand met alle lagen en tekst nog aanpasbaar: .fig, .psd, .ai of .blend. Dat bewaar je, ook na de deadline. (slide 33)
- **Export**: Een platgeslagen en gecomprimeerde versie van je bronbestand, voor één doel. Een eindproduct: wil je iets aanpassen, ga dan terug naar de bron. (slide 33)

## Links en bronnen

### In de presentatie

- [squoosh.app](https://squoosh.app) (slide 22, slide 38)
- [ImageOptim en TinyPNG](https://imageoptim.com) (slide 22)
- [web.dev images](https://web.dev/learn/images) (slide 38)
- [svgomg](https://jakearchibald.github.io/svgomg/) (slide 38)
- [caniuse.com](https://caniuse.com) (slide 38)