Wereldfotodag 2021: beeldoptimalisatie voor WordPress Omdat het vandaag Wereldfotodag is, wilde ik terugkijken op de beginjaren als beginnende webontwikkelaar toen ik voor het eerst begon met het leren van beeldoptimalisatie voor WordPress

Bron

Omdat het vandaag Wereldfotodag is, wilde ik terugkijken op de beginjaren als beginnende webontwikkelaar toen ik voor het eerst begon met het leren van beeldoptimalisatie voor WordPress. Ik bouwde een HTML-website die eindelijk een beetje organisch verkeer van zoekmachines begon te krijgen. Het was een vergelijkende site die mensen hielp goedkopere diensten te vinden. Bezoekers vonden diensten die ze gebruikten of zouden kunnen gebruiken voor een lagere prijs, en ik verdiende een commissie op eventuele verkopen.

Mijn allereerste commissie op die website was $ 110. Ik was verslaafd!

Omdat ik hetzelfde resultaat vaker wilde reproduceren, nam ik contact op met een van de verkoopmanagers om te vragen wat ik kon doen om het verkoopvolume te vergroten. Hij bekeek de webpagina waarop het aanbod stond en stelde voor een knop toe te voegen in plaats van een tekstlink. “Mensen houden ervan om op knoppen te klikken”, zei hij.

Hij had gelijk.

Ik heb een eenvoudige HTML-knopafbeelding gemaakt en deze geplaatst waar de originele tekstlink was. De omzet is inderdaad gestegen. Er ging een lampje branden in mijn hoofd en het huwelijk van webontwikkeling, marketing en optimalisatie in al mijn toekomstige ontwikkelingsprojecten volgde.
Beeldoptimalisatie voor WordPress

Koppelverkoop in beeldoptimalisatie voor WordPress

Dus nu vraag je je waarschijnlijk af waarom ik het heb over webontwikkeling en marketing terwijl dit artikel gaat over het optimaliseren van afbeeldingen voor WordPress. Het korte antwoord is omdat het allemaal met elkaar verbonden is. Ik heb mijn eerste webpagina-knop gemaakt met een afbeelding met HTML-opmaak.

Ik zou later ontdekken dat ik knoppen kon maken met afbeeldingen als achtergrond met CSS die iets sneller laadde. Ik zou uiteindelijk leren hoe ik een knop kon maken met alleen CSS die een stuk sneller laadde.

Waarom wilde ik dat knoppen sneller laadden? Het waren niet alleen knoppen, het was alles.

Als de website die ik bouwde sneller laadde en esthetisch aantrekkelijk was, deed hij het beter in de zoekresultaten. Als de website beter deed in de zoekresultaten, maakte ik meer verkopen. Websitesnelheid is al zo lang als ik me kan herinneren een rangordefactor, hoewel het pas echt op grote schaal is besproken in de afgelopen jaren toen Google het probleem begon te pushen.

Ik zal daar hier niet op ingaan, maar het punt is om een competitieve website te zijn en de pagina’s moeten snel laden.

Website-afbeeldingen hebben invloed op de prestaties van een website, zowel wat betreft de laadsnelheid van de pagina als de conversie van bezoekers .

Dat alles brengt me tot dit: beeldoptimalisatie voor WordPress is belangrijk. Het is belangrijk, want wanneer de typische bezoeker naar een website gaat, is de kans veel groter dat hij blijft hangen als de website snel genoeg laadt en als ze het leuk vinden wat ze zien. Ik heb verschillende onderzoeken gezien die suggereren dat de aandachtsspanne van een typische internetgebruiker ergens tussen de 2,5 en 8 seconden is. Ongeveer dat van een vlo eigenlijk, en ze kunnen er net zo snel vanaf springen!

De exacte hoeveelheid tijd maakt niet zoveel uit als het concept.

Er zijn maar een paar korte seconden om de bezoeker te laten zien wat er getoond moet worden en ze zouden het maar beter leuk vinden of ze gaan sneller op de terug-knop drukken dan een toupet in een orkaan.

Dit gedrag kan een negatieve invloed hebben op SEO-inspanningen (zoekmachineoptimalisatie), omdat het resulteert in hogere bouncepercentages. Hoge bouncepercentages kunnen de positie van een pagina in de zoekresultaten van zoekmachines verlagen. Het heeft ook een negatief effect op de conversie.

