<?php
$categories = get_the_category();
$output = '<div class="flex-row gap-2xs">';

if ( ! empty( $categories ) ) {
    foreach( $categories as $category ) {
        $category_name = esc_html( $category->name );
        
        $output .= '<div class="pill-primary radius-m">' . $category_name . '</div>';
    }
}

$output .= '</div>';
echo $output;
?>

Optimizare imagini WordPress – cum reduci dimensiunea fără să pierzi calitatea

27 martie 2026

Imaginile sunt, de obicei, primul vinovat când un site WordPress se încarcă lent. Un poză de produs de 4 MB, un slider cu cinci imagini neoptimizate, un hero section cu o poză în JPEG la rezoluția unui fișier de imprimantă, și scorul de performanță cade imediat. Optimizarea imaginilor nu e complicată, dar trebuie făcută corect de la început.

De ce contează dimensiunea imaginilor

Fiecare imagine adaugă greutate la pagină. Browserul trebuie să descarce fiecare fișier înainte să afișeze conținutul, iar o pagină grea se simte, atât de utilizatori, cât și de Google.

Core Web Vitals includ metrici direct legate de imagini. Largest Contentful Paint (LCP) măsoară cât durează până apare cel mai mare element vizibil din pagină, care de cele mai multe ori e o imagine. Dacă vrei un scor bun în PageSpeed Insights, imaginile sunt primul loc unde te uiți.

Pe lângă performanță, imaginile mari consumă spațiu pe server și lățime de bandă, bani reali dacă ești pe un plan de hosting cu limite.

Formatul potrivit pentru fiecare tip de imagine

Înainte să comprimi orice, asigură-te că folosești formatul corect. Aici se pierd cei mai mulți kilobytes inutil.

WebP e formatul pe care ar trebui să îl folosești pentru aproape orice: fotografii, ilustrații, capturi de ecran. E suportat de toate browserele moderne și produce fișiere cu 25-35% mai mici față de JPEG la calitate echivalentă. Dacă plugin-ul tău de optimizare poate converti automat la WebP, activează opțiunea.

JPEG rămâne o opțiune acceptabilă pentru fotografii dacă nu vrei să te complici cu conversia, dar setează compresia la 75-85%, nu la 100%.

PNG are sens doar pentru imagini cu transparență: logo-uri, icoane cu fundal transparent. Pentru fotografii, JPEG sau WebP sunt mereu mai mici.

SVG e singurul format potrivit pentru icoane și ilustrații vectoriale. Un SVG bine optimizat cântărește câțiva kilobytes, față de un PNG echivalent care poate ajunge ușor la 50-100 KB.

Redimensionează înainte de upload

Un pas pe care mulți îl sar: redimensionarea imaginii înainte să o încarci în WordPress.

Dacă ai o fotografie de 5000×3500 pixeli și o urci pe site ca hero image, WordPress o va afișa la 1400px lățime (sau cât e containerul), dar fișierul original de 8 MB rămâne pe server și e descărcat de browser. Nu are sens.

Redimensionează imaginile la dimensiunea maximă la care vor fi afișate. Pentru un hero full-width pe desktop, 1920px lățime e mai mult decât suficient. Pentru imagini de produs WooCommerce, verifică ce dimensiune folosește tema ta, de obicei 600-1200px.

Poți face asta în Photoshop, GIMP sau direct în Squoosh (squoosh.app), care îți permite să compari calitatea vizuală înainte și după compresie.

Plugin-uri de optimizare: care merită instalat

WordPress nu optimizează imaginile automat, ai nevoie de un plugin. Sunt câteva opțiuni solide.

Imagify e unul dintre cele mai folosite. Compresia se face în cloud, ai trei niveluri de agresivitate (Normal, Aggressive, Ultra) și convertește automat la WebP. Planul gratuit acoperă 25 MB/lună, suficient pentru site-uri mici.

ShortPixel funcționează similar, cu compresie lossy și lossless, conversie WebP și AVIF, și optimizare în bulk pentru imaginile deja existente. Prețul e pe credite, nu abonament lunar, util dacă ai upload-uri neregulate.

Smush vine cu versiune gratuită decentă, dar conversia WebP e disponibilă doar în Pro.

Oricare alegi, activează compresia automată la upload, conversia la WebP și optimizarea în bulk pentru imaginile deja existente în bibliotecă.

Lazy loading: încarci doar ce vede utilizatorul

Lazy loading înseamnă că browserul descarcă o imagine doar când ajunge în zona vizibilă a paginii, nu imediat ce se încarcă pagina. Dacă ai o pagină lungă cu 20 de imagini, fără lazy load toate se descarcă din prima secundă, chiar dacă utilizatorul nu ajunge niciodată la jumătatea paginii.

Din WordPress 5.5, atributul loading="lazy" e adăugat automat pe imaginile din conținut. Dacă folosești un page builder care generează imagini în afara editorului clasic, verifică dacă are opțiunea activată. Bricks Builder, de exemplu, o are în setările de performanță.

Pentru imaginile din hero section sau prima zonă vizibilă a paginii, nu activa lazy loading. Acestea trebuie să se încarce imediat pentru un LCP bun.

Dimensiunile generate de WordPress

Când încarci o imagine, WordPress generează automat mai multe versiuni la dimensiuni diferite: thumbnail, medium, large și altele definite de temă și plugin-uri.

Problema apare când ai zeci de dimensiuni înregistrate de diverse plugin-uri, iar WordPress generează câte un fișier pentru fiecare. O bibliotecă cu 500 de fotografii poate ajunge rapid la mii de fișiere pe server.

Regenerate Thumbnails îți permite să regenerezi dimensiunile după ce le-ai modificat sau curățat. Imsanity poate rescala automat imaginile la upload dacă depășesc o dimensiune maximă pe care o definești tu, util dacă ai mai mulți utilizatori care adaugă conținut și nu vrei să te bazezi pe ei să redimensioneze manual.

CDN: imagini livrate din locații mai apropiate de utilizator

Un CDN (Content Delivery Network) servește imaginile de pe servere distribuite geografic, din locația cea mai apropiată de utilizatorul care accesează site-ul. Dacă serverul tău e în Frankfurt și cineva accesează din București, un CDN cu un nod în România livrează imaginile mai repede.

Cloudflare oferă un CDN gratuit care funcționează bine pentru majoritatea site-urilor. Bunny.net e o alternativă cu prețuri mici și performanță bună, mai ales pentru Europa. Unele plugin-uri de optimizare, Imagify și ShortPixel printre ele, au integrare CDN opțională.

Cum verifici că optimizarea funcționează

Testează cu Google PageSpeed Insights sau GTmetrix. Caută secțiunile „Serve images in next-gen formats”, „Properly size images” și „Defer offscreen images”. Dacă dispar din lista de recomandări, ești pe drumul bun.

Un lucru la care să fii atent: PageSpeed testează o singură pagină, de obicei homepage. Testează și paginile cu multe imagini: category pages, pagini de portofoliu, paginile de produs WooCommerce.

Dacă după optimizare LCP-ul tot rămâne mare, verifică ce imagine e identificată ca element LCP în DevTools sau direct în PageSpeed Insights. Asigură-te că aceea e preîncărcată cu <link rel="preload">. Multe teme și page builderi au o opțiune pentru asta.

Optimizarea imaginilor e unul dintre puținele lucruri în WordPress unde efortul e mic și câștigul se vede imediat în scoruri și în viteza percepută. Fă-o o dată corect: format, dimensiune, compresie, lazy load, și după nu mai trebuie să te gândești la ea.

Unele dintre linkurile publicate in acest articol sunt „linkuri afiliate”. Aceasta înseamnă că dacă dați clic pe link și achizitionați serviciul sau produsul respectiv, vom primi un mic comision de afiliat, ceea ce ne ajută să menținem acest proiect. Mulțumim!