Standaard WordPress-afbeeldingsformaten en hoe aangepaste formaten

toe te voegen wanneer u een afbeelding uploadt, doet WordPress veel werk achter de schermen, zodat u de afbeelding aan uw bezoekers kunt serveren. U kunt meeliften op dit proces en voeg aangepaste afbeeldingsformaten op te slaan hebben om afbeeldingen handmatig te wijzigen.

in dit bericht zal ik uitleggen hoe en waarom WordPress verschillende afbeeldingsgroottes creëert. Dan leer ik je hoe je je eigen afbeeldingsgroottes kunt toevoegen door de functies te wijzigen.php bestand, regenereren thumbnails en voeg uw nieuwe beeldformaten aan de Gutenberg image block en / of de WordPress loop.

WordPress afbeeldingsgrootte uitgelegd

elke keer dat u een afbeelding uploadt naar de WordPress media library, zijn dit de extra opties voor afbeeldingsgrootte die WordPress standaard maakt:

• Miniatuur
• Medium
• Medium Large
• Large

als uw thema extra afbeeldingsgroottes specificeert, maakt WordPress die ook aan.

WordPress behoudt ook de oorspronkelijke grootte die u uploadt en noemt het volledig als in full-size.

u kunt al deze (met uitzondering van Medium_Large) in de Gutenberg image block Image Size drop-down bij het invoegen van een afbeelding in een pagina of post.

Waarom maakt WordPress zoveel afbeeldingen?

afbeeldingen zijn als broeken. Je wilt er zeker van zijn dat je de juiste maat krijgt. Broeken en afbeeldingen die te klein zijn zien er dom uit en het is pijnlijk duidelijk voor jou en iedereen dat ze niet goed passen. Te kleine afbeeldingen op uw site zullen er uitgerekt of pixelvormig uitzien.

daarentegen, als ze te groot zijn, is dat super verspilling. Je zou toch geen broek voor een man op een baby zetten? Het is zoveel extra stof dat niet eens nodig is. Die baby gaat verdwalen in een broekspijp;)

afbeeldingen zijn hetzelfde. Als uw afbeelding te groot is voor de container, verspilt u bandbreedte en tijd om het te downloaden om op uw pagina te dienen. En waarvoor? Voor niets.

idealiter moeten de afbeeldingen op ware grootte die u uploadt groot genoeg zijn om in de grootste afbeeldingscontainer op uw site te passen, maar niet groter. Wanneer u afbeeldingen op uw site gebruikt, moet u de exacte grootte van de afbeelding gebruiken die u nodig hebt.

omdat het schalen van afbeeldingen om de juiste grootte te maken in Photoshop of een andere afbeeldingsbewerker kostbare tijd kost, neemt WordPress deze taak op zich en doet het voor u. Bedankt, WordPress!

het enige wat u hoeft te doen is de juiste grootte kiezen wanneer u een afbeelding invoegt op uw site om de prestatievoordelen te krijgen van het gebruik van een afbeelding die precies goed is.

als de standaard afbeeldingsformaten van WordPress niet perfect zijn afgestemd op uw thema, kunt u de standaardwaarden aanpassen in de sectie Media > instellingen of aangepaste formaten toevoegen, zodat u meer opties hebt om uit te kiezen.

De standaard afmetingen van de foto zijn als volgt:

• 150px plein voor miniaturen
• 300 pixels breedte voor middelgrote beelden
• 768px max breedte voor medium_large afbeeldingen
• 1024px max breedte voor grote afbeeldingen.

Medium_large is toegevoegd om te profiteren van responsieve beeldondersteuning, daarom is het niet opgenomen in de pagina Instellingen. Over responsieve afbeeldingen gesproken…

responsieve afbeeldingen

al deze afbeeldingen in verschillende groottes dienen een ander doel, dus u moet de standaardwaarden niet op nul zetten om te voorkomen dat WordPress ze maakt, zoals sommige tutorials suggereren.

WordPress voegde responsieve afbeeldingen toe aan core in versie 4.4. In plaats van afbeelding src attributen te vullen met de URL voor slechts één afbeelding, voegde WordPress ook srcset (set van bronnen) toe, wat een lijst is van URL ‘ s van afbeeldingen van verschillende groottes.