Omgekeerd, als een bezoeker niet lang hoeft te wachten op het laden van een pagina, het leuk vindt wat hij ziet en doorklikt naar de volgende stap of enige tijd op de pagina doorbrengt, kan dit een positief effect hebben op SEO-inspanningen.

Bezoekers van zoekmachines die niet meteen terugklikken, helpen het bouncepercentage te verlagen. Minder bounces kunnen resulteren in hogere posities voor een pagina in de zoekresultaten. Een laag bouncepercentage vergroot de kans op betere conversiepercentages voor verkopen, nieuwsbriefaanmeldingen, abonnementen, etc.

Blogafbeeldingen, portfolioafbeeldingen, productafbeeldingen, themaafbeeldingen, plug-inafbeeldingen, ze hebben allemaal een impact op de laadtijd, esthetiek en het resultaat van het bezoek – de impact op de conversie.

Afbeeldingen hebben ook een grote impact op de opslagruimte van uw server. Als u een limiet heeft op de opslagruimte in uw hostingpakket, kunnen afbeeldingen die ruimte snel opslokken, zelfs als ze goed zijn geoptimaliseerd. Door de bestandsgrootte van de afbeelding klein te houden, kan een deel van die ruimte worden vrijgemaakt.

Dus, hoe optimaliseren we onze afbeeldingen voor het web, en specifiek voor WordPress? Hier is een overzicht van de onderwerpen die in dit artikel worden besproken:

  1. Afbeeldingstypen ondersteund door WordPress
  2. Populaire desktop-applicaties voor het werken met afbeeldingen
  3. Websites om met afbeeldingen te werken
  4. Tips voor het optimaliseren van afbeeldingen voor WordPress voordat ze worden geüpload
    -Afbeeldingen zo aanpassen dat ze het beste passen bij de HTML-containers van een WordPress-thema
    –Beeldoptimalisatie in relatie tot HTML-attributen
  5. Plugins gebruiken voor bulkoptimalisatie van afbeeldingen

Afbeeldingsformaten ondersteund door WordPress

Afhankelijk van uw hostingomgeving kan uw server honderden verschillende afbeeldingsbestandstypen ondersteunen. WordPress staat standaard het uploaden van afbeeldingen toe met .jpg, .jpeg, .png, .gif, .ico en vanaf juli 2021 .webp afbeeldingsbestandsextensies. Hoewel elk van deze bestandstypen kan en moet worden geoptimaliseerd voor WordPress, is WebP bijzonder opmerkelijk .

WebP is een beeldformaat dat is ontwikkeld door Google, die, tenzij je de afgelopen tien jaar onder een steen hebt geleefd, geobsedeerd is door snelheid. Dat is geen slechte zaak. Het WebP-beeldformaat is ontworpen om afbeeldingen te leveren met een kleinere bestandsgrootte dan .jpg, .png en .gif met behoud van de visuele kwaliteit.

WebP werd voor het eerst aangekondigd in september 2010, maar wijdverbreid gebruik is pas de laatste jaren ingevoerd. Het duurde even voordat moderne browsers hun achterstand inhaalden, maar tegenwoordig ondersteunt meer dan 90% van de webbrowsers WebP. Toch wordt het formaat nog niet 100% ondersteund, maar er zijn enkele tijdelijke oplossingen die ik later in het artikel zal bespreken.

De reden dat ik zoveel nadruk leg op WebP is omdat .jpg-, .png- en .gif-afbeeldingen kunnen worden geconverteerd naar WebP.

Wanneer u dit doet, krijgt u ofwel een betere visuele kwaliteit voor dezelfde bestandsgrootte, of dezelfde visuele kwaliteit als het origineel bij een kleinere bestandsgrootte. WebP ondersteunt ook transparantie en animatie voor uw .png- en .gif-bestanden.

Zoals eerder vermeld ondersteunt WordPress nu het uploaden van .webp-bestandsextensies vanaf versie 5.8. Meer dan 42% van de websites gebruikt WordPress. Dat zijn bijna 500 miljoen websites. Met Google die WebP pusht, WordPress die WebP ondersteunt en website-eigenaren die strijden om topposities in zoekresultaten, kun je een enorme toename van het gebruik op internet verwachten. Dit is een goed moment om WebP-afbeeldingsindelingen op te nemen in uw workflow voor webontwikkeling.

Afbeeldingen optimaliseren voor WordPress met desktopapplicaties

