Cuut.ee, HeadRehvid.ee ja Hundikuu.ee kolm erinevat add_image_size lähenemist. Koodinäited, mille järgi valida oma projektile õige strateegia.

Sisukord

WordPress genereerib vaikimisi hulga pildisuurusi iga üleslaetud pildi kohta – thumbnail, medium, medium_large, large, 1536×1536, 2048×2048. Enamikku neist ei kasutata kunagi. Iga genereeritud suurus on aga eraldi fail kettal ja potentsiaalne segadus meediaraamatukogus.

Õige lähenemine ei ole “lase WordPressil genereerida kõik ja loodame parimat”. Õige lähenemine on defineerida täpselt, milliseid suurusi sinu teema tegelikult kasutab – ja registreerida ainult need.

Vaatame kolme reaalset projekti, kus lähenemine erineb konteksti järgi, aga põhimõte on sama: teadlikud valikud, mitte vaikimisi käitumine.

Miks vaikimisi pildisuurused on probleem

Iga WordPress’i genereeritud pildisuurus on:

Ketta ruum – iga suurus on eraldi fail
Genereerimisaeg – üleslaadimisel genereeritakse kõik registreeritud suurused korraga
Segadus meediaraamatukogus – kasutamata suurused ummistavad valikuid
big_image_size_threshold filter on esimene asi, mida kontrollida. Vaikimisi loob WordPress “scaled” versiooni piltidest, mis on suuremad kui 2560px – see on lisasuurus, mida enamikul juhtudel ei vajata, kui oled juba teadlikult suurused defineerinud.

add_filter('big_image_size_threshold', '__return_false');

Näide 1 – Cuut.ee: proportsionaalsed ja crop suurused kombineeritult

Cuut.ee kasutab kolme custom suurust, kus osad on proportsionaalsed (säilitab kuvasuhte) ja osad on crop (fikseeritud ruudukujuline):

add_action('after_setup_theme', function() {
    add_image_size('cuut-gallery', 450, 450, false); // proportional
    add_image_size('cuut-shop',    600, 600, true);  // crop
    add_image_size('cuut-large',   1200, 900, false); // proportional
}, 11);

Neljas parameeter (true/false) määrab, kas pilt kärbitakse täpselt määratud mõõtudesse (true) või säilitatakse originaali proportsioonid (false). Tootepiltide jaoks (cuut-shop) on crop mõistlik – kõik tootepildid näevad kataloogis ühtlased välja. Galeriipildid (cuut-gallery) säilitavad proportsioonid, sest fotode kuvasuhe võib varieeruda.

Vaikimisi WordPress suuruste puhastamine – ainult mittevajalikud eemaldatakse, WooCommerce vajalikud jäävad alles:

add_filter('intermediate_image_sizes_advanced', function($sizes) {
    unset($sizes['medium_large']);
    unset($sizes['1536x1536']);
    unset($sizes['2048x2048']);
    return $sizes;
});

WooCommerce pildimõõtude ülekirjutamine – WooCommerce’i enda vaikimisi suurused asendatakse projektispetsiifiliste mõõtudega:

add_filter('woocommerce_get_image_size_thumbnail', fn($size) => 
    ['width' => 600, 'height' => 600, 'crop' => 1]);
add_filter('woocommerce_get_image_size_single', fn($size) => 
    ['width' => 1200, 'height' => 900, 'crop' => 0]);
add_filter('woocommerce_get_image_size_gallery_thumbnail', fn($size) => 
    ['width' => 600, 'height' => 600, 'crop' => 1]);

Custom sizes atribuut – see on osa, mida enamik arendajaid vahele jätab. Vaikimisi WordPress genereerib sizes atribuudi, mis eeldab, et pilt täidab kogu container’i laiuse. See ei ole alati tõsi. Kataloogilehel, kus tooted on grid’is (3 tulpa desktopil, 2 tahvelil, 1 mobiilil), vajab brauser täpsemat infot:

add_filter('wp_calculate_image_sizes', function($sizes, $size, $image_src, $image_meta, $attachment_id) {
    if (is_array($size) && $size[0] === 600 && $size[1] === 600) {
        return '(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw';
    }
    return $sizes;
}, 10, 5);

See ütleb brauserile: mobiilis (kuni 600px) võtab pilt kogu ekraani laiuse (100vw), tahvelil pool ekraanist (50vw), desktopil kolmandiku (33vw). Brauser valib srcset’ist täpselt õige suurusega faili – mitte suurema kui vaja.

Näide 2 – HeadRehvid.ee: agressiivne puhastus, WooCommerce puutumata

HeadRehvid.ee lähenemine on lihtsam ja agressiivsem – suure tootekataloogiga poe puhul on iga ülearune suurus korrutatud tuhandete toodetega, mistõttu puhastus on eriti oluline:

add_filter('intermediate_image_sizes_advanced', function ($sizes) {
    unset($sizes['thumbnail']);
    unset($sizes['medium']);
    unset($sizes['medium_large']);
    unset($sizes['large']);
    unset($sizes['1536x1536']);
    unset($sizes['2048x2048']);
    // WooCommerce sizes stay untouched:
    // woocommerce_thumbnail
    // woocommerce_single
    // woocommerce_gallery_thumbnail
    return $sizes;
});
add_filter('big_image_size_threshold', '__return_false');

