Redimensionare imagini online

Imagini la mărimea potrivită

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Imagine cu mărime declarată width și height rezervă locul în pagină înainte de încărcare.

<img src="poza-1200x630.jpg" width="1200" height="630" alt="Descrierea pozei" loading="lazy">

Mai multe mărimi cu srcset Faci trei variante (600, 1200, 1800 px) și browserul o alege pe cea potrivită.

<img src="poza-1200.jpg"
     srcset="poza-600.jpg 600w, poza-1200.jpg 1200w, poza-1800.jpg 1800w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="1200" height="800" alt="Descrierea pozei">

Încadrare din CSS Când nu poți tăia fișierul: object-fit face același lucru la afișare.

.coperta {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;      /* umple și decupează */
  object-position: center;
}

Cum folosești unealta de redimensionare

Alege o imagine sau trage-o în zona de sus. Până alegi una, vezi o imagine de exemplu.
Alege dacă dai mărimea în pixeli sau în procente. Cu Păstrează proporțiile bifat, înălțimea se calculează din lățime (și invers).
Sau apasă o mărime gata făcută: Facebook 1200×630, Instagram 1080×1080, Story 1080×1920, YouTube 1280×720, LinkedIn 1200×627, favicon 512×512.
Când proporțiile diferă, alege Încadrează (toată imaginea, cu margini colorate), Umple și decupează (taie marginile) sau Întinde (deformează).
Alege formatul și calitatea, apoi descarcă imaginea. Prelucrarea se face în browser; imaginea nu se încarcă pe niciun server.

Micșorare de calitate

Când o imagine mare e micșorată dintr-o dată, browserul poate pierde detalii fine și apar margini zimțate. Unealta micșorează în pași, la jumătate de fiecare dată, și folosește netezirea de calitate înaltă a canvas-ului. Mărirea peste dimensiunea originală nu adaugă detalii; imaginea va fi mai neclară.

Pune mărimea și în HTML

Codul de jos îți dă eticheta img cu width și height. Browserul rezervă locul imaginii înainte să se încarce, iar pagina nu mai sare (indicatorul CLS din Core Web Vitals).

<img src="poza-1200x630.jpg" width="1200" height="630" alt="Descrierea pozei" loading="lazy">

<!-- Mai multe mărimi, browserul o alege pe cea potrivită -->
<img src="poza-1200.jpg"
     srcset="poza-600.jpg 600w, poza-1200.jpg 1200w, poza-1800.jpg 1800w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="1200" height="800" alt="Descrierea pozei">

Întrebări frecvente

Ce mărime folosesc pentru imaginea de distribuire (og:image)?

1200×630 pixeli e mărimea recomandată de Facebook și merge bine și pe LinkedIn și X. Ține textul important în centru, pentru că unele aplicații taie marginile.

Ce înseamnă margini transparente?

La Încadrează rămân margini goale. La PNG și WebP le poți lăsa transparente; JPEG nu are transparență, deci primesc culoarea aleasă.