Optimaliseer uw afbeeldingen met vooraf gedefinieerde afbeeldingsformaten [WordPress-tip]

Het optimaliseren van afbeeldingen op een website is een hele klus. U kunt ervoor kiezen om minder afbeeldingen, gecomprimeerde afbeeldingen, sprites of svg te gebruiken; de lijst gaat verder. Een plaats waar veel WordPress-sites worden onderbroken, is het definiëren van afbeeldingsformaten, wat een cruciaal aspect voor het optimaliseren van inhoudzware sites.

Beeldformaten zijn van vitaal belang omdat afbeeldingen automatisch worden gemaakt volgens de opgegeven afmetingen bij het uploaden van afbeeldingen. Dit zorgt ervoor dat, zelfs als je een 3000px breed origineel beeld hebt, het nooit wordt gebruikt als een afbeelding van 600px voldoende is. Idealiter zou een 600px brede ruimte een 600px breedbeeld moeten gebruiken in plaats van een groter beeld kleiner te maken.

In dit artikel zal ik je helpen welke afbeeldingsformaten zijn en hoe ze te definiëren.

Hoe WordPress afbeeldingen verwerkt

Als je ooit een afbeelding in een WordPress-artikel hebt ingevoegd, zou je langs de beeldgrootteselector moeten komen. Hiermee kunt u kleine, middelgrote en grote versies van de afbeeldingen invoegen. De werkelijke maten voor deze kan worden aangepast in de WordPress-instellingen.

Wanneer u een afbeelding uploadt via WordPress, genereert deze versies van deze afbeeldingen en slaat deze afzonderlijk op. Als u bijvoorbeeld een afbeelding van 1200 × 800 uploadt, kan WordPress 100 × 100, 600 × 400 en 900 × 600 versies maken. Wanneer u een afbeelding invoegt en "medium" kiest, wordt de actuele mediumversie gebruikt, in tegenstelling tot een verkleinde versie van het origineel.

Dit is enorm gunstig, omdat het bespaart bandbreedte op de server en verwerkingstijd op de clientcomputer. Ik denk dat het geen verrassing is dat het downloaden van een afbeelding van 600 × 400 sneller gaat dan het downloaden van een afbeelding van 1200 × 800.

Als een grotere afbeelding wordt gebruikt die moet worden verkleind, de browser moet de berekeningen verzorgen om dit te laten gebeuren. Hoewel dit geen uren zal duren, kan het merkbaar zijn op websites met veel afbeeldingen.

De juiste afbeelding op de juiste plaats

Het uiteindelijke doel zou moeten zijn om gebruik altijd de juiste afbeeldingsformaten. Als je een afbeelding van 440 × 380 nodig hebt, pak dan een afbeelding met die exacte grootte van de server. Er zijn twee hoofdplaatsen waar u geüploade afbeeldingen gaat gebruiken: afgebeelde afbeeldingen en afbeeldingen achteraf - ik zou u eerst willen aanraden eerst de uitgelichte afbeeldingen te gebruiken.

In alle behalve de meest visueel gerichte artikelen maakt het niet echt uit of een afbeelding achterin 220px of 245px breed is. Welke versie u ook beschikbaar heeft, is even bruikbaar. Uitgelichte afbeeldingen worden echter meestal weergegeven in algemene formaten. Voor artikellijsten kunt u een 178 × 178-miniatuur gebruiken, voor artikelkoppen mag u een afbeelding van 1200 × 600 breed gebruiken.

Daarnaast wilt u misschien ook een aparte miniatuur / medium / groot formaat behouden zoals gedefinieerd in de instellingen voor geeft u eenvoudig toegang tot specifieke dimensies bij het toevoegen van afbeeldingen aan berichten.

Dus waar het allemaal op neer komt, is dit: zou het niet geweldig zijn als we twee extra beeldgroottes hadden die we konden gebruiken voor aanbevolen afbeeldingen? Deze afbeeldingsformaten worden direct naast de rest gemaakt wanneer een afbeelding wordt geüpload. Het goede nieuws is dat WordPress je bedekt met een vrij eenvoudige functie.

Afbeeldingsformaten maken

