Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing

Het proces van optimaliseren van afbeeldingen stapsgewijs

Note: Sinds ik mijn website heb geupgrade naar WordPress 4.4 kloppen de bestandsgroottes in de tekst bij de afbeeldingen niet meer. Dit komt doordag WordPress nu standaard “Responsive Images” van afbeeldingen maakt. Meer hierover kun je lezen op Responsive Image in WordPress 4.4

Het proces om afbeeldingen op een webpagina te optimaliseren kun je grofweg in 3 stappen indelen:

  1. Sla de originele afbeelding op in het juiste opslagformaat en met de juiste kwaliteit.
  2. Optimaliseer de afbeelding door middel van een afbeeldingsoptimizer zoals kraken.io of optimizilla
  3. Optimaliseer de afmetingen van de afbeelding op de pagina zelf. Gebruik het correcte afmetingen zodat het plaatje niet wordt geschaald op de pagina.

schaalfout voorbeeld van eenafbeelding op een pagina Hieronder zie je een afbeelding die stapsgewijs wordt geoptimaliseerd. De meest geoptimaliseerde afbeelding is uiteindelijk maar 0,5% van de orginele bestandsgrootte.

Afbeelding 1: alles fout

Bij deze afbeelding is nog niks aan optimalisatie gedaan. Er is een afbeelding gebruikt van het formaat .png met de originele bestandsgrootte.

Voorbeeld plaatje,formaat png, afmetingen 1800 x 1125, grootte 3133,32 kb, kwaliteit 100%
  • Opslagformaat : png
  • Afmetingen 1800px × 1125px
  • Bestandsgrootte is 3.133,32 KB
  • Geschaald naar 348px breed

Afbeelding 2: alleen een ander opslag formaat

Bij deze afbeelding is alleen het formaat .png vervangen voor het formaat .jpg.

Voorbeeld plaatje,formaat jpg, afmetingen 1800 x 1125, grootte 935 kb, kwaliteit 100%
  • Opslagformaat: jpg
  • Afmetingen: 1800px × 1125px
  • Bestandsgrootte: 935 KB
  • Kwaliteit: 100%
  • Geschaald naar 348 px breed

Afbeelding 3: Correct opslag formaat met kwaliteit 80%

Deze afbeelding is opgeslagen in het formaat .jpg met een kwaliteitsbehoud van 80% ten opzichte van het orgineel.

Voorbeeld plaatje,formaat jpg, afmetingen 1800 x 1125, grootte 194 kb, kwaliteit 80%
  • Opslagformaat: jpg
  • Afmetingen: 1800px × 1125px
  • Bestandsgrootte: 194 KB
  • Kwaliteit: 80%
  • Geschaald naar 348px breed

Afbeelding 4: Correct opslag formaat met kwaliteit 80% en geschaald op basis van container

De grootte van dit plaatje is opgeslagen op basis van de grootte van de container waarin deze afbeelding wordt geplaatst.

Voorbeeld plaatje,formaat jpg, afmetingen 726 × 454, grootte 42 kB, kwaliteit 80%
  • Opslagformaat: jpg
  • Afmetingen: 726px × 454px
  • Bestandsgrootte: 42 KB
  • Kwaliteit: 80%
  • Geschaald naar 348px breed

Afbeelding 5: Correct opslag formaat met kwaliteit 80% , geschaald op basis van container, geoptimaliseerd met kraken.io

Via de webinterface van kraken.io kan het plaatje nog meer worden verkleind door de data op een slimmere manier op te slaan.

Voorbeeld plaatje,formaat jpg, afmetingen 726 × 454, grootte 39 kB, kwaliteit 80%, geoptimaliseerd met kraken.io
  • Opslagformaat: jpg
  • Afmetingen: 726px × 454px
  • Bestandsgrootte: 39 KB
  • Kwaliteit: 80%
  • Geschaald naar 348px breed
  • Geoptimaliseerd met kraken.io

Afbeelding 6: alles goed

Bij deze afbeelding wordt het plaatje nu in het juiste formaat weergegeven zonder dat het in de browser wordt geresized.

Voorbeeld plaatje,formaat jpg, afmetingen 726 × 454, grootte 39 kB, kwaliteit 80%, geoptimaliseerd met kraken.io
  • Opslagformaat: jpg
  • Afmetingen: 348px × 217px
  • Bestandsgrootte: 17,2 KB
  • Kwaliteit: 80%
  • Formaat 348px breed
  • Geoptimaliseerd met kraken.io
Geplaatst in Blog, Performance
Tags: , , ,