Photoshop is al lang de standaard voor fotobewerking. Naast het bewerken van foto’s werkt Photoshop uitstekend voor afbeeldingen die op internet worden gebruikt, zowel wat betreft creatie als bewerking. Grafisch ontwerpers gebruiken Adobe Illustrator veel vaker als het gaat om het maken van afbeeldingen voor doeleinden waar ik hier niet op in zal gaan. Dit is gewoon een inleiding over het optimaliseren van afbeeldingen met Photoshop voor gebruik op internet.

Beeldoptimalisatie voor WordPress Photoshop Good ol’ PhotoShop is een geweldige tool voor beeldoptimalisatie voor WordPress. Een afbeelding openen in Photoshop

  1. Klik met Photoshop geopend op Bestand in de linkerbovenhoek en klik vervolgens op openen.
  2. Blader door de mappen van uw computer naar de afbeelding of foto die u wilt bewerken en klik erop.

PhotoShop-afbeelding openen Ga aan de slag met beeldoptimalisatie voor WordPress door het bestand te openen. Het formaat van een afbeelding wijzigen in Photoshop

  1. Klik met de afbeelding open op Afbeelding in het bovenste menu en klik vervolgens op Afbeeldingsgrootte…
  2. Wijzig de breedte en hoogte in de daarvoor bestemde velden (in Pixels ) en klik vervolgens op OK

Het formaat van afbeeldingen wijzigen in Photoshop Grootte is een belangrijke overweging bij beeldoptimalisatie voor WordPress. Optimaliseer en bewaar een afbeelding voor het web in Photoshop

  1. Klik in het bovenste menu op Bestand en klik vervolgens op Opslaan voor web…
  2. Kies uw bestandstype en kwaliteitsopties en klik vervolgens op Opslaan…

Afbeeldingen opslaan voor internet Sla de afbeelding op in een indeling die is geoptimaliseerd voor weergave op internet.

Over het optimaal opslaan van een afbeelding in Photoshop wil ik nog even een paar zaken aan de orde stellen. Let op het menu Metadata:. Als Geen is geselecteerd, worden alle metagegevens uit de afbeelding verwijderd en worden wat meer gegevens opgeslagen in de bestandsgrootte van de afbeeldingen.

Als uw afbeelding geen transparantie heeft en niet geanimeerd is, zal het opslaan als JPEG resulteren in de kleinste bestandsgrootte in vergelijking met dezelfde afbeelding in PNG- of GIF- indeling.

Standaard stel ik de beeldkwaliteit graag in op 60, wat de laagste “hoge” instelling is voor JPEG-afbeeldingen. Zorg er ook voor dat het vakje Geoptimaliseerd is aangevinkt en Kleurprofiel insluiten uitgeschakeld voordat u opslaat. Experimenteer om te zien welke kwaliteitsinstellingen u de mooiste afbeeldingen geven voor de kleinste bestandsgrootte.

WebP wordt qua bestandsgrootte een meer optimaal formaat dan JPEG, PNG of GIF, maar Photoshop ondersteunt het openen of opslaan van afbeeldingsbestanden in WebP-formaat niet. Om JPEG, PNG en GIF als WebP in Photoshop op te slaan, heeft u een plug-in nodig.

Gelukkig kun je WebPShop van Google Developers gebruiken om dit in Photoshop te bereiken. WebP-afbeeldingen behouden de transparantie in PNG- en GIF-indelingen en animaties in GIF met een kleinere bestandsgrootte dan PNG- of GIF-indelingen.

Photoshop is een beetje prijzig. Er zijn andere desktop-applicaties die kunnen worden gebruikt voor het verkleinen en optimaliseren van afbeeldingen, en sommige kosten geen cent. Gimp is een open-source afbeeldingseditor die sinds 1998 is ontwikkeld en onderhouden!

Omdat het al zo lang bestaat en het feit dat het gratis is, maakt het behoorlijk populair. Als je de weg kent in Photoshop, zou je Gimp vrij gemakkelijk moeten kunnen leren kennen. Als je nieuw bent bij Gimp, zijn er veel artikelen, video’s en tutorials die je online kunt vinden om je op weg te helpen. Even terzijde, Gimp ondersteunt het opslaan van WebP-afbeeldingen door middel van export in plaats van opslaan of opslaan als.

Beeldoptimalisatie voor WordPress met Gimp Gimp is een geweldige tool voor beeldoptimalisatie voor WordPress.

