Wilt u afbeeldingen uploaden naar uw WordPress-site, maar weet u niet zeker welke formaten of bestandstypen de afbeeldingen moeten hebben? Bent u niet bekend met het proces van het verkleinen en comprimeren van afbeeldingen voor internet? In dit artikel leg ik uit waarom het gebruik van de juiste afbeeldingsgrootte belangrijk is voor uw website, en laat ik u zien hoe u uw afbeeldingen kunt verkleinen en comprimeren met behulp van de gratis foto-editor GIMP.

Waarom het formaat van de afbeeldingen van uw website belangrijk is

Laten we beginnen met waarom het formaat van de afbeeldingen van uw website zo belangrijk is.

Think WordPress.org, speelt de algehele "fysieke grootte" van een afbeelding een grote rol in de prestaties van een webpagina. “Bestandsgrootte [van een afbeelding] bepaalt de tijd die nodig is om uw pagina te laden; hoe groter de bestandsgrootte… hoe langer het duurt om [een pagina] te laden.” Met andere woorden, het uploaden van een grote bestandsgrootte naar uw website vertraagt ​​de prestaties van de pagina waaraan u de inhoud toevoegt, en wordt meestal weergegeven als langzamere laadsnelheden van de pagina's in de analysegegevens van uw site.

“Bestandsgrootte [van een afbeelding] bepaalt de tijd die nodig is om uw pagina te laden; hoe groter de bestandsgrootte… hoe langer het duurt om [een pagina] te laden.”

-WordPress.org

Laadsnelheid van pagina's, ook wel eenvoudigweg "page speed," is "hoe snel de inhoud op uw pagina wordt geladen", volgens de SEO-site Moz. Het hebben van tragere pagina's kan resulteren in hogere "bouncepercentages', wat een mooie statistiek is die sessies weergeeft waarbij een sitebezoeker uw site verlaat na het bekijken van een enkele pagina. Langzamere pagina's kunnen ook de hoeveelheid tijd die bezoekers op de pagina's van uw site doorbrengen, verminderen, omdat mensen ongeduldig kunnen worden door te wachten tot de inhoud van een pagina wordt geladen en uw site sneller verlaat.

Deze statistieken zijn belangrijk omdat u doorgaans wilt dat gebruikers meer tijd op uw site doorbrengen en meer pagina's op uw site bekijken.

Ze zijn ook belangrijk omdat ze een rol spelen in hoe uw site scoort op pagina's met zoekresultaten van zoekmachines, of 'SERP's'. SERPs zijn gewoon de resultatenpagina's die worden weergegeven wanneer u een woord of zin in Google typt en op de Enter-toets drukt. Omdat grotere afbeeldingen wijzen op slechte praktijken op het gebied van webontwerp en een negatieve invloed hebben op de gebruikerservaring op uw site, kunnen zoekmachines zoals Google bestraffen uw site voor het hebben van deze grotere afbeeldingen en rangschik uw website onder andere websites die beter presteren.

Hoe lager uw website bijvoorbeeld op Google scoort, hoe minder verkeer uw site krijgt en hoe meer verkeer naar uw concurrenten gaat die boven u staan ​​in de zoekresultaten.

Door de bestandsgrootte van uw afbeeldingen op uw website te verkleinen, kunt u uw page speed en zo andere statistieken te verbeteren, zoals: bouncepercentage en tijd op paginae om uiteindelijk uw positie in zoekmachines te verbeteren.

Houd er rekening mee dat er veel andere belangrijke variabelen zijn die in zoekrangschikkingen worden gebruikt, dus het corrigeren van uw afbeeldingen is slechts een deel van een solide SEO (Zoekmachineoptimalisatie) strategie. Het is echter zeker erg belangrijk om uw site hoger te laten scoren op plaatsen zoals Google om het verkeer naar uw site te vergroten.

Het formaat van afbeeldingen voor WordPress wijzigen in GIMP

Dus hoe pas je het formaat van afbeeldingen voor WordPress op de juiste manier aan?

U kunt de bestandsgrootte van een afbeelding eenvoudig verkleinen door de algehele grootte van de afbeelding te verkleinen met scaling en bijsnijden voordat u het naar uw website uploadt. Bovendien kunt u toepassen wat "samendrukking” toe aan uw afbeelding om de grootte verder te verkleinen.

GIMP, de gratis en open source foto-editor, kan al deze taken uitvoeren en tegelijkertijd exporteren naar aanbevolen "next-gen" bestandsindelingen om de bestandsgrootte van uw afbeeldingen verder te verkleinen en de prestaties van uw site te verbeteren.