Door de add_image_size () functie u kunt alle afbeeldingsformaten definiëren die uw website nodig heeft. Laten we de twee hierboven genoemde voorbeelden maken. Plaats de onderstaande code in het bestand functions.php van uw thema of in het bestand van een plug-in.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Zoals u kunt zien, heeft deze functie vier parameters nodig. Met de eerste parameter kunt u een naam voor de grootte instellen. De tweede parameter is de maximale breedte, de derde, de maximale hoogte. De vierde parameter stelt het hard bijsnijden in. Indien ingesteld op waar, de afbeelding wordt gemaakt op de exacte grootte die u opgeeft.

Zodra dit aan uw thema of plugin is toegevoegd, worden er door WordPress twee nieuwe versies van elk bestand dat u uploadt gemaakt.

Beeldformaten gebruiken

Deze afbeeldingsformaten kunnen worden gebruikt in een aantal functies die betrekking hebben op het ophalen van media. Laten we eerst naar aanbevolen afbeeldingen kijken. the_post_thumbnail () wordt vaak gebruikt om de aanbevolen afbeelding van een bericht weer te geven. De volgende code kan in een WordPress-lus worden geplaatst:

 the_post_thumbnail ('featured_thumbnail'); 

Met de eerste parameter van deze functie kunt u de afbeeldingsgrootte opgeven die moet worden gebruikt. Aangezien ik 'featured_thumbnail' heb opgegeven, wordt de 178 × 178-versie van dit bestand gebruikt.

Er zijn een aantal andere functies zoals wp_get_attachment_image ()en wp_get_attachment_image_src () die ook de parameter voor de beeldgrootte gebruiken. Telkens wanneer u een dergelijke functie gebruikt, moet u altijd een geschikte afbeeldingsgrootte opgeven.

Thumbnails regenereren

Als u al een site op zijn plaats heeft, kunt u uw artikelen niet retroactief optimaliseren door een afbeeldingsformaat te definiëren. Afbeeldingsformaten worden alleen in aanmerking genomen wanneer een nieuwe afbeelding wordt geüpload, zodat ze niet worden toegepast op afbeeldingen die zich al in het systeem bevinden.

Vrees niet, de plug-in Regenerate Thumbnails maakt alles nog beter! Deze plug-in kan de miniaturen voor al uw afbeeldingen regenereren, rekening houdend met alle gedefinieerde afbeeldingsgrootten. Het kan ook richten op een specifieke afbeelding, wat handig is als je er maar een paar hebt, of je bent aan het testen.

Zodra uw miniaturen zijn geregenereerd, ziet u de geoptimaliseerde versies op uw site. U kunt dit bekijken door de bron van de afbeelding te bekijken. Als je 'example.jpeg' hebt geüpload en je 'example.jpeg' ziet als de bron voor je aanbevolen afbeelding, klopt er iets niet. Als je het ziet “Bijvoorbeeld-178 × 178.jpeg” dan is alles goed; de geoptimaliseerde afbeelding wordt getoond.

Responsieve afbeeldingen

Een moeilijkheid bij het onderhouden van een geoptimaliseerde site is reactievermogen. Wanneer ik een artikel op de iPad bekijk, wordt een afbeelding in de post van een groot formaat gedownscaled omdat de maximale breedte 786 px of zo is.

De eenvoudigste oplossing is om een ​​plug-in te gebruiken zoals Hammy. Hammy werkt op basis van de inhoudsbreedte van uw thema (in tegenstelling tot de vensterbreedte van de browser) en kan op basis daarvan geoptimaliseerde afbeeldingen weergeven. Dit is vooral handig voor mobiele gebruikers waarbij de verwerkingskracht en bandbreedte een probleem kan zijn.

Verdere beeldoptimalisatie

Zoals ik al zei in de inleiding zijn er ontelbare manieren om afbeeldingen te optimaliseren. Van sprites tot beeldcompressie kunnen heel wat technieken worden gebruikt om de laadtijden te verlagen die hand in hand gaan met afbeeldingen. Ashutosh KS heeft een geweldig artikel geschreven met 9 WordPress-plugins om de beeldprestaties te verbeteren, ik raad aan om het te lezen!

Ik stel ook voor om Hassle Free Responsive Images te bekijken, waarin je leert hoe je ondersteuning voor het picture-element kunt toevoegen, iets wat je wilt gebruiken als je je eigen code wilt schrijven.