Hoe u uw afbeeldingen kunt optimaliseren om SEO-vriendelijk te zijn (complete gids)

De prestaties van uw website zijn afhankelijk van verschillende factoren, variërend van de specifieke webhost die u kiest, via de richtlijnen voor toegankelijkheid van de website tot de afbeeldingsbestandsgroottes die u gebruikt.


Als u ze opmaakt voor de juiste grootte, kan de kwaliteit echter afnemen vanwege de wijzigingen die u aanbrengt. Het goede nieuws is dat je met een paar technieken en trucs een optimale beeldkwaliteit kunt behouden en de juiste maat kunt krijgen.

Wat is beeldoptimalisatie?

afmetingen voor beeldoptimalisatieWebpagina’s kunnen aanzienlijk vertragen wanneer er grote afbeeldingen aanwezig zijn. Dit kan de laadtijden verkorten en de algehele ervaring onvoldoende maken voor de bezoekers van uw site.

Het verkleinen van de bestandsgrootte is beeldoptimalisatie. Hiervoor kunt u een script of een plug-in gebruiken.

Dit resulteert dan in snellere laadtijden voor uw pagina’s. Lossless en lossy compressie zijn de twee meest gebruikte optimalisatiemethoden.

Voordelen van beeldopmaak

gemiddelde afbeeldingsformaten op internetNaar schatting is ongeveer 54 procent van het totale gewicht van een webpagina te danken aan afbeeldingen.

Wanneer u werkt aan website-optimalisatie, zouden uw afbeeldingen hierdoor uw eerste taak moeten zijn. De voordelen van beeldopmaak zijn onder meer:

  • Verbeterde laadsnelheid van de pagina
  • Het is sneller om back-ups te maken
  • Er is minder serveropslagruimte nodig
  • Verbeterde SEO met de juiste SEO-plug-in
  • Er wordt minder bandbreedte gebruikt

Prestaties verbeteren met beeldoptimalisatie

Het doel is om de acceptabele kwaliteit en de laagst mogelijke bestandsgrootte evenwichtig te balanceren. U kunt dit op meerdere manieren doen. Voor het uploaden is het comprimeren van je afbeeldingen een veel voorkomende optie. U kunt hiervoor een tool of een plug-in gebruiken (hier zijn er een paar).

Het is belangrijk om rekening te houden met het type compressie en het bestandsformaat dat u gebruikt. De juiste combinatie maakt het mogelijk om het formaat van je afbeelding tot wel vijf keer te verkleinen.

Experimenteer met verschillende bestandsindelingen en compressietypes om de beste combinatie voor uw behoeften te bepalen.

Kies het beste bestandsformaat

Om het beste bestandstype te kiezen, is het belangrijk om te weten welke er beschikbaar zijn. Dit zijn de meest voorkomende:

  • JPEG: Dit type maakt gebruik van lossless en lossy optimalisatie. U kunt een solide balans vinden tussen bestandsgrootte en kwaliteit door het kwaliteitsniveau aan te passen.
  • PNG: Dit type heeft meestal een grotere bestandsgrootte, maar de afbeeldingen zijn van hogere kwaliteit. U kunt compressie met of zonder verlies gebruiken.
  • GIF: Dit is ideaal voor geanimeerde afbeeldingen. U kunt alleen compressie zonder verlies gebruiken. Het gebruikt slechts 256 kleuren.

afbeeldingsbestandsformaten

Er zijn andere opties, maar deze behoren tot de meest gebruikelijke en zijn gemakkelijk om mee te werken. Andere opties zijn JPEG XR en WebP. Niet alle browsers ondersteunen deze twee, dus houd hier rekening mee.

Ze kunnen echter een haalbare keuze zijn. In vergelijking met een vergelijkbare JPEG-afbeelding is er bijvoorbeeld een gemiddelde bestandsafname van 30 procent met WebP.

Vanwege het gebrek aan universele ondersteuning voor deze twee opties, heeft uw applicatie extra logica op uw servers of applicatie nodig om de juiste bron te bieden:

  • Beeldoptimalisatie is een service die door sommige CDN’s wordt geleverd, inclusief levering van WebP en JPEG XR.
  • Om de client te detecteren, moet u het beste beschikbare beeldformaat bieden en de ondersteunde formaten controleren. Het is mogelijk om extra toepassingslogica toe te voegen.
  • Bepaalde open source-tools automatiseren het gesprek, de optimalisatie en de weergave van de juiste middelen.