Schaal uw afbeelding

Om met dit proces aan de slag te gaan, opent u de afbeelding die u naar uw site wilt uploaden in GIMP. U kunt dit doen door uw afbeelding van uw computer naar het afbeeldingsvenster van GIMP te slepen en neer te zetten, of u kunt eenvoudig naar Bestand> Openen in GIMP gaan.

Als u de methode Bestand>Open gebruikt, navigeert u naar de locatie van de afbeelding op uw computer vanuit het dialoogvenster "Afbeelding openen" dat verschijnt en dubbelklikt u op het afbeeldingsbestand zodra u het hebt gevonden om het in GIMP te openen (of klik op de knop "Openen" in de rechterbenedenhoek van het dialoogvenster).

Helemaal bovenaan het GIMP-venster bevindt zich een functie die de "Titelbalk" wordt genoemd (rode pijl in de afbeelding hierboven). Hier ziet u de huidige afmetingen van uw afbeelding (vergroot groen vak op de foto). Mijn afbeelding is 1920×1280 – met het eerste getal, 1920, dat de breedte van mijn afbeelding (in pixels) vertegenwoordigt, en het tweede getal, 1280, dat de hoogte van mijn afbeelding vertegenwoordigt. De uiteindelijke afmetingen van de afbeelding die u voor uw afbeelding wilt gebruiken, zijn afhankelijk van waar in WordPress u de afbeelding wilt gebruiken en van welk thema u gebruikt.

Voor deze zelfstudie verander ik het formaat van mijn afbeelding naar de standaard 1200 × 630 pixels die wordt aanbevolen voor blogpostafbeeldingen.

Met dit in gedachten, is het eerste wat ik wil doen mijn afbeelding bijsnijden zodat de beeldverhouding van mijn originele afbeelding overeenkomt met de beeldverhouding van de aanbevolen grootte. Om dit te doen, pak ik mijn bijsnijdgereedschap door op shift + c op mijn toetsenbord te drukken of door op het gereedschapspictogram voor bijsnijden in de GIMP-toolbox te klikken (rode pijl in de afbeelding hierboven).

Vervolgens vink ik in de gereedschapsopties voor deze tool het vakje naast 'Vast' (groene pijl) aan en klik ik op de vervolgkeuzelijst om 'Beeldverhouding' (blauwe pijl) te selecteren.

Ik typ "1200:630" om mijn beeldverhouding in te stellen in het tekstveld onder de vervolgkeuzelijst (gele pijl). Dit komt overeen met de beeldverhouding van de aanbevolen afbeeldingsgrootte die ik wil dat mijn uiteindelijke afbeelding is.

Met behulp van het bijsnijdgereedschap klik en sleep ik nu met mijn muis over de afbeelding om het bijsnijdgebied te tekenen. Wanneer ik mijn muis loslaat, wordt alles buiten het bijsnijdgebied gedimd (rode pijl in de afbeelding hierboven - ervan uitgaande dat "Markeren" is aangevinkt in de gereedschapsopties, wat meestal standaard is).

Standaard heeft mijn bijsnijdgebied de hulplijnen ingesteld als "Middenlijnen" (gele pijl in de afbeelding hierboven). Ik kan deze instelling wijzigen met behulp van de vervolgkeuzelijst met hulplijnen onder aan de gereedschapsopties. Ik zal bijvoorbeeld mijn handleidingen wijzigen in "Rule of Thirds" (groene pijl). De verschillende gidsopties hier zijn gebaseerd op fotografieprincipes, waardoor het gemakkelijk is om je compositie aan de hand van deze principes te kaderen.

U kunt met uw muis over een van de zijkanten of hoeken van het bijsnijdgebied bewegen (dwz het gemarkeerde gebied dat wordt aangegeven door de rode pijl in de afbeelding hierboven), en vervolgens klikken en slepen om het formaat van de grens van het bijsnijdgebied te wijzigen. Houd er rekening mee dat u altijd de grootte van uw bijsnijdgebied kunt zien in de velden "Grootte" in de gereedschapsopties (in de afbeelding hierboven groen weergegeven). U wilt de totale grootte van het bijsnijdgebied groter houden dan het uiteindelijke formaat van 1200 × 630 van de afbeelding.

U kunt ook met uw muis in het midden van het bijsnijdgebied (rode pijl) klikken en slepen om het bijsnijden op de afbeelding te verplaatsen.

