26 jan, 2023
6 min
AI is hot and happening! ChatGPT, een krachtig taalmodel van OpenAI, speelt hierin een hele grote rol.
Update
2 min
17 jan, 2018
Dit bericht is meer dan één jaar oud. De inhoud van dit bericht kan inmiddels verouderd zijn.
Website snelheid: kijk uit met grote afbeeldingen!
In moderne websites worden steeds meer afbeeldingen gebruikt. Het lijkt tegenwoordig wel een wedstrijd: wie de beste foto in zijn website heeft staan, heeft gewonnen. Nu zijn al deze foto’s natuurlijk erg mooi en voor veel websites een aanvulling op de algehele uitstraling. Maar let wel goed op, want de snelheid van je website kan er flink onder lijden en daarmee indirect ook de prestaties van je website.
Haal een willekeurige website door een snelheidscheck en de kans is groot dat deze aangeeft dat je je afbeeldingen moet optimaliseren. Nu is het soms wel zaak om wat beter te bekijken wat er nu daadwerkelijk veranderd moet worden. Staat er bijvoorbeeld dat je slechts een paar procent of KB kan besparen, dan is dit te verwaarlozen. Maar als je nooit stil hebt gestaan bij de grootte van je afbeeldingen, dan is de kans groot dat hier een schokkend hoog getal staat, soms wel 80 tot 90%.
Staat er zo’n hoog getal, dan is het aan te raden om dit op te lossen. Je kan dit op verschillende manieren doen:
1. Juiste hoogte & breedte
Controleer of je afbeelding de juiste hoogte en breedte heeft. Het kan voorkomen dat de afbeelding die je in de website ziet staan, eigenlijk een stuk groter is dan dat je op dat moment ziet. De afbeelding wordt dan vaak via CSS verkleind. Wil je website dus een afbeelding plaatsen van bijvoorbeeld 250px * 250px, zorg er dan voor dat je ook een afbeelding van 250px * 250px uploadt.
2. Sla de #afbeelding voor het web op
Je wilt de afbeelding voor je website gebruiken, dus sla de afbeelding dan ook niet op met drukkwaliteit. Veel programma’s hebben de functie “Opslaan voor webβ. Maak hier dan ook gebruik van.
3. Sla de afbeelding op in het juiste bestandsformaat
Voor een website zijn er 3 gangbare bestandsformaten waaruit je kan kiezen, namelijk: Jpeg, GIF & PNG. Weet echter goed wanneer je welk formaat moet gebruiken.
- GIF: gebruik deze voor kleine icoontjes & pictogrammen
- PNG: gebruik deze voornamelijk voor afbeeldingen met transparante achtergronden
- Jpeg: gebruik dit bestandsformaat voor alle overige afbeeldingen; dit is het meest gebruikte formaat.
4. Comprimeer de afbeeldingen
Je hebt verschillende technieken om afbeeldingen te verkleinen. De meest gebruikte zijn lossy en lossless. Gebruik deze technieken om je afbeeldingen nog verder te verkleinen zonder kwaliteitsverlies. Je kan hier soms wel tot 80% verder mee besparen in grootte.
Het kan een redelijke klus zijn om al je afbeeldingen aan te passen en dit ook doorlopend goed te hanteren. Je zal er echter veel profijt van hebben. Doordat je website sneller wordt, geef je je bezoekers een betere bezoekerservaring en zal je beter scoren in de indexering van Google. De moeite waard dus!