Grootte versus compressiekwaliteit

Lage compressie geeft meestal een hogere kwaliteit, maar de bestandsgrootte is meestal groter. Bij hoge compressie geldt het tegenovergestelde. De bestanden zijn kleiner, maar de kwaliteit neemt af.

beeldkwaliteit versus compressie

Idealiter wilt u een totaal van één tot twee MB voor het totale gewicht van uw webpagina. Bedenk dus hoeveel afbeeldingen u moet gebruiken en deel dit getal door ongeveer 1,5. Dit geeft je de grootte per afbeelding die de beste laadsnelheid mogelijk maakt.

Lossless vs. Lossy-optimalisatie

Dit zijn de twee soorten compressie die u zult gebruiken. Het is belangrijk om te begrijpen wat ze doen:

  • lossless vs lossy compressieZonder verlies: Dit comprimeert gegevens en het is een filter. Voordat de afbeelding wordt gerenderd, moet deze niet zijn gecomprimeerd. De kwaliteit wordt echter niet verminderd. Er zijn verschillende tools die verliesloze compressie uitvoeren.
  • Lossy: Dit elimineert sommige gegevens en het is een filter. Houd er rekening mee hoeveel reductie u doet, omdat dit de afbeelding zal verslechteren. U kunt verschillende afbeeldingseditors en tools gebruiken om de kwaliteitsinstellingen van de afbeelding aan te passen.

De optimale configuratie van verliesloze of verliesgevende configuratie hangt af van uw eigen criteria, zoals de afweging tussen geïntroduceerde artefacten en bestandsgrootte, en de inhoud van de afbeelding.

Er is niet één universele instelling die op alle afbeeldingen van toepassing is. Uiteindelijk wil je spelen met verschillende afbeeldingen om te zien welke het beste werkt.

Afbeeldingen op schaal schalen

Dankzij responsieve pagina’s op sites, zoals WordPress, krijg je verschillende bestandsgroottes in je mediabibliotheek. Uw browser kan de beste maat kiezen en deze downloaden. Het formaat dat de browser kiest, is gebaseerd op de resolutie van het apparaat.

formaat van afbeelding wijzigen in wordpress

Het originele bestand blijft onaangeroerd en blijft behouden. U kunt plug-ins gebruiken om te voorkomen dat u het origineel opslaat om schijfruimte te besparen als u dat wilt.

Afbeeldingen vervangen en elimineren

Heeft u alle afbeeldingen op een webpagina nodig? Zo niet, verwijder dan de overbodige. Als ze echter allemaal relevant zijn voor de inhoud, overweeg dan om de afbeeldingen van grotere of lagere kwaliteit te vervangen door betere opties.

In sommige gevallen kunnen weblettertypen en CSS-effecten de plaats van afbeeldingen innemen, terwijl ze toch een mooie visuele esthetiek op de pagina bieden. Met weblettertypen kunnen mooie lettertypen helpen om de bruikbaarheid te verbeteren en uw pagina’s een meer op maat gemaakte look te geven.

Het kan ook uw leesbaarheid en branding verbeteren. Zorg ervoor dat u de tekst nog steeds gemakkelijk kunt zoeken, selecteren en het formaat ervan kunt wijzigen zonder dat er leesbaarheidsproblemen zijn.

CSS-effecten bevatten elementen, zoals schaduwen en verlopen. Ook deze kunnen verdere branding geven. Animaties kunnen op elk webpagina-niveau en elke resolutie een visuele aantrekkingskracht hebben op uw webpagina. Vergeleken met afbeeldingsbestanden zijn dit een fractie van de bytes.

Raster versus vectorafbeeldingen

rastor vs vector

Raster en vector zijn twee van de primaire bestandstypen voor afbeeldingen. Op pixel gebaseerde programma’s, een scanner of een camera worden gebruikt om rasterafbeeldingen te maken.

Deze worden veel gebruikt op internet en vaker gebruikt. Vectorsoftware wordt gebruikt om vectorafbeeldingen te maken. Deze zijn gebruikelijk voor afbeeldingen die naar fysieke producten gaan, en in engineering, CAD en 3D-afbeeldingen.

