Om voor een betere performance en gebruikerservaring te zorgen, maakt WordPress maakt voor elke geuploade afbeelding in de media library een 3-tal standaard afbeeldingsformaten aan:

• thumbnail. Standaard staat deze op 150px x 150px.
• medium. Standaard staat deze op 300px x 300px.
• large. Standaard staat deze op 1024px x 1024px.

Deze formaten kun je echter aanpassen zodat ze beter passen in het gebruikte thema van je website. De grootte van deze afbeeldingen kun je beheren onder Instellingen > Media. De verschillende afbeeldingsformaten kun je dan zien in de upload directorie van de media. Naast het geuploade bestand staan de andere afbeeldingsformaten met een -[breedte]x[hoogte] achter de orginele bestandsnaam maar voor de bestandsextensie. Zie voorbeeld hieronder. Je ziet hier ook dat de bestandsgrootte van deze geschaalde formaten minder groot zijn.  De bestandsgrootte van je pagina wordt daardoor minder groot en zal dus sneller inladen dan wanneer je alleen het originele bestand gebruikt.

Aanmaken nieuwe afbeeldingsformaten in je thema

Blijkt echter dat je in je website nog meer verschillende formaten nodig hebt, dan kun je deze definiëren in de functions.php van je thema met de functie “add_image_size”. de definitie van deze functie ziet er als volgt uit:

add_image_size ( string $name, int $width, int $height, bool|array $crop = false )

Voor met info over deze functie zie https://developer.wordpress.org/reference/functions/add_image_size/. Mocht je het aanmaken van de functie binnen het thema te lastig vinden, dan kun je altijd terugvallen op de plugin “Simple Image Sizes”. Voor meer uitleg hierover zie deze pagina over handige plugins voor afbeeldingen

Gebruiken van nieuwe afbeeldingsformaten in je code

Vervolgens kun een afbeelding aanroepen met de jouw formaatnaam met bijvoorbeeld de functie “wp-get_attachment_image”.

wp_get_attachment_image( [media library id], 'jouw-formaat-naam' );

Selecteer de nieuwe afbeeldingsformaten in de media dropdown

Om de formaten ook zichtbaar te maken in de afmetingen selectie, dien je de volgende code in je functions.php toe te voegen.

if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'single-post-image', 348, 9999 ); // Permalink thumbnail size
}
//add size to dropdown for image format
add_filter('image_size_names_choose', 'add_image_sizes_to_dropdown');
function add_image_sizes_to_dropdown($sizes) {
    $addsizes = array( "single-post-image" => __( "Big medium image") );
    $newsizes = array_merge($sizes, $addsizes);
    return $newsizes;
}