Erinevus Cuut.ee lähenemisest: siin eemaldatakse kõik WordPress vaikimisi suurused, sh thumbnail ja large, mida Cuut.ee säilitas. WooCommerce enda suurused (woocommerce_thumbnail, woocommerce_single, woocommerce_gallery_thumbnail) jäävad muutmata – need on juba WooCommerce’i seadete kaudu häälestatud (WooCommerce → Settings → Products → Display).

See on õige valik, kui:

Kasutad ainult WooCommerce’i sisseehitatud pildisuurusi, mitte custom suurusi
Tootekataloog on suur (tuhandete toodetega) – iga sääst korrutub tuhandekordselt kettaruumis

Näide 3 – Hundikuu.ee: nimega registreeritud, meediaraamatukogus valitavad suurused

Hundikuu.ee lähenemine on kõige struktureeritum – iga suurus on nimega, dokumenteeritud ja meediaraamatukogus valitav:

function hnd_remove_default_image_sizes() {
    remove_image_size('thumbnail');
    remove_image_size('medium_large');
}
add_action('init', 'hnd_remove_default_image_sizes');
 
function hnd_register_image_sizes() {
    // Hero/Banner images
    add_image_size('hnd-hero-mobile', 640, 960, true);
    add_image_size('hnd-hero-desktop', 1920, 1080, true);
    
    // Portfolio grid
    add_image_size('hnd-portfolio-grid', 450, 675, true);
    add_image_size('hnd-portfolio-grid-2x', 900, 1350, true); // Retina
    
    // Teenused grid
    add_image_size('hnd-teenused-card', 400, 600, true);
    add_image_size('hnd-teenused-card-2x', 800, 1200, true); // Retina
    
    // General purpose
    add_image_size('hnd-large', 600, 900, true);
    add_image_size('hnd-medium', 400, 300, true);
    add_image_size('hnd-small', 300, 450, true);
}
add_action('after_setup_theme', 'hnd_register_image_sizes', 11);

Iga suurus kannab nime, mis ütleb, kus seda kasutatakse (hnd-hero-mobile, hnd-portfolio-grid). See on oluliselt hallatavam kui anonüümsed numbrid, eriti kui projektiga töötab mitu inimest või kui naased koodi juurde kuu aja pärast.

Retina suurused eraldi registreeritud (-2x sufiksiga) – see on teadlik valik topeltresolutsiooniga ekraanide jaoks, mitte automaatne 2x genereerimine (mida WordPress vaikimisi ei tee ühegi custom suuruse jaoks).

Meediaraamatukogu valik – nimede muutmine inimloetavaks, et toimetaja saaks käsitsi valida õige suuruse kui vaja:

function hnd_custom_image_sizes_names($sizes) {
    return array_merge($sizes, [
        'hnd-hero-mobile'        => 'Hundikuu Hero (Mobile)',
        'hnd-hero-desktop'       => 'Hundikuu Hero (Desktop)',
        'hnd-portfolio-grid'     => 'Hundikuu Portfoolio Grid',
        'hnd-portfolio-grid-2x'  => 'Hundikuu Portfoolio Grid (Retina)',
        'hnd-teenused-card'      => 'Hundikuu Teenused Card',
        'hnd-teenused-card-2x'   => 'Hundikuu Teenused Card (Retina)',
        'hnd-large'              => 'Hundikuu Large',
        'hnd-medium'             => 'Hundikuu Medium',
        'hnd-small'              => 'Hundikuu Small',
    ]);
}
add_filter('image_size_names_choose', 'hnd_custom_image_sizes_names');

Milline lähenemine sobib millisele projektile

Väike/keskmine e-pood, custom disain (Cuut.ee tüüpi) – defineeri projektispetsiifilised suurused, kirjuta üle WooCommerce vaikimisi suurused, lisa täpne sizes atribuut grid-paigutustele.

Suur tootekataloog, WooCommerce disain põhijoontes (HeadRehvid.ee tüüpi) – puhasta agressiivselt kõik WordPress vaikimisi suurused, jäta WooCommerce enda suurused muutmata, seadista need WooCommerce enda seadetest.

Multifunktsionaalne sait mitme sektsiooniga (Hundikuu.ee tüüpi) – registreeri iga kasutusala jaoks nimega suurus, lisa Retina variandid oluliste visuaalide jaoks, tee suurused meediaraamatukogus valitavaks toimetajate jaoks.

Ühine joon kõigis kolmes

Hoolimata erinevustest on kõigil kolmel lähenemisel sama alusloogika:

Eemalda mittevajalik – WordPress vaikimisi suurused, mida sinu teema ei kasuta
Registreeri täpselt see, mida vajad – nimega, dokumenteeritud, kontekstispetsiifiline
Ära genereeri “scaled” versiooni – big_image_size_threshold false, kui suurused on juba kontrolli all
WooCommerce eraldi kaalutlus – kas kirjutad üle (custom disain) või jätad puutumata (WooCommerce disain)
See on vastand vaikimisi käitumisele, kus iga pilt genereerib 6-8 versiooni, millest kasutatakse 2-3. Tulemus on väiksem kettakoormus, kiirem üleslaadimine ja selgem meediaraamatukogu.