Vectorafbeeldingen zijn resolutie- en zoomonafhankelijk. Als het om geometrische vormen gaat, is vector ideaal. Als afbeeldingen complex zijn en een schat aan details en onregelmatige vormen hebben, hebben rasterafbeeldingen de voorkeur.

Rasterafbeeldingen coderen de individuele waarden van elke pixel binnen een rechthoekig raster om een ​​afbeelding weer te geven. Vectorafbeeldingen vertegenwoordigen een afbeelding met punten, lijnen en veelhoeken.

Schermimplicaties met hoge resolutie

Het is belangrijk om onderscheid te maken tussen de twee verschillende pixeltypen, waaronder apparaatpixels en CSS-pixels. Meerdere apparaatpixels kunnen aanwezig zijn in een enkele CSS-pixel. De details op het scherm worden fijner met meer apparaatpixels.

css pixel versus apparaatpixelOm optimaal gebruik te kunnen maken van de hogere pixeltellingen van het apparaat, moeten de afbeeldingsitems meer details bevatten.

Deze taak is ideaal voor vectorafbeeldingen omdat ze scherpe resultaten kunnen opleveren wanneer weergegeven bij elke resolutie.

Aangezien rasterafbeeldingen een pixel per pixel gebruiken om afbeeldingsgegevens te coderen, zijn ze uitdagender. Dit is terwijl de grootte van rasterbestanden toeneemt naarmate de pixels toenemen.

Schermen met een hoge resolutie hebben dus afbeeldingen met een hoge resolutie nodig om van de voordelen te profiteren. Vectorafbeeldingen zijn het beste voor schermen met een hoge resolutie omdat ze altijd scherpe resultaten opleveren omdat ze onafhankelijk zijn van de resolutie.

Onthoud dat ongeacht de resolutie, de technieken voor beeldoptimalisatie hetzelfde zijn.

Vectorafbeeldingen optimaliseren

Scalable Vector Graphics (SVG) worden door alle moderne browsers ondersteund.

Dit is ideaal voor tweedimensionale afbeeldingen en het formaat is gebaseerd op XML-afbeeldingen. SVG-bestanden kunnen met de hand worden gemaakt met de gewenste teksteditor of met de meeste op vectoren gebaseerde softwaretypen.

Om de grootte van SVG-bestanden te verkleinen, moeten ze worden verkleind. GZIP moet worden gebruikt bij het comprimeren van SVG-bestanden.

Rasterafbeeldingen optimaliseren

Een raster van pixels vormt een rasterafbeelding. De individuele pixels staan ​​op een tweedimensionaal raster. Een reeks van 10.000 pixels vormt bijvoorbeeld een afbeelding van 100 bij 100 pixels. Elke pixel codeert transparantie en kleurinformatie.

raster zwaarRGBA-waarden worden door elke pixel opgeslagen. Deze omvatten:

  • Rood kanaal
  • Blauw kanaal
  • Groen kanaal
  • Alpha (transparantie) kanaal

256 tinten (waarden) worden intern toegewezen door de browser. Per kanaal vertaalt dit zich in acht bits. Per pixel is dit vier bytes. Dit maakt het mogelijk om de bestandsgrootte te berekenen met behulp van de rasterafmetingen. Het duurt niet lang voordat de grootte van het bestand erg groot wordt.

Dus om de grootte van het afbeeldingsbestand te verkleinen, zijn er een paar strategieën:

  • Verminder de bitdiepte van de afbeelding. U kunt dit doen door een kleinere kleurenpallet te gebruiken.
  • Optimaliseer de gegevens die de individuele pixels opslaan.

Hulpmiddelen en parametrering

Er is geen perfecte afbeeldingstool, set optimalisatieparameters of indeling die voor elke afbeelding werkt. De inhoud van de afbeelding en de technische en visuele vereisten bepalen welke u moet gebruiken.

Zodra u een goede instellingenset heeft gevonden, kunt u deze in de toekomst gebruiken voor vergelijkbare afbeeldingen om tijd te besparen. Zorg er echter voor dat u er nooit vanuit gaat dat dezelfde instellingen moeten worden gebruikt om alle afbeeldingen te comprimeren.