Zodra u klaar bent om de afbeelding bij te snijden, klikt u eenmaal in het bijsnijdgebied en uw afbeelding wordt bijgesneden.

Houd er rekening mee dat als de optie "Bijgesneden pixels verwijderen" in de gereedschapsopties is uitgeschakeld (groene pijl in de afbeelding hierboven), uw oorspronkelijke afbeeldingsgrens nog steeds rond uw afbeelding wordt weergegeven via een gele stippellijn (rode pijl). U kunt de originele afbeelding herstellen, waardoor het bijsnijden ongedaan wordt gemaakt, door naar Afbeelding> Canvas aanpassen aan lagen te gaan. Alleen het gebied van uw afbeelding binnen de canvasgrens wordt geëxporteerd.

Onze afbeelding is nu bijgesneden tot de beeldverhouding die we willen, maar als je nogmaals naar onze afbeeldingsdimensies in de "Titelbalk" kijkt, zie je dat de afbeelding 1532×804 is (in groen omlijnd en vergroot in de bovenstaande foto – uw afmetingen zullen waarschijnlijk iets anders zijn, afhankelijk van hoe groot u uw bijsnijdgebied op uw afbeelding hebt getekend). We moeten nu onze afbeelding schalen zodat deze overeenkomt met onze gewenste afmetingen.

Ga hiervoor naar Afbeelding> Afbeelding schalen (rode pijl).

Zorg ervoor dat in het vak 'Afbeelding schalen' dat verschijnt, onder 'Afbeeldingsgrootte', het kettingschakelpictogram naast de vakken 'breedte' en 'hoogte' is gekoppeld (rode pijl in de bovenstaande foto). Wijzig vervolgens de "Breedte" van uw afbeelding in 1200 (groene pijl). Druk op de tab-toets. De hoogte van de afbeelding wordt automatisch bijgewerkt naar "630". Zorg ervoor dat onder "Kwaliteit" de vervolgkeuzelijst "Interpolatie" (blauwe pijl) is ingesteld op "NoHalo" of "LoHalo" voor de beste beeldkwaliteit na het schalen. (Voor meer informatie over interpolatie, bekijk mijn tutorial over het onderwerp).

Druk op de knop "Schalen" om uw afbeelding te schalen (gele pijl).

Zodra het schalen is voltooid, bekijkt u de afmetingen van de afbeelding in de titelbalk. Je zou nu een afbeeldingsgrootte van 1200×630 moeten zien - de exacte grootte die we willen! Dus wat gaan we nu doen?

Comprimeer uw afbeelding door te exporteren naar WebP

Het bijsnijden en schalen van de afbeelding verkleinde de bestandsgrootte door de hoogte van de afbeelding te verkleinen van 1920 naar 1200 pixels en de breedte van 1280 naar 630 pixels, maar we kunnen de afbeeldingsgrootte nog verder verkleinen door compressie toe te passen wanneer we de afbeelding exporteren.  

We moeten de afbeelding nu dus exporteren naar een bestandsindeling die compressie op de afbeelding toepast zonder de kwaliteit van de afbeelding merkbaar te verminderen. Hoewel JPEG's altijd een goede optie zijn, is er nu een nog betere optie beschikbaar: WebP.

Het WebP-formaat past meer compressie toe dan JPEG, terwijl het de kwaliteit van de afbeelding minder beïnvloedt dan een JPEG. Met andere woorden, u krijgt een beter uitziende afbeelding met een kleinere bestandsgrootte. Bovendien worden WebP-formaten ondersteund door alle top 5 webbrowsers.

Om naar WebP te exporteren, gaat u naar Bestand>Exporteren als (rode pijl).

Klik op een van de mappen in het gedeelte 'Plaatsen' (groen aangegeven) om de afbeelding op uw computer te kiezen waar u uw afbeelding wilt opslaan. U kunt eenvoudig op een map dubbelklikken om deze te openen en naast de titel "Opslaan in map" (rode pijl) zien in welke map u zich bevindt. Hernoem vervolgens uw afbeelding naar wat u maar wilt - zorg ervoor dat u uw afbeeldingsnaam afsluit met de extensie ".webp" (blauwe pijl) om de afbeelding in het WebP-formaat te exporteren. Als u klaar bent, klikt u op "Exporteren" in de rechterbenedenhoek van het venster (gele pijl).

