Inhoudsopgave
Mensen zijn visuele wezens, en onderzoek ondersteunt dat feit. Na slechts drie dagen ligt de retentiegraad voor tekst binnen het bereik van slechts 10%-20%. Maar voor afbeeldingen kan de retentiegraad oplopen tot 65%. De hersenen ontvangen 90% van de visuele informatie en verwerken deze 60.000 keer sneller. Zonder twijfel spelen afbeeldingen een cruciale rol bij de betrokkenheid bij websites.
Er is echter veel meer voor nodig dan alleen wat afbeeldingen uitkiezen en ze op uw site plaatsen. Zware afbeeldingen verbruiken veel bandbreedte, waardoor het laden van pagina's wordt vertraagd. Zoekmachines zullen de trage prestaties opmerken en u bestraffen met een lage ranking.
Ons artikel toont je zes verschillende manieren om afbeeldingen te optimaliseren voor betere webprestaties in 2021.Tips voor beeldoptimalisatie voor betere webprestaties in
Laten we zeggen dat u websites ontwerpt voor non-profitorganisaties en dat u graag veel afbeeldingen gebruikt om uw werk te laten zien. Donateurs, sponsors en andere belanghebbenden gebruiken dergelijke informatie als basis voor blijvende steun. Als u de afbeeldingen echter niet optimaliseert, zullen de gebruikerservaring en de betrokkenheid hieronder lijden. Het grootste probleem zal het langzaam laden van pagina's en time-outreacties zijn.
Beeldoptimalisatie verwijst naar alle stappen die u neemt om de grootte, het formaat of de resolutie van de bestanden te verminderen. U kunt dit doen zonder de kwaliteit van de afbeeldingen aan te tasten.
Laten we enkele van uw opties bekijken.
Illustratie marketingcampagne door Deemak Daksina
1. Begin met een beeldoptimalisatie-audit
Een beeldoptimalisatie-audit levert relevante informatie op over waar u moet verbeteren.
Begin met een inventarisatie van de afbeeldingen die u op uw site heeft staan. Relevante tests zullen eventuele problemen vaststellen die u moet aanpakken.Uit de audit kan bijvoorbeeld blijken dat u te veel afbeeldingen hebt. Ook de opmaak van uw afbeeldingen wordt getoond, zodat u de volgende actie kunt bepalen. Zo kan het verwijderen of wijzigen van de bestandsformaten de laadsnelheid van de pagina's aanzienlijk verbeteren.
2. Kies het juiste formaat voor de beelden
Afbeeldingsbestanden zijn er in verschillende formaten. Dit zijn de drie meest voorkomende typen afbeeldingsformaten voor webapplicaties die u moet kennen:
- PNG heeft het voordeel dat het een afbeelding van zeer hoge kwaliteit is. Helaas is de bestandsgrootte daarvoor erg groot. Ze werken goed voor eenvoudige afbeeldingen en logo's en maken compressie zonder verlies mogelijk.
- JPEG's zijn de meest voorkomende op de meeste websites. Ze zijn uitstekend geschikt voor complexe, kleurrijke afbeeldingen. U moet echter voorzichtig zijn met het comprimeren van JPEG-afbeeldingen, want naarmate de afbeelding kleiner wordt, kan deze aan helderheid inboeten. Sommige mensen noemen dit lossy.
- GIF werkt voor animaties, kleine pictogrammen en afbeeldingen met een lage resolutie. Het maakt compressie zonder verlies mogelijk, maar je kunt maximaal 256 kleuren gebruiken.
Bewaar iconen door Andreas Storm
3. Formaat van de beelden aanpassen en comprimeren
U hebt misschien gemerkt dat de afbeeldingen beetje bij beetje lijken te laden. Er gaat enige tijd voorbij voordat u het volledige beeld te zien krijgt; een teken dat de afbeeldingen waarschijnlijk te zwaar zijn. De grootte aanpassen of comprimeren lost het probleem op.
Let erop dat je geen afbeeldingen uploadt voordat je ze hebt geoptimaliseerd. En voor de beste kwaliteit streef je naar bestanden van 1 tot 2 MB.Gebruik het bijsnijdgereedschap om de afbeeldingen te verkleinen. Het helpt de bestandsgrootte te verkleinen, wat resulteert in een betere laadsnelheid van de pagina's. Je hebt heel veel gereedschappen tot je beschikking.
Zie ook: De schoonheid van het combineren van ontwerptoolsHet comprimeren van afbeeldingen helpt de bestandsgrootte te verminderen. Maar u kunt het beeld vervormen als u het te veel comprimeert. Lage compressie kan ideaal zijn als u de beeldkwaliteit wilt behouden; het vermindert de grootte echter niet aanzienlijk.
Soorten compressies
Er zijn twee concepten die we hierboven al hebben genoemd, lossless vs. lossy compressie.
- Bij lossless compressie blijft de beeldkwaliteit behouden terwijl onnodige metadata worden verwijderd.
- Compressie met verlies vermindert de bestandsgrootte door sommige elementen weg te laten. Dit kan ten koste gaan van de beeldkwaliteit. Het is echter mogelijk dat u het verschil niet merkt. Het kan dus nog steeds een uitstekende manier zijn om afbeeldingen te comprimeren.
De juiste beeldbewerker zal u helpen bepalen welke compressie voor u het beste werkt.
4. Mobile-first beeldoptimalisatie
Alle stappen die u neemt, moeten een mobile-first SEO-strategie volgen, sinds Google is overgeschakeld op mobile first rankings. De afbeeldingen moeten er op elk mobiel apparaat hetzelfde uitzien als op elk desktopapparaat. Een enorme hoeveelheid internetverkeer komt via dergelijke apparaten.
Als de gebruikers niet betrokken zijn bij een goede UX bij het gebruik van mobiele apparaten, raakt u ze kwijt.
Overweeg om afbeeldingen te optimaliseren voor mobile-first. Als het er goed uitziet op het kleine scherm, zal het er ook fantastisch uitzien op een desktop of laptop.
ASO optimalisatie door Abbi_Kerimov
Zie ook: 15 Inspirerende ontwerpcitaten5. Bestandsnamen en hun invloed op SEO
Beeldoptimalisatie vereist ook dat u aandacht besteedt aan hoe u de bestanden een naam geeft. Alle acties die u onderneemt, moeten tot doel hebben de zichtbaarheid in de zoekmachines te verbeteren. Wanneer u een foto uploadt of neemt, geeft het apparaat deze automatisch een bestandsnaam. Deze naam bestaat meestal uit willekeurige codes of cijfers. Hij kan er zoiets uitzien als 2224444.jpg.
Het uploaden van de foto as-is op uw website zal de zoekmachines helemaal niet helpen.
Maak het gemakkelijker voor webcrawlers om u te vinden door beschrijvende labels toe te kennen aan elke afbeelding. Neem relevante trefwoorden op die informatie geven over uw bedrijf of site.6. Overweeg het gebruik van lui laden
Het lui laden van afbeeldingen is precies zoals de naam doet vermoeden. In plaats van de hele afbeelding in één keer te laden, ontvouwt deze zich als het ware. De afbeelding blijft laden naarmate de online bezoeker meer naar beneden scrolt op de pagina.
Lazy loading laat alleen zien wat op dat moment relevant is. Je bespaart uiteindelijk bandbreedte omdat je geen onnodige bronnen gebruikt.
Laden... door Dona
Laatste gedachten
Google zal uw site bestraffen als de laadsnelheid van de pagina laag is.
Veel factoren bepalen de paginasnelheid, en het gebruik van afbeeldingen staat bovenaan. Als u afbeeldingen niet optimaliseert, zullen uw webprestaties daaronder lijden. De pagina's zullen traag laden, en de gebruikerservaring en betrokkenheid zullen niet goed zijn.
Kies het juiste afbeeldingsformaat. Gebruik vervolgens technieken als resizing en compressing om de bestandsgrootte te beperken. Plan regelmatig paginatests en site audits om de prestaties van de site te controleren.
