# Afbeeldingen en hun formaten
Met afbeeldingen kunnen we uiteraard veel sneller iets duidelijk maken dan met woorden. Daarnaast kunnen afbeeldingen ook gebruikt worden om een bepaalde sfeer te scheppen.
Er zijn heel wat afbeeldingsformaten (JPEG, GIF, PNG, EPS, WEBP …) die ondersteund worden in een browser. Maar welke kiezen we nu best? Daar bestaat geen sluitend antwoord voor en is afhankelijk van welk soort afbeelding je wenst te tonen.
# Raster afbeeldingsformaten
Raster (of bitmap) afbeeldingsformaten maken gebruik van pixels en kleur om een afbeelding voor te stellen. Afhankelijk van het type is de bestandsgrootte verschillend. Dit heeft alles te maken met compressie. Bij compressie heb je 2 soorten:
- Lossy: Met verlies van data (pixel informatie)
- Lossless: Zonder verlies van data en kan je dus via decompressie dus opnieuw dezelfde afbeelding bekomen.
Hieronder vind je een overzicht van de formaten met hun voor- en nadelen.
# JPEG
JPEG – uigesproken als “jay-peg” – heeft de extensie .jpg of .jpeg en is een raster afbeeldingsformaat dat vooral gebruikt wordt vanwege de hoge compressie mogelijkheid. De hoge compressie zorgt wel voor gegevensverlies (Eng. lossy compression). Maar men kan een compressie van 10:1 bereiken met weinig verlies in kwaliteit. Er zijn nog andere varianten ontwikkeld zoals JPEG2000 en JPEG XR die een hogere compressie mogelijkheid bieden.
Download deze foto en open deze in Photoshop. Ga op zoek naar de afbeeldingsgrootte en het aantal pixels per inch.
# PNG
PNG – “ping” – is een raster afbeeldingsformaat dat ook compressie mogelijkheden heeft maar dan zonder het verlies van ‘data’ (Lossless compression). Uiteraard kan je nooit dezelfde compressie bereiken als met JPEG.
Maar een van de grootste redenen waarom PNG populair is, is omdat het ook transparantie ondersteund. En dus daarom vaak gebruikt worden bij logo’s of bij het ‘uitsnijden’ van bijvoorbeeld personen.
# GIF
GIF – officieel uitgesproken als “djif”, maar de meeste mensen zeggen “gif” – is een raster afbeeldingsformaat die een iets betere compressie biedt dan PNG. Daarnaast biedt GIF ook transparantie aan maar in vergelijking met PNG is dit enkel 1-bit transparantie (monochrome). Een pixel is volledig transparant of is niet transparant. Maar een van de grootste redenen waarvoor GIF gebruikt wordt is voor zijn mogelijkheid tot het maken van geanimeerde afbeeldingen.
# PNG versus GIF transparantie
# APNG of Anitmated PNG
APNG is een PNG die de animatie mogelijkheden biedt zoals GIF.
# TIFF
TIFF is een afbeeldingsformaat dat vooral gebruikt worden bij grafisch ontwerpers en in de print- en drukwereld. Dit omdat het formaat een hoge kwaliteit heeft. Wat ook resulteert in een heel hoge bestandsgrootte.
# WebP
WebP werd in 2010 ontwikkeld door google met als doen de nieuwe open standaard te worden voor ‘lossy compressed’ afbeeldingen voor het web. Dus afbeeldingen die een hoge compressie hebben, met ‘data’ verlies. Je kan afbeeldingen genereren die 26 tot 34% kleiner zijn dan JPEG voor eenzelfde kwaliteit. WebP ondersteund tevens transparantie en is vele malen kleiner dan PNG bestanden.
# Vector afbeeldingsformaten
# SVG
SVG is in vergelijking tot bovenstaande geen raster afbeeldingsformaat, maar werkt op basis van vectoren geschreven in een XML formaat. Dit bestand beschrijft de afbeelding aan de hand van coördinaten, lijnen, curves, vormen, kleuren en tekst.
Dit formaat wordt daarom vooral gebruikt bij afbeeldingen met vooral vormen zoals logo’s. Omdat niet elke pixel omschreven is is de bestandsgrootte ook veel kleiner dan bijvoorbeeld een raster afbeeldingsformaat.
Maar het grote voordeel is dat als je de afbeelding groter of kleiner kan maken zonder kwaliteitsverlies. Als je bijvoorbeeld de straal van een cirkel groter maakt dan blijft de cirkel bij SVG even mooi rond omdat deze wiskundig berekend en getekend wordt.
# Andere vector afbeeldingsformaten
AI, EPS, PDF … zijn naast SVG de bekendste vector afbeeldingsformaten. Echter kunnen deze formaten niet gebruikt worden in de browser. Deze zal je dan ook vooral tegenkomen in de print- en drukindustrie.
# Grootte en resolutie
Bij rasterafbeeldingen werken we dus met pixels. Naast de juiste keuze van afbeeldingsformaat is het ook belangrijk om de juiste grootte en resolutie te kiezen.
Eenvoudig gesteld: Niet retina schermen hebben een resolutie van 72 pixels per inch. Als we een afbeelding willen weergeven over het volledige scherm van een 13,3 inch laptop. Dan hebben we een afbeelding nodig van 1280 × 800 pixels met een resolutie van 72 pixels per inch.
- Alles wat groter is zijn te veel pixels die niet getoond zullen worden.
- Als we een kleinere afbeelding hebben dan zal deze uitvergroot worden en zal de computer de pixels groter maken dan de eigenlijke pixels van een scherm wat dus voor een wazig beeld zal zorgen.
Maar het kiezen van de juiste grootte en resolutie is door de komst van de mobiele devices en de grote diversiteit aan schermformaten en resoluties is deze keuze niet altijd eenvoudig.
# Schermresoluties
Een afbeelding van een nieuwsartikel is op een 17" laptop bijvoorbeeld 1200 × 800 px. Terwijl dezelfde afbeelding ook getoond wordt op een smartphone met een schermbreedte van 480px. De afbeelding wordt dus kleiner gemaakt door de browser.
Het nadeel is wel dat deze afbeelding eerst volledig wordt gedownload over het (mobiele) netwerk. Terwijl we niet alle pixels gaan tonen aan de gebruiker.
Anderzijds hebben de meeste smartphones een grotere schermresolutie dan laptops.
# Het verschil tussen fysieke pixels en logische pixels
De ontwikkelaars van de toestellen waarop wij sites bekijken bepalen hoeveel fysieke pixels of device pixels (hardware) gelijk staan aan één logische pixel of css pixel (software). Deze verhouding heet de device pixel ratio.
Apple is hier op een bepaald moment mee begonnen toen zij hun Retina-displays lanceerden. 1 css pixel (logische pixel) bekeken op een retina scherm bestaat uit 4 fysieke pixels (device pixels). De device pixel ratio is hier 2 (horizontaal × 2 en verticaal × 2). De Samsung Galaxy S4 introduceerde een device pixel ratio van 3 waardoor elke logische pixel uit 9 fysieke pixels bestaat. De LG G3 was de eerste met een device pixel ratio van 4, net zoals de Samsung Galaxy S6.
Ter verduidelijking: zie het schema hieronder
# Waarom is dit van belang voor designers?
Een css pixel blijft steeds min of meer even groot, wat ervoor zorgt dat onze ontwerpen ongeacht de evolutie van de schermen steeds op min of meer dezelfde grootte worden weergegeven.
Positief: hogere device pixel ratio betekent in de praktijk:
- Scherpere tekst.
- Scherpere iconen (bitmap icons zoals die in PNG-, JPEG- of GIF-formaat, moeten hiervoor geoptimaliseerd worden. Vectoriële iconen zoals die in SVG-formaat gaan automatisch in hogere kwaliteit weergegeven worden.
- Mogelijkheid om hoge(re) resolutie beelden te gebruiken. In onderstaand voorbeeld zie je hoe via css Media Queries (Koppelingen naar een externe site.) per minimum resolutie een andere achtergrondafbeelding kan geladen worden.
/* This is the original logo. */
/* basisresolutie 96dpi */
.logo {
width: 197px;
height: 182px;
/* Source image is 197px by 182px. */
background: url('img/logo.png') no-repeat center center;
}
/* This will replace the logo with a 2x version on devices with a 2:1 ratio, such as Apple devices. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo {
/* Source image is 394px by 364px. */
background-image: url('img/[email protected]');
background-size: 197px 182px;
}
}
/* This will replace the logo with a 3x version on devices with a 3:1 ratio, such as the Samsung Galaxy S5. */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
.logo {
/* Source image is 591px by 546px. */
background-image: url('img/[email protected]');
background-size: 197px 182px;
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| Scherm resolutie | Aantal pixels | Bestandsgrootte[1] |
|---|---|---|
| 1x | ||
| 2x | ||
| 3x |
# Snelheid van inladen
De snelheid van inladen heeft dus alles te maken met enerzijds de bestandsgrootte van uw afbeelding en anderzijds de snelheid van uw netwerkverbinding.
Hoe groter de netwerksnelheid hoe sneller een website (met afbeelding) zal inladen. Stel dat je een website hebt van een fotograaf met 50 afbeeldingen die elk 1 MB groot zijn. Dan zie je hieronder hoelang het zal duren om de volledige website in te laden.
| Type | Technology | Gemiddelde downloadsnelheid | 50 MB downloaden |
|---|---|---|---|
| 2G | GPRS | … | |
| E | EDGE | ||
| 3G | 3G (Basic) | ||
| H | HSPA | ||
| HSPA+ | |||
| 4G | LTE Category 4 | ||
| 4G+ | LTE-Advanced Cat6 | ||
| 4G+ | LTE-Advanced Cat12 | ||
| 5G | 5G | ||
| WIFI | AHS Open |
Om een afbeelding van
te downloaden in heb je een downloadsnelheid nodig van
# Responsive resolutie switch
Via het attribuut srcset bij afbeeldingen kan je verschillende varianten doorgeven die ingeladen kunnen worden. Samen met het sizes attribuut kiest de browser dan de beste afbeelding voor het scherm van de gebruiker. Op die manier kan je ervoor zorgen dan kleinere of grotere versies van eenzelfde afbeelding worden ingeladen. Dit kan ofwel snelheidsvoordeel opleveren of voor een hogere kwaliteit zorgen bij bijvoorbeeld retina schermen.
<img src="mijn-foto-800w.jpg" alt="Dit is mijn foto">
<img srcset="mijn-foto-320w.jpg 320w,
mijn-foto-480w.jpg 480w,
mijn-foto-800w.jpg 800w"
sizes="(max-width: 320px) 320px,
(max-width: 480px) 440px,
800px"
src="mijn-foto-default.jpg" alt="Dit is mijn foto">
2
3
4
5
6
7
# Alternatief via het picture element
<picture>
<source media="(max-width: 799px)" srcset="landschapsfoto-met-persoon-480w-uitgesneden.jpg">
<source media="(min-width: 800px)" srcset="landschapsfoto-met-persoon-800w.jpg">
<img src="landschapsfoto-met-persoon-800w.jpg" alt="Je ziet een persoon in een landschap">
</picture>
2
3
4
5
Ongecomprimeerde bestandsgrootte (4 bytes per pixel) ↩︎