Vervolgens verschijnt het dialoogvenster "Afbeelding exporteren als WebP". Zorg ervoor dat "Lossless" niet is aangevinkt (rode pijl). Ik stel de "Beeldkwaliteit" meestal in op 80 (blauwe pijl - dit is een percentage, dus hoe lager het percentage, hoe lager de kwaliteit van de afbeelding, maar hoe kleiner de bestandsgrootte van de afbeelding). Als uw afbeelding geen transparantie bevat (dwz een logo zonder achtergrond), hoeft u zich geen zorgen te maken over de schuifregelaar "Alfakwaliteit" (in feite, in een experiment dat ik heb uitgevoerd, werd de alfakwaliteit van 100 naar 90 eigenlijk iets verlaagd de bestandsgrootte van een afbeelding met een transparante achtergrond vergroot van 8.50 kb naar 8.52 kb). De vervolgkeuzelijst 'Brontype' kunt u instellen op 'Standaard'.

Of u al dan niet een van de metadata-opties wilt aan- of uitvinken, inclusief Exif-gegevens, ITPC-gegevens en XMP-gegevens, is aan u. Exif- en XMP-gegevens zijn metagegevens die doorgaans door uw camera worden toegewezen en die informatie over uw foto beschrijven, zoals welk model camera is gebruikt of welk type lens is gebruikt. ITPC daarentegen wordt gebruikt door leden van de pers en wijst informatie toe aan uw afbeelding, zoals eigendom, rechten en licenties. Als u niet zeker weet wat u moet doen, laat u deze opties aangevinkt.

Evenzo is het prima om de optie "Kleurprofiel opslaan" uitgeschakeld te laten, omdat de meeste browsers automatisch de sRGB-kleurruimte gebruiken om uw afbeelding weer te geven, wat GIMP gebruikt. Als je een ander kleurprofiel gebruikt, laat dit dan aangevinkt. Als u zich zorgen maakt dat de afbeelding niet correct wordt weergegeven voor bepaalde browsers, voegt u deze aangevinkt slechts een paar kb toe aan de totale afbeeldingsgrootte.

Ten slotte kan de optie "Miniatuur opslaan" uitgeschakeld blijven, wat ons nog wat kilobytes zal besparen.

Klik op "Exporteren" (gele pijl in de afbeelding hierboven) om de afbeelding naar het WebP-formaat te exporteren. Wanneer het geëxporteerde WebP-bestand wordt vergeleken met een JPEG-bestand van dezelfde grootte en waarvan de kwaliteit ook is ingesteld op "80", komt de WebP-afbeelding uit op ongeveer 30 kb, of ongeveer 25%, kleiner dan de JPEG.

U kunt nu inloggen op uw WordPress-site en naar de pagina of het bericht navigeren waar u uw afbeelding wilt uploaden, of u kunt eenvoudig naar het gedeelte "Media" navigeren met behulp van de hoofdnavigatie en uw afbeelding naar de mediabibliotheek slepen en neerzetten. In mijn geval navigeer ik naar "Posten" met behulp van de hoofdnavigatie (rode pijl in de afbeelding hierboven) en klik ik op "Blogpost 1" (blauwe pijl) om die blogpost te bewerken.

Ik open dan de zijbalk voor berichtinstellingen (rode pijl) en scrol omlaag naar het gedeelte 'Aanbevolen afbeelding' en vouw dit gedeelte uit (blauwe pijl). Vervolgens klik ik op de afbeelding om deze te vervangen door mijn nieuwe afbeelding.

Ik ga naar het tabblad "Bestanden uploaden" (rode pijl) en kan mijn afbeelding van mijn computer naar WordPress slepen en neerzetten (blauwe pijlen).

Ten slotte klik ik op "Uitgelichte afbeelding instellen" om deze wijziging toe te passen (rode pijl).

Klik op "Bijwerken" (rode pijl) om uw pagina bij te werken met de nieuwe uitgelichte afbeelding.

Als ik op "Bekijk bericht" klik (blauwe pijl)...

... je ziet nu de nieuwe uitgelichte afbeelding bovenaan mijn blog.

Dat was het voor deze tutorial! Als je meer wilt weten over het ontwerpen van een WordPress-website, raad ik je aan om mijn WordPress 6.0 voor niet-codeerders cursus! Of, als je meer wilt weten over GIMP, bekijk dan mijn GIMP 2.10 Masterclass op Udemy!   

Abonneer u op de DMD-nieuwsbrief

Abonneer u op de DMD-nieuwsbrief

Meld u aan om nieuwe tutorials, cursusupdates en het laatste nieuws over uw favoriete open source-software te ontvangen!

Je bent met succes geabboneerd!

Pin It op Pinterest