Als u meer te weten komt over een paar veelgebruikte tools, kunt u de juiste keuze maken. Deze vier behoren tot de meest gebruikte:

  • Gifsicle: Hiermee kunt u verschillende GIF-afbeeldingen optimaliseren en maken.
  • Optipng: Dit wordt gebruikt om PNG-optimalisatie zonder verlies mogelijk te maken.
  • Jpegtran: Met deze kunt u JPEG-afbeeldingen optimaliseren.
  • Pngquant: Dit wordt gebruikt om PNG-optimalisatie met verlies mogelijk te maken.

Geschaalde beeldactiva leveren

Er zijn twee primaire criteria waarmee u rekening moet houden wanneer u beeldoptimalisatie uitvoert:

  • Het optimaliseren van het totale aantal pixels van een afbeelding.
  • Het optimaliseren van het aantal bytes dat nodig is om elke pixel in een afbeelding te coderen.

beeldformaat boomDe grootte van uw afbeeldingsbestand komt neer op totaal aantal pixels vermenigvuldigd met het totaal aantal bytes dat nodig is voor individuele pixelcodering. Dit is het. Houd hier rekening mee wanneer u werkt aan het bepalen van de optimale grootte voor de afbeeldingsbestanden op uw website.

Daarom is de meest effectieve en gemakkelijke manier om afbeeldingen te optimaliseren, ervoor te zorgen dat u niet meer pixels verzendt die u absoluut nodig hebt om het item in de browser weer te geven op de beoogde grootte.

Zo, vertrouw niet alleen op uw browser om afbeeldingen te herschalen. Hierdoor kunnen ze met een lagere resolutie worden weergegeven. Het gebruikt ook veel extra CPU-bronnen.

Het is over het algemeen niet mogelijk om de exacte weergavegrootte voor elk geleverd item te garanderen. Het is echter belangrijk om ervoor te zorgen dat u alle onnodige pixels tot een minimum beperkt.

Het is ook absoluut noodzakelijk dat u uw grote activa zo dicht mogelijk bij hun weergavegrootte aflevert.

Checklist voor beeldoptimalisatie

Met alle informatie hier kunt u uw afbeeldingen optimaliseren, zodat uw webpagina’s sneller zijn. Je kunt nog steeds prachtige afbeeldingen gebruiken, maar ze veroorzaken geen significante vertraging bij de laadtijden van je pagina.

Dit zal uw bezoekers blij maken en de algehele functie van uw website verbeteren. Houd rekening met de volgende controlelijstpunten wanneer u uw afbeeldingen optimaliseert:

  • Overweeg vectorindelingen omdat ze werken voor apparaten met een hoge resolutie en meerdere apparaten omdat ze schaal- en resolutieonafhankelijk zijn.
  • Alle SVG-middelen moeten worden gecomprimeerd en verkleind. Hierdoor worden de onnodige metagegevens verwijderd.
  • Speel voor rasterformaten met de optimale kwaliteitsinstellingen. Dit kan u een aanzienlijk aantal bytes besparen.
  • Bepaal voor elk item uw functionele vereisten en kies het beste formaat voor rasterafbeeldingen.
  • Automatiseer waar mogelijk om consistente beeldoptimalisatie te garanderen.
  • Serveer geschaalde afbeeldingen zodat de natuurlijke afbeeldingsgrootte en de weergavegrootte zoveel mogelijk op elkaar lijken.

Kortom, beeldoptimalisatie is zowel een wetenschap als een kunst. De algoritmen en technieken die hoog ontwikkeld zijn, dienen als wetenschap.

Het ontbreken van definitieve antwoorden met betrekking tot individuele beeldcompressie is de kunst. Uiteindelijk moet je spelen en experimenteren. Hierdoor kunt u de beste keuze maken voor uw afbeeldingsbestanden en hoe ze bijdragen aan de snelheid van uw webpagina.

Met de stijgende populariteit en verfijning van externe website-bouwers zoals Wix, kunnen ontwerpers gemakkelijk slordig worden, maar gefocust blijven op het ontwikkelen en onderhouden van goede beeldoptimalisatieprocessen, of het nu gaat om het neerhalen van een sjabloon of het helemaal opnieuw bouwen van een site.

Referenties en afbeeldingscredits:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector