WordPress Image formaten uitgelegd

WordPress image formaten kunnen soms een beetje een mysterie! Heb je ooit gezien deze Media-instellingen pagina in uw admin gebied en vroeg me af wat het is?

media-instellingen

In dit artikel gaan we door WordPress beeldformaten lopen, waar ze allemaal over gaan en hoe dit dingen zoals uploadtijden kan beïnvloeden. Daarnaast zullen we ook kijken naar hoe WordPress maakt gebruik van deze verschillende beeldformaten in website lay-outs. En tot slot zullen we een kijkje nemen op hoe u onnodige afbeeldingsformaten kunt verwijderen of uw eigen aangepaste grootte kunt toevoegen.

Wat is de rol van afbeeldingsgroottes in WordPress?

het is echt belangrijk dat afbeeldingen op uw website er mooi en helder en van hoge kwaliteit uitzien. Er zijn verschillende elementen die dit dicteren, waaronder de fysieke grootte van de afbeelding (zowel afmetingen en Bestandsgrootte) en de resolutie van de afbeelding. Als uw afbeelding te groot is (bijvoorbeeld 10.000 px breed) en de bestandsgrootte te groot is (dat wil zeggen meer dan 1MB of zo) dan begint u de laadsnelheid van uw website te vertragen. Omgekeerd, als de grootte van de afbeelding te klein is dan zul je waarschijnlijk een verslechtering van de kwaliteit van het beeld te zien … met andere woorden het zou kunnen beginnen te kijken wazig of korrelig.

Host uw website met Pressidium

60-dag geld terug garantie

zie onze plannen

WordPress probeert een balans te vinden door de optimale afbeeldingsgrootte aan te bieden, afhankelijk van de locatie van de afbeelding. Het doet dit door het creëren van 3 verschillende beeldformaten elke keer dat u een afbeelding uploaden naar de WordPress Media Library. Dit zijn “miniatuurgrootte”, “middelgroot formaat” en “groot formaat” met afmetingen van respectievelijk 150×150 pixels, 300×300 pixels (maximaal) en 1024×1024 pixels (maximaal). Tot slot zal het ook een ‘Full size’ afbeelding die de oorspronkelijke grootte van de geüploade afbeelding op te slaan.

deze maten, samen met extra maten die we later zullen bekijken, worden gebruikt door WordPress in verschillende posities in de frontend lay-out. Dit wordt gedaan zodat de afbeelding gebruikt zowel a) ziet er goed uit en b) laadt snel.

het bekijken van WordPress-afbeeldingsgroottes in meer Detail

laten we een voorbeeld doornemen zodat u precies kunt zien wat er achter de schermen gebeurt wanneer u een afbeelding uploadt naar WordPress. In dit voorbeeld gaan we een afbeelding uploaden met de naam ‘post1-feature-image’. Het is 294KB in grootte en maatregelen 2089×1175 pixels en we gaan dit doen met de standaard WordPress twintig twintig thema actief (andere thema ‘ s kunnen veranderen hoe afbeeldingen worden behandeld door WordPress).

nadat we deze afbeelding hebben geüpload via de WordPress Media Library, kunnen we verbinding maken met onze site met behulp van een FTP-client en, als we naar de uploadmap gaan, zullen we zien dat er meerdere versies van onze afbeeldingen zijn gemaakt.

gemarkeerd in rood ziet u onze standaard afbeeldingsformaten. De miniatuur is bijgesneden omdat deze standaard is ingesteld via de Media-instellingen.

de’ Medium size ‘en’ Large size ‘ zijn aangepast op een manier die het veranderen van de werkelijke verhoudingen van de afbeelding voorkomt. Dus, dat is de reden waarom bijvoorbeeld de’ Middelgrote ‘ is 300×169 in plaats van 300×300. De rest van de beelden die werden gegenereerd zijn een gevolg van een aantal WordPress core-bestanden en de code twintig twintig thema ‘ s.

Technisch Worden!

als u geïnteresseerd bent in de code achter wat er gebeurt wanneer de extra afbeeldingsgroottes worden gemaakt, dan is deze sectie van het artikel iets voor u. Zo niet, ga dan naar het volgende hoofdstuk!

WordPress haalt instructies uit een bestand met de naam media.php die zich in de wp-includes/ map. Ga naar deze, lijn 4861 en je ziet het volgende:

/*** Add additional default image sub-sizes.** These sizes are meant to enhance the way WordPress displays images on the front-end on larger,* high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes* when the users upload large images.** The sizes can be changed or removed by themes and plugins but that is not recommended.* The size "names" reflect the image dimensions, so changing the sizes would be quite misleading.** @since 5.3.0* @access private*/function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 );}

post1-feature-image-768x432.jpg wordt gemaakt als gevolg van de’ medium_large ‘ grootte die werd toegevoegd in WordPress versie 4.4 voor een betere responsieve beeld ondersteuning en kan worden gezien op verschillende draagbare apparaten. Het wordt gedefinieerd in de map” wp-admin/includes ” in het bestand schema.php-regel 522

// 4.4.0'medium_large_size_w' => 768,'medium_large_size_h' => 0,

en gevraagd in de afbeelding.php-bestand in regel 86:

} elseif ( 'medium_large' === $size ) {$max_width = intval( get_option( 'medium_large_size_w' ) );$max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg en post1-feature-image-1980x1114.jpg worden gegenereerd uit het thema ’twintig twintig’ binnen de functies.php-bestand in regel 53:

/** Enable support for Post Thumbnails on posts and pages.** @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/*/add_theme_support( 'post-thumbnails' );// Set post thumbnail size.set_post_thumbnail_size( 1200, 9999 );// Add custom image size used in Cover Template.add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

dit wordt gedaan omdat het Twenty Twenty thema 1200px gebruikt als de afbeeldingsgrootte voor uitgelichte afbeeldingen. Als we een testpost maken en een aanbevolen afbeelding toevoegen en dan in de frontend enkele post pagina kunnen we zien hoe dit formaat wordt gebruikt door met de rechtermuisknop op de aanbevolen afbeelding te klikken en te kijken in de browser ‘ s inspector.

inspector

tot slot de 1980px afbeelding is de grootte die wordt gebruikt voor de aanbevolen afbeelding van de andere post templates. U kunt dit zien door het veranderen van de test post template naar ‘Cover Template’. Vervolgens kunnen we in de inspector CSS van het HTML-element van de omslagafbeelding zien hoe deze grootte wordt gebruikt:

inspector

het is altijd de moeite waard om ervoor te zorgen dat elke afbeelding die u uploadt breder is dan de aanbevolen en Cover beeldbreedtes, zodat ze er scherp uitzien. WordPress kan beeldformaten effectief te verminderen, maar het kan niet schaal een kleine afbeelding en maken het er goed uitzien.

Verwijder onnodige WordPress-afbeeldingsgroottes

zoals we hebben gezien, is WordPress bezig met het produceren van een reeks afbeeldingsgroottes wanneer we een afbeelding uploaden naar onze mediabibliotheek. Maar hebben we echt al deze beelden nodig? Niet alleen vertraagt het de snelheid waarmee afbeeldingen worden geüpload omdat WordPress op de achtergrond moet werken om deze verschillende afbeeldingen te maken, maar het neemt ook opslag in beslag die we niet op onze server hoeven te gebruiken. Dus, hoe stoppen we WordPress maken van beeldformaten die we niet nodig hebben? Lees verder om erachter te komen!

opmerking: tenzij u deze instructies op een demo-website volgt, raden wij u aan de hieronder beschreven wijzigingen in de functies te implementeren.php bestand van een kind thema. Wijzigingen aan de functies.php-bestand in een ouder thema zal worden gewist de volgende keer dat het thema wordt bijgewerkt.

verwijder de standaard afbeelding van WordPress

dit kan eenvoudig worden bereikt door de functies van het thema te bewerken.php en het toevoegen van de volgende code:

add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' );// Remove default image sizes here.function prefix_remove_default_images( $sizes ) { unset( $sizes); // 150x150 pixels unset( $sizes); // 300x300 pixels(maximum) unset( $sizes); // 1024x1024 pixels(maximum) unset( $sizes); // 768px width return $sizes;}

om te testen, laten we een nieuwe afbeelding uploaden (in ons voorbeeld wordt dit post2-featured-image genoemd) naar de mediabibliotheek en onze FTP-weergave van de uploadmap vernieuwen.

zoals u kunt zien, door WordPress te vertellen om de 4 standaard beeldformaten te verwijderen via onze functies.php-bestand We hebben WordPress gestopt voor het maken van deze in onze media map. In de toekomst betekent deze eenvoudige update van onze themacode dat we onze server niet verstoppen met ongewenste afbeeldingsgroottes. Dit bespaart ruimte en versnelt het uploadproces van de afbeelding.

oude afbeeldingsgroottes uit de mediabibliotheek verwijderen

het is u misschien opgevallen dat de 4 standaard afbeeldingsgroottes niet zijn gemaakt voor onze nieuwe afbeelding die we hebben geüpload, maar dat de eerder geüploade afbeelding nog steeds alle 8 varianten in de mediabibliotheek heeft opgeslagen. Naar alle waarschijnlijkheid, tenzij dit een gloednieuwe website is, zult u tientallen, zo niet honderden afbeeldingen hebben geüpload en in alle gevallen zullen deze ‘extra’ maten zijn gemaakt. Dus, wat te doen?

het eerste wat u moet weten is of u deze afbeeldingen nodig hebt? Voordat u verder gaat met het verwijderen van afbeeldingen gegenereerd door WordPress moet u bevestigen dat deze maten niet meer worden gebruikt. Controleer uw blog posts, aanbevolen afbeeldingen en een ander deel van uw website om ervoor te zorgen dat geen van de oude maten zijn nog steeds in gebruik.

een geweldige manier om met deze ongewenste bestanden van de oude images om te gaan is door de Forcegenerate Thumbnail plugin te gebruiken die deze automatisch zal verwijderen. Installeer en activeer de plug-in en druk vervolgens op de knop ‘alle miniaturen regenereren’ vanuit het plug-inmenu (extra – >Forceer miniaturen regenereren).

Vernieuw uw FTP media mapweergave en je zult zien dat de standaard WordPress beelden zijn gegaan. Mooi!

een andere eenvoudige manier om hetzelfde resultaat te bereiken voor de standaardgroottes is door de waarde van hun afmetingen te veranderen in “0” vanuit Instellingen > Media in de wp-admin. Dan zie je zoiets als dit:

een alternatieve methode is het wijzigen van de update_option (‘SIZE_w/h’, 0 ); binnen functies.php. Vergeet niet om dit te doen om een kind thema functies.php-bestand, zodat uw wijzigingen niet verloren gaan wanneer u het thema op een later punt bijwerken.

update_option( 'thumbnail_size_h', 0 );update_option( 'thumbnail_size_w', 0 );update_option( 'medium_size_h', 0 );update_option( 'medium_size_w', 0 );update_option( 'large_size_h', 0 );update_option( 'large_size_w', 0 );

wanneer deze update wordt gemaakt, zult u zien dat wat de waarde van de afmetingen in de Media-instellingen (vanuit WP Admin) weergeeft, nu is bijgewerkt naar 0.

verwijder extra thema-afbeeldingsformaten

we hebben nu met succes de standaardafbeeldingen van de WordPress-kern behandeld. We kunnen nu verder en pakken de beelden die door het thema (in dit geval twintig twintig). Als, net als onze standaard beeldformaten, je hebt geconcludeerd dat deze niet nodig zijn, dan kunt u een aantal wijzigingen aan te brengen in uw thema code om te stoppen WordPress produceren van deze maten in de toekomst.

om dit te doen gebruiken we de init hook en de remove_image_size core functie. Kopieer onderstaande code en plak deze in uw functies.php bestand. Als je het Twenty Twenty thema niet gebruikt zoals we hier zijn, vervang dan de namen’ post-thumbnail ‘en’ twentytwenty-fullscreen ‘ door de naam van je actieve thema.

function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } }}add_action('init', 'remove_extra_image_sizes');

als we nu een nieuwe afbeelding uploaden en onze uploadmap controleren via onze FTP-client, zullen we zien dat alle formaten worden gegenereerd, behalve ‘post-thumbnail’ en ’twentytwenty-fullscreen’.

voeg uw eigen aangepaste afbeeldingsgrootte

nu we geleerd hebben hoe redundante afbeeldingsformaten in WordPress te verwijderen, laten we eens kijken hoe we onze eigen aangepaste afbeeldingsformaten kunnen toevoegen volgens de behoeften van onze sjabloon.

hoe beslissen we welke afbeeldingsgroottes we nodig hebben?

stel dat u een website hebt met een hoofdkolom met een breedte van 960px waar de afbeelding van de functie bovenaan staat en de inhoud hieronder. U gewenste afbeeldingsgrootte zal dan 960px zijn. Vergeet niet om ook de CSS padding te berekenen indien van toepassing. Als de bovenliggende elementen bijvoorbeeld een som van 20px opvulling hebben, dan is de juiste breedte voor de afbeelding 920px. Het is 960px minus 20px voor de linker padding minus 20px voor de rechter padding.

nieuwe afbeeldingsgroottes registreren

een eenvoudige manier om nieuwe Grootte(S) te registreren is door gebruik te maken van de ingebouwde add_image_size() functie die wordt geleverd door WordPress. De functiestructuur is:

add_image_size( name, width, height, crop )

de meeste van deze opties spreken voor zich. De laatste optie (gewas) bepaalt of WordPress respecteert de proporties van ons beeld bij het wijzigen van de grootte of dat het gewassen ons beeld. Als de optie bijsnijden is ingesteld op’ true’, dan zal de afbeelding worden bijgesneden en verhoudingen zullen niet worden gerespecteerd. Als de optie bijsnijden wordt overgeslagen of op false is ingesteld, worden onze afbeeldingsverhoudingen gerespecteerd.

laten we dit in actie proberen en het resultaat controleren met een testafbeelding van 2089×1175 pixels.

laten we eerst deze code toevoegen:

add_image_size( 'new-post-thumb', 220, 180 );

dit genereert een post2-feature-image-220x124.jpg in plaats van 220×180 in onze uploadmap omdat bijsnijden niet is ingesteld (false). Hetzelfde zou gebeuren als u het volgende invoegt:

add_image_size( 'new-post-thumb', 220, 180, false );

als u bijsnijden op true instelt, wordt een afbeelding post2-feature-image-220x180.jpg opgeslagen.

add_image_size( 'new-post-thumb', 220, 180, true );

ten slotte kunt u bepalen hoe het bijsnijden zal worden geplaatst. In plaats van ’true’ gewoon gebruik maken van opties zoals ‘left’ of ‘ top ‘ of beide:

add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

de array geeft de locatie van het bijsnijden aan. De waarden die gebruikt kunnen worden zijn:

voor x_crop_position: ‘left’, ‘center’ of ‘right’.
voor y_crop_position:’ top’,’ center’, of’bottom’.

de uitvoer in elk geval zal een ander deel van de oorspronkelijke afbeelding zijn. Hier zijn enkele voorbeelden:

een alternatief om dit handmatig te doen via het toevoegen van code aan ons thema is om een plugin zoals eenvoudige beeldformaten te gebruiken. Toch is het handig om te begrijpen wat er achter de schermen gebeurt, zelfs als je een plugin als deze gebruikt.

conclusie

het gebruik van de juiste afbeeldingsgroottes in WordPress is belangrijk – het garandeert niet alleen een hoogwaardige gebruikerservaring door scherpe afbeeldingen met een hoge resolutie aan de websiteviewer te presenteren, maar heeft ook een aanzienlijke invloed op laadtijden en servergebruik. Hopelijk heeft dit artikel u geholpen het belang van de beeldformaten in WordPress te begrijpen en de manieren waarop u de beeldformaten kunt overschrijven, verwijderen of uitbreiden om te voldoen aan de behoeften van uw website en hoe u mogelijk een ton serverruimte kunt besparen door WordPress te stoppen met het genereren van onnodige grootte van elke afbeelding die u uploadt.

Host uw WordPress Website met Pressidium!

Bekijk onze prijsplannen

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.