Er zijn een paar andere fatsoenlijke beeld- en foto-editors, maar naar mijn mening zijn deze twee de beste. Een betaalde en een gratis. Kies maar.

Websites om met afbeeldingen te werken

Er lijkt geen einde te komen aan het aantal websites online dat manieren biedt om afbeeldingen in een of andere vorm te bewerken. Zelfs met WordPress kun je het formaat van afbeeldingen wijzigen en bijsnijden in de standaardeditor. Persoonlijk vermijd ik de meeste online afbeeldingseditors, omdat sommige een beetje vaag lijken. Daarnaast zijn de meeste vrij beperkt.

Ik laat het aan jou over om een online afbeeldingseditor te vinden die je leuk vindt. Ik heb maar één aanbeveling. Fotoerwt .

Iedereen die vertrouwd is met Photoshop zal zich meteen thuis voelen bij Photopea. De interface en menu-opties lijken erg op elkaar. Bovendien ondersteunt Photopea het openen van WebP-bestanden en het exporteren van bestanden als WebP.

Alle stappen die ik eerder noemde voor het openen, vergroten of verkleinen en optimaliseren van afbeeldingen voor Photoshop zijn bijna hetzelfde in Photopea.

Het belangrijkste verschil is dat u uw voltooide bestanden exporteert in plaats van op te slaan. Omdat het webgebaseerd is, uploadt u, zoals in de meeste gevallen, ook afbeeldingen die u wilt bewerken en downloaden wanneer u klaar bent met exporteren.

Photopea gebruiken voor afbeeldingen De website Photopea is een goede optie als je liever niet voor apps betaalt.

Photopea is gratis te gebruiken en bevat alle functies die bij een premium-abonnement horen, waardoor advertenties worden verwijderd en u meer stappen in de bewerkingsgeschiedenis krijgt. De gratis versie zou goed genoeg moeten zijn om het formaat te wijzigen en te converteren.

Tips voor het optimaliseren van afbeeldingen voor WordPress voordat ze worden geüpload

Een van de eerste dingen waar ik graag aan denk bij het optimaliseren van afbeeldingen voor WordPress, zijn de afmetingen van de HTML- en CSS-containers waarin ze zullen worden gebruikt. Idealiter zouden de afmetingen van een afbeelding overeenkomen met de afmetingen van de grootste container.

Meestal is de grootste container voor een blogpost een uitgelichte afbeelding die vaak vóór de eigenlijke post (bovenaan) wordt weergegeven.

Een WooCommerce-productafbeelding is een beetje anders, aangezien bij het bekijken van een productpagina de oorspronkelijke afbeelding van het aanbevolen product al is verkleind om in de container te passen als de afbeelding groter is dan de afbeeldingscontainer van het aanbevolen product.

Wanneer op de afbeelding van het uitgelichte product wordt geklikt of soms met de muis over de afbeelding wordt geklikt, wordt de afbeelding op volledige grootte weergegeven. Idealiter zou de afbeelding 2 tot 3 keer de afmetingen van de afgebeelde productcontainer zijn, zodat de afbeelding gracieus kan worden opgeschaald/verkleind.

Ik noemde deze twee scenario’s omdat zelfs bij het werken met aangepaste berichttypen de twee concepten hier waarschijnlijk van toepassing zijn.

Zoek voor aanbevolen blogpostafbeeldingen de breedte van de container die de afbeeldingsbreedte zou moeten bepalen. Bepaal een hoogte voor die afbeeldingen. Geef je de voorkeur aan portret- of landschapsmodus? Verklein de afbeelding in uw foto-editor naar die afmetingen, optimaliseer, sla op en upload naar WordPress.

Zoek voor een uitgelichte afbeelding van WooCommerce de afmetingen van de container met de aanbevolen productafbeelding en vermenigvuldig de breedte met twee of drie. Bepaal een hoogte voor al uw productafbeeldingen en pas het formaat van de afbeeldingen in de afbeeldingseditor dienovereenkomstig aan.

Grootte van afbeeldingen aanpassen aan de HTML-containers van een WordPress-thema

In Firefox, Microsoft Edge en Google Chrome kunt u de afmetingen van een HTML-container krijgen door met de rechtermuisknop te klikken op het gedeelte van de pagina waarvoor u een dimensie wilt hebben en vervolgens op Inspecteren te klikken. Beweeg uw cursor over de HTML die wordt weergegeven totdat de sectie die u zoekt als overlay (verduisterd) in de browser wordt weergegeven.