raad eens welke afbeeldingen het gebruikt om die lijst aan te maken? Yup, WordPress maakt gebruik van dezelfde beelden op verschillende maten het creëert wanneer u een afbeelding uploaden.

het biedt deze lijst aan de browser zodat het een afbeelding kan selecteren die geschikt is voor het apparaat van de bezoeker. Als de bezoeker een mobiel apparaat gebruikt, ontvangt hij een kleinere afbeelding in de srcset. Als ze uw site bezoeken op een desktop Retina-apparaat, dan ontvangen ze het full-size retina-ready beeldbestand dat u hebt geüpload. Nogmaals, dit is de reden waarom je een afbeelding moet uploaden groot genoeg om die behoefte te vullen.

wanneer u een aangepaste afbeeldingsgrootte toevoegt, zal WordPress deze toevoegen aan de srcset zolang deze dezelfde beeldverhouding heeft. Als de aangepaste afbeeldingsgrootte de afbeelding in een andere vorm bijsnijdt, wordt deze uit de set weggelaten.

“Web-Optimizing” grotere afbeeldingen in WordPress

WordPress 5.3 introduceerde een nieuwe manier om grote afbeeldingsbestanden te beheren door een “web-optimized maximum size” ervan te detecteren en te genereren.

Hoe werkt het?

wanneer een nieuwe afbeelding wordt geüpload, zal WordPress detecteren of het een “grote” afbeelding is op basis van de hoogte of breedte boven de big_image threshold.

de standaard drempelwaarde is 2560px (dit kan worden gewijzigd met het nieuwe big_image_size_threshold filter).

als de hoogte of breedte van een afbeelding boven deze drempel ligt, zal deze worden verkleind – waarbij de drempel wordt gebruikt als Max-hoogte en max-breedte waarde.

de verkleinde afbeelding zal worden gebruikt als de grootste beschikbare grootte.

wilt u schalen uitschakelen?

de schaling wordt geregeld door het filter big_image_size_threshold.

false terugkeren uit het filter callback zal het uitschakelen (zoals hieronder):

add_filter( 'big_image_size_threshold', '__return_false' );

WordPress miniaturen en Featured Image Size

we hebben nu het deel van onze tutorial bereikt waar we de hele thumbnail/featured image puinhoop zullen ontrafelen. Kortom, het probleem komt hierop neer; omdat WordPress achterwaartse compatibiliteit handhaaft naarmate het evolueert, veranderen de namen van dingen, maar de functies verwijzen nog steeds naar dingen door hun oude namen.

het WordPress Miniatuurafbeeldformaat werd geïntroduceerd in versie 2.9, maar werd snel gewijzigd in aanbevolen afbeeldingen in versie 3.0, maar helaas, de naam bleef hangen. Zo hoor je vaak featured beelden aangeduid als miniaturen in tutorials en zelfs in de functienamen.

hier zijn enkele voorbeelden:

• als uw thema geen afbeeldingen bevat en u die functie wilt inschakelen, voegt u add_theme_support( 'post-thumbnails' ); toe aan uw functiebestand.
• om de WordPress-afbeeldingsgrootte in een thema weer te geven, gebruikt u de functie the_post_thumbnail().

miniaturen en uitgelichte afbeeldingen hebben een standaardgrootte van 150px bij 150px. Als u de the_post_thumbnail() – functie zonder argument gebruikt om de grootte op te geven, wordt de standaardgrootte van het vierkant 150px gebruikt.

om dit voor jezelf minder verwarrend te maken, zodat je de juiste grootte kunt gebruiken, stel ik voor om een aangepaste afbeeldingsgrootte te maken en het een naam te geven met een groot formaat of iets dergelijks. Als je dan die afbeelding wilt gebruiken in you ‘ re the loop, gebruik je the_post_thumbnail('featured-large').

voordat u begint met het maken van aangepaste afbeeldingsformaten in WordPress

als u begint met het maken van aangepaste afbeeldingsformaten, vermijd dan overboord te gaan en afbeeldingen te maken voor elk denkbaar doel. Anders brand je door de ruimte op je hosting en als je een image optimization service gebruikt die je per afbeelding in rekening brengt, ga je veel sneller door je image allowance.

als met uw plan 100 afbeeldingen kunnen worden geoptimaliseerd, maar elke upload genereert 9 extra formaten die ook moeten worden geoptimaliseerd, dan zult u uw limiet bereiken zodra u 10 afbeeldingen uploadt. Houd dit in gedachten bij het toevoegen van aangepaste maten en het kiezen van beeldoptimalisatie plannen.

Smush Pro heeft geen beeldoptimalisatielimieten en wordt geleverd met een CDN, zodat u uw serveropslag vrij kunt houden. Je zult in staat zijn om meer aangepaste afbeeldingsformaten toe te voegen dan je normaal zou doen. Zie het als het equivalent van het aanbrengen van flowy MC Hammer pants in plaats van little skinny jeans op die baby ‘ s omdat de stof is goedkoop 🙂

probeer Smush Pro gratis voor 7 dagen.

het Toevoegen van Aangepaste Afbeelding Maten in WordPress

Hier is de code die we gaan toevoegen aan onze functie-bestand toevoegen afbeelding maten:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

Deze functie accepteert 4 parameters in deze volgorde:

1. De naam van uw aangepaste image size
2. De breedte van de afbeelding in pixels
3. De hoogte van het beeld in pixels
4. Moet het beeld worden bijgesneden te passen aan de breedte en hoogte die u hebt opgegeven boven

Bijsnijden

Het bijsnijden parameter is een boolean, dus je zult gebruiken true of false. Als je het helemaal weglaat, dan zal het standaard false zijn.

als u de bijsnijdparameter instelt op true, dan zal WordPress uw afbeelding bijsnijden zodat deze past bij de afmetingen die u opgeeft wanneer het de aangepaste afbeelding maakt.

bijvoorbeeld, als uw aangepaste afbeeldingsgrootte een vierkant van 600px bij 600px is en u bijsnijden op true hebt ingesteld, dan als u een rechthoekige afbeelding van 600px bij 800px uploadt, wordt 200px afgehakt om de afbeelding vierkant te maken.

add_image_size( 'custom-image-square', 600, 600, true );

het instellen van de bijsnijdparameter op true is handig voor beeldformaten die exact moeten zijn, zoals aanbevolen afbeeldingen of post-archiefafbeeldingen die perfect in een bepaalde dimensie moeten passen.

voor afbeeldingen die meer speelruimte kunnen hebben, zoals de WordPress post-afbeeldingsgrootte en afbeeldingen op pagina ‘ s met variabele hoogtes en breedtes, kunt u bijsnijden op onwaar instellen. Dit zal de grootte van de afbeeldingen te wijzigen, maar het zal niet de vorm van de afbeelding te veranderen of afgesneden pixels.

neem een kijkje in onze image SEO gids als u probeert om verkeer naar uw sites met uw afbeeldingen.

miniaturen regenereren

een van de belangrijkste stappen bij:

1. het aanpassen van de standaard WordPress afbeeldingsformaten
2. het toevoegen van aangepaste afbeeldingsformaten of
3. het overschakelen naar een nieuw thema met verschillende aangepaste formaten

is het regenereren van miniaturen.

in deze context verwijst thumbnails naar alle extra afbeeldingen die WordPress maakt, inclusief de aangepaste afbeeldingsformaten die zijn opgenomen in uw thema en degene die u maakt via uw functiebestand.

wanneer u een wijziging aanbrengt in de manier waarop WordPress extra afbeeldingen maakt, dan heeft dit alleen invloed op de afbeeldingen die u in de toekomst uploadt. Het werkt de afbeeldingen die al in uw mediabibliotheek staan niet bij.

om de afbeeldingen die u al hebt geüpload te wijzigen, moet u de populaire plug-in Regenerate Thumbnails gebruiken.

nadat u het hebt geïnstalleerd, vindt u het in de sectie Hulpmiddelen.

wanneer u uw miniaturen regenereert in uw nieuwe formaten, hebt u de mogelijkheid om oude ongebruikte afbeeldingsformaten te verwijderen om serverruimte vrij te maken.

Hoe kunt u aangepaste afbeeldingsgroottes toevoegen aan de drop-down in het Gutenberg afbeeldingsblok

u hoeft alleen de onderstaande code aan uw functiebestand toe te voegen als u wilt dat uw aangepaste afbeeldingsgroottes verschijnen in de drop-down in het Gutenberg afbeeldingsblok. Als u een aangepaste afbeeldingsgrootte hebt gemaakt om achter de schermen voor uw thema te gebruiken, kunt u deze stap overslaan.

We gaan aansluiten op het image_size_names_choose filter.

in de array voeg ik de naam toe van het aangepaste formaat dat ik heb opgegeven in de functie add_image_size en de naam die ik in de vervolgkeuzelijst tussen haakjes wil weergeven.

zoals Ik heb geleerd tijdens het uitvoeren van deze tutorial, zult u miniaturen moeten regenereren voordat de afbeelding in de drop-down verschijnt.

WordPress Add Image Size Full Code fragment

vervolgens combineren we alles wat we hebben geleerd in één codeblok met een voorbeeld uit de echte wereld.

stel dat u aangepaste afbeeldingsgroottes aan uw blog wilt toevoegen.

hier zijn de afbeeldingsgroottes die u wilt toevoegen:

• een 1600px bij 400px aanbevolen afbeelding
• een 800px-grootte die de breedte van de inhoudsectie van uw blog overspant

aangezien ons thema momenteel geen aanbevolen afbeeldingen ondersteunt, beginnen we met dat.

u zult dan mijn aangepaste maten zien. Merk op dat ik niet bijsnijden van de beelden die gaan om de breedte van de blog inhoud overspannen. Ik zal hard bijsnijden mijn aanbevolen beelden, omdat Ik wil dat ze op een lijn precies goed.

de enige afbeelding die ik wil toevoegen aan de Gutenberg drop-down is de blog afbeelding, omdat Ik zal worden met behulp van de WordPress aanbevolen afbeeldingsgrootte in mijn thema.

nadat ik deze code aan mijn functions.php bestand heb toegevoegd, is de volgende stap om miniaturen te regenereren.

om mijn aangepaste aanbevolen afbeelding te gebruiken voor mijn berichten in de lus, voeg ik het volgende toe aan single.php of index.php

zie hoe ik 'featured-large' in the_post_thumbnail() functie heb toegevoegd? Dat zal mijn aanbevolen afbeelding weer te geven onder mijn blog posts titels, boven mijn inhoud.

aangepaste afbeeldingsgroottes Best Practices

hier zijn nog een paar tips zodat u geen problemen ondervindt bij het maken van aangepaste afbeeldingen in WordPress.

1. upload altijd het grootst mogelijke bestand. Als uw afbeeldingsgrootte te klein is, zal WordPress niet in staat zijn om alle maten te creëren die het nodig heeft om uw afbeeldingen goed te dienen op een verscheidenheid aan apparaten.
2. als u het formaat van de standaardgrootte medium_large wilt wijzigen, gebruikt u de functie update_option(). U kunt dezelfde functie gebruiken om een andere WordPress standaard beeldformaat bij te werken.
3. als u zich buiten de WordPress-lus bevindt, kunt u de functie get_the_post_thumbnail() gebruiken om een van uw aangepaste afbeeldingen te gebruiken.
4. hier is meer over zacht bijsnijden en hard bijsnijden bij het maken van aangepaste afbeeldingsformaten voor het geval u problemen ondervindt.

dat is alles wat er is om aangepaste afbeeldingsformaten

toe te voegen als u eenmaal begrijpt hoe aangepaste afbeeldingsformaten in WordPress werken, kunt u ze aanpassen aan uw behoeften en veel tijd besparen. Het krijgen van uw beeldformaten goed helpt u ook het verbeteren van uw site prestaties en zoekmachine rankings, dus het is een belangrijk ding om goed te krijgen.

als u uw afbeeldingsoptimalisatie echt naar een ander niveau wilt tillen, kijk dan op Smush. We hebben een geweldige CDN toegevoegd aan Smush Pro met automatische afbeeldingsgrootte, die u zal helpen voorkomen dat u te maken krijgt met het wijzigen van uw functiebestand om aangepaste afbeeldingsformaten toe te voegen.

er zijn ook andere geweldige functies voor beeldoptimalisatie die ingebouwd zijn, zoals het luie laden en converteren van afbeeldingen naar formaten van de volgende generatie. Probeer Smush Pro gratis voor 7 dagen en zie hoe de beeldoptimalisatie functies uw site kan verbeteren.

Tags:

• code
• afbeeldingen