Articol

Optimizează media unui site pentru viteză și Core Web Vitals

Imaginile reprezintă de obicei aproximativ 40 la sută din greutatea totală a unei pagini web, mai mult decât orice alt tip de resursă, iar videoclipurile adaugă mult mai mult pe paginile bogate în media. Să le optimizezi corect este cel mai eficient lucru pe care îl poți face pentru viteza de încărcare, scorurile Core Web Vitals și clasarea în căutări. Vestea bună: niciun pas nu necesită software specializat sau un server, iar fișierele tale nu trebuie să părăsească niciodată dispozitivul.

Scris de Bastien Sulyan · Publicat pe 16 iunie 2026

Alege formatul potrivit înainte de orice

Alegerea formatului contează mai mult decât orice cursor de calitate. Pentru fotografiile de pe o pagină web, WebP este opțiunea implicită potrivită: este cu 25 până la 35 la sută mai mic decât JPEG la aceeași calitate vizuală și fiecare browser modern îl acceptă. AVIF comprimă și mai mult, cu până la 50 la sută mai bine decât JPEG, cu prețul unei codări mai lente. Folosește AVIF pentru imaginile hero și fotografiile de produse pe care le comprimi o dată; folosește WebP pentru orice procesezi în loturi sau ai nevoie rapid. PNG își are locul doar acolo unde ai nevoie de precizie fără pierderi sau de un fundal transparent. SVG este singura alegere rezonabilă pentru logo-uri, pictograme și ilustrații: se scalează la orice dimensiune și cântărește adesea câțiva kilooctete față de sute pentru un echivalent rasterizat.

Comprimă imaginile fără pierderi vizibile de calitate

Începe prin redimensionarea la dimensiunile reale de afișare: o imagine hero care se afișează la 1280 de pixeli lățime nu are nevoie de 4000 de pixeli de date. Redimensionează mai întâi, apoi comprimă. Pentru fotografii, calitatea 80 în WebP sau JPEG este pragul practic sub care vizitatorii obișnuiți încep să observe, așa că țintește între 75 și 85 și privește rezultatul la zoom complet înainte de publicare. Pentru grafica cu text și zone plate, PNG fără pierderi sau SVG păstrează claritatea pe care formatele cu pierderi o estompează. Compresorul de imagini de pe acest site gestionează toate aceste formate, rulează integral în browserul tău și aplică aceiași algoritmi ca instrumentele dedicate de pe desktop.

Convertește videoclipuri pentru web fără să le încarci

Buclele de fundal și videoclipurile integrate sunt locurile unde optimizarea media pentru web eșuează adesea. Un MP4 cu H.264 rulează peste tot, iar WebM este alternativa fără redevențe acceptată de orice browser modern. Convertorul video al acestui site codează WebM cu VP8, care se situează în aceeași clasă de compresie ca H.264: simpla schimbare a containerului nu micșorează fișierul, câștigul real este un lanț de codecuri complet fără redevențe și suportul nativ pentru un canal alfa. Abordarea practică este să convertești o dată în WebM, să îl servești ca sursă preferată într-un element video și să păstrezi MP4-ul ca rezervă pentru browsere mai vechi. Conversia rulează în interiorul browserului tău prin FFmpeg compilat în WebAssembly: nimic nu este încărcat, iar fișierele de până la 500 MB se convertesc fără coadă de așteptare. Pentru videoclipurile de fundal inline, ia în considerare și instrumentul de tăiere video pentru a elimina secundele moarte înainte de codare: durata este cel mai mare factor al dimensiunii fișierului.

Resurse inline: base64 și SVG

Imaginile foarte mici, pictogramele și favicon-urile încorporate direct în HTML sau CSS ca șiruri base64 elimină o călătorie de rețea dus-întors pentru fiecare resursă. Acest lucru are sens pentru resursele de sub aproximativ 2 KB care apar pe fiecare pagină, cum ar fi un sprite de logo sau un indicator de încărcare. Resursele mai mari ar trebui să rămână fișiere separate, deoarece base64 se codează cu 33 la sută mai mare decât binarul, iar browserele pun în cache referințele de fișiere, dar nu și datele inline în mod independent. Optimizatorul SVG elimină reziduurile de editor din SVG-urile exportate fără să atingă rezultatul vizual. Convertorul imagine-în-base64 generează URI-ul de date gata de lipit în browserul tău.

Compromisul dintre un fișier separat pus în cache, care necesită o cerere HTTP suplimentară, și o resursă inline Base64 cu circa 33% mai mare, retrimisă la fiecare pagină

Servește dimensiunea potrivită și încarcă-o prima

Două detalii de livrare contează la fel de mult ca fișierele în sine. Primul este dimensionarea responsivă. Cu o listă srcset de descriptori de lățime (image-400.webp 400w, image-800.webp 800w și așa mai departe), browserul alege cel mai mic fișier care acoperă totuși ecranul, înmulțind lățimea CSS cu raportul de pixeli al dispozitivului (device pixel ratio) înainte de a solicita orice fișier. Un telefon cu un layout de 390px lățime și un ecran 3x are nevoie de aproximativ 1170 de pixeli, deci va descărca versiunea 1200w și o va sări pe cea originală pentru desktop. Al doilea este prioritatea. Browserele rulează un scaner de preîncărcare (preload scanner) care citește înainte și începe să descarce imagini înainte ca parserul principal să le atingă; adăugând fetchpriority="high" la cea mai mare imagine de deasupra liniei de pliere (above-the-fold) îi spui browserului să o descarce prima, ceea ce determină de obicei valoarea Largest Contentful Paint.

Bare care compară un original de cameră de 4000 de pixeli, dimensiunea de 1200 de pixeli folosită de layout și o miniatură de 480 de pixeli, arătând că redimensionarea economisește mai mult decât setările de calitate

Instrumente din acest articol

Întrebări frecvente

Comprimarea imaginilor îmi afectează clasarea în căutări?

Google folosește Core Web Vitals ca semnal de clasare, iar Largest Contentful Paint este aproape întotdeauna o imagine sau un poster video. O pagină a cărei imagine hero se încarcă în mai puțin de o secundă obține un scor mai bun decât una unde durează trei secunde. Comprimarea și formatul potrivit afectează direct această metrică, așa că da, optimizarea imaginilor are un impact SEO măsurabil. Efectul este cel mai puternic pe mobil, unde conexiunile sunt mai lente, iar penalizarea pentru imaginile grele este mai mare.

De ce să procesezi media local în loc să folosești un serviciu web?

Majoritatea instrumentelor media online necesită încărcarea fișierelor tale pe un server la distanță, ceea ce ia timp, consumă lățime de bandă și înseamnă că o copie a fișierului tău există pe o infrastructură pe care nu o controlezi. Instrumentele de pe acest site rulează integral în browserul tău: imaginile și videoclipurile tale sunt procesate pe dispozitiv, iar rezultatul este descărcat direct. Nu există cont, nu există așteptare pentru încărcare și nimic din fișierele tale nu este trimis vreodată către un server.