U ziet knopinfo met het element, ID/klassen gevolgd door de containerdimensies.

In de onderstaande afbeelding ziet u dat de knopinfo de tag <figure> (onze container) weergeeft met de afmetingen 948,01 x 533,25. Als je daar net onder kijkt, zie je de daadwerkelijke HTML-tag voor de afbeelding die de werkelijke afmetingen van de afbeelding toont als width=2560 en height=1440.

Afbeeldingscontainers aanpassen Vergeet afbeeldingscontainers niet wanneer u afbeeldingen voor WordPress optimaliseert.

Wanneer de browser de afbeelding op volledige grootte (2560 × 1440) weergeeft, wordt deze aangepast aan de container (948.01 × 533.25). Omdat de containerbreedte in dit geval slechts 948 pixels is, zal er nooit een reden zijn om een afbeelding te hebben met een breedte van meer dan 948 pixels. Alles wat verder gaat, is slechts extra gegevens waarop bezoekers moeten wachten om te worden gedownload.

Laat ze niet wachten. Pas het formaat van afbeeldingen aan in de afbeeldingseditor voordat u ze uploadt naar WordPress.

Hoe kleiner de afmetingen van een afbeelding, hoe kleiner de totale bestandsgrootte in termen van gegevens, dus het is een goede gewoonte om afbeeldingen te verkleinen tot alleen de maximale afmetingen die nodig zijn om de container te vullen.

Als u in dit voorbeeld van de liggende modus voor afbeeldingen houdt, zou 948 × 534 een acceptabele conventie zijn om u aan te houden voor aanbevolen blogpostafbeeldingen. De hoogte is echt aan jou. Portret, landschap, het maakt niet uit. Het belangrijkste is om de afmetingen redelijk te houden, zodat de downloadtijd redelijk snel kan zijn. Ik hou het graag uniform, want dan ziet alles er gewoon netjes en opgeruimd uit.

Beeldoptimalisatie in relatie tot HTML-attributen

Telkens wanneer een afbeelding wordt toegevoegd aan of geopend vanuit de WordPress-mediagalerij, zijn er velden beschikbaar voor de ALT- en titelkenmerken van de afbeelding. Deze kunnen tijdens de eerste upload of op een later tijdstip worden bewerkt.

HTML-kenmerken voor afbeeldingen HTML-attributen zijn een belangrijke factor bij het optimaliseren van afbeeldingen voor WordPress.

Standaard voegt WordPress attributen toe aan <img>-tags in de HTML van een webpagina. Je kunt je SEO-spel een beetje opkrikken door goed geoptimaliseerde ALT-tekst te schrijven. Het ALT-attribuut werkt op dezelfde manier als de titel van een pagina in termen van zoeken. Het vertelt de zoekmachine wat de afbeelding is. Het ALT-attribuut wordt ook gebruikt door schermlezers, dus met goede ALT-tekst zijn afbeeldingen toegankelijker voor slechtzienden, waardoor bezoekers langer op de pagina blijven.

Probeer de focuszoekwoorden van de pagina op te nemen in de ALT-tekst. Zorg ervoor dat het logisch is en de afbeelding daadwerkelijk correct weergeeft.

Het titelkenmerk wordt weergegeven op de bijlagepagina van de afbeelding (indien ingeschakeld) als de titel van die pagina via de H1-tag. Dat gezegd hebbende, is het een goed idee om het titelkenmerk in termen van SEO-optimalisatie op dezelfde manier te beschouwen als een paginatitel. Dat is als u de bijlagepagina’s kunt gebruiken.

Als u een SEO-plug-in zoals Yoast gebruikt, kunt u eenvoudig al deze bijlagepagina’s omleiden naar de daadwerkelijke afbeelding. Yoast stelt dat ze deze functie beschikbaar maken en aanbevelen omdat deze bijlagepagina’s vaak over het hoofd worden gezien door ontwikkelaars en weinig tot geen SEO-waarde hebben. Ik ben geneigd het ermee eens te zijn.

Het is vermeldenswaard dat er andere velden beschikbaar zijn onder de velden ALT en Titel, maar die hebben weinig te maken met optimaliseren, dus ik zal ze hier niet bespreken.

Plugins gebruiken voor afbeeldingen in bulk..