Comprimă imagini _

Cum funcționează comprimarea imaginilor în browser

Fiecare trecere de comprimare rulează în browserul tău. Pentru JPEG și PNG, propriul API Canvas al browserului gestionează codificarea direct. Pentru WebP pe Safari și AVIF pe orice browser, pagina încarcă un codec WebAssembly ușor la cerere — totul local, imaginile tale nu părăsesc niciodată dispozitivul.

1. Citește fiecare fișier încărcat ca Blob și creează un URL obiect pentru ca browserul să îl poată decoda local, fără a copia octeți către un server sau a-i scrie pe disc.
2. Desenează imaginea decodată pe un element Canvas în afara ecranului la dimensiunile originale ale pixelilor, gata pentru re-codificare.
3. Apelează canvas.toBlob(callback, mimeType, quality) pentru a re-codifica pixelii pentru JPEG, PNG și WebP Chrome/Firefox. Pentru WebP Safari și codificare AVIF, un worker codec WebAssembly se încarcă la prima utilizare și gestionează codificarea într-un fir de execuție de fundal. În modul calitate, valoarea glisorului se mapează direct la setarea de cuantificare a codificatorului; în modul dimensiune țintă, pagina bifurcă valoarea calității până când blobul de ieșire încape sub bugetul tău de octeți.
4. Afișează o comparație înainte/după cu dimensiunea originală, dimensiunea comprimată și procentul de economisire, apoi oferă descărcare per imagine sau un singur ZIP pentru întreg lotul. ZIP-ul este construit în memorie folosind fflate, o bibliotecă de 8 KB încărcată la prima utilizare.

De ce să comprimi imaginile?

• Imaginile mai mici se încarcă mai repede. Reducerea unei imagini hero de 4 MB la 600 KB îmbunătățește direct Largest Contentful Paint, una dintre Core Web Vitals pe care Google le folosește pentru clasare. Pe o pagină cu mai multe fotografii, economisirea se cumulează într-o primă randare mai rapidă.
• Apoi sunt limitele de încărcare. Multe platforme CMS, instrumente de ticketing și sisteme de e-mail resping orice peste 1 sau 2 MB, iar o trecere rapidă de comprimare aduce fotografia sub limită fără a deschide un editor complet.
• Lățimea de bandă și stocarea costă bani la scară. Livrarea WebP la calitatea 0.8 în loc de PNG la dimensiune completă poate reduce sarcina de imagine cu o treime sau mai mult, ceea ce reduce facturile de egress CDN și utilizarea datelor mobile pentru vizitatorii tăi.
• Unele imagini nu ar trebui încărcate deloc. Deoarece totul aici rulează în browserul tău, scanările de acte de identitate, imaginile medicale și capturile de ecran interne rămân pe dispozitivul tău. Nu există un server terț precum TinyPNG în buclă de care să te îngrijorezi.

Aplicații comune

Comprimarea apare oricând o imagine este mai mare decât locul unde merge. Trei tipare pe care le vedem din nou și din nou.

• Pregătirea fotografiilor de produs pentru un magazin online. Originalele JPEG sunt comprimate la calitatea 0.8 (sau o țintă de 200 KB) pentru ca magazinul să rămână rapid și să îndeplinească Core Web Vitals pe mobil.
• Micșorarea capturilor de ecran înainte de a le atașa la un sistem de urmărire a erorilor sau wiki. Un lot de capturi PNG convertite în JPEG la calitatea 0.85 scade adesea de la zeci de megaocteți la câțiva.
• Aducerea unei fotografii sub o limită de încărcare — un portal de aplicații pentru joburi care respinge fișierele peste 1 MB, un sistem de e-mail cu o limită strânsă pentru atașamente sau un avatar de forum care trebuie să se încadreze într-un buget de octeți.

Un exemplu practic: 4 MB JPEG la 400 KB

Un JPEG de 4 MB direct de pe camera telefonului este o sarcină comună care depășește limitele de încărcare și încetinește paginile. Este un reper corect pentru ceea ce economisește comprimarea.

Plasează JPEG-ul în zona de încărcare, lasă formatul pe JPEG și fie trage glisorul de calitate în jos la 0.7, fie comută în modul dimensiune țintă și tastează 400 KB. În modul calitate, conducta Canvas re-codifică o dată și arată rezultatul, de obicei în jur de 500 până la 700 KB în funcție de fotografie. În modul dimensiune țintă, pagina încearcă câteva valori de calitate, se stabilește pe cea mai mare care încape sub 400 KB și raportează procentul de economisire. Click pe Descarcă pe card pentru a lua fișierul individual, sau click pe Descarcă .zip dacă ai comprimat mai multe imagini deodată. Întregul proces rulează în mult sub o secundă pentru o imagine de această dimensiune și consumă zero lățime de bandă după ce pagina în sine se termină de încărcat.

Care este diferența dintre modul calitate și modul dimensiune țintă?

Modul calitate îți oferă un glisor de la 0.1 la 1.0 care se mapează la setarea de cuantificare a codificatorului JPEG sau WebP — numere mai mici înseamnă fișiere mai mici și artefacte mai vizibile. Modul dimensiune țintă inversează problema: denumești o dimensiune în kiloocteți, iar pagina bifurcă valoarea calității, codificând de câteva ori până găsește cea mai înaltă calitate care încape sub bugetul tău. Modul dimensiune țintă este util când o limită strictă contează (o limită de încărcare de 1 MB, de exemplu); modul calitate este mai rapid și mai bun când vrei doar un rezultat vizual previzibil. PNG este fără pierderi, deci niciun mod nu i se aplică.

Acest lucru se întâmplă pe dispozitivul meu?

Da, complet. Pagina folosește API-ul Canvas nativ al browserului și API-ul Web File pentru a decoda și re-codifica fiecare imagine în memorie. Nicio imagine nu este trimisă către un server, nu există încărcare temporară și nici un drum dus-întors în cloud. Poți verifica singur: deschide DevTools, comută la panoul Network și rulează o comprimare. Singurele cereri externe pe care le vei vedea sunt încărcarea inițială a paginii și apelurile de reclame. Nimic în formă de imagine nu părăsește fila.

De ce comprimarea unui PNG uneori abia îl micșorează?

PNG este un format fără pierderi, deci API-ul Canvas nu poate arunca detalii pentru a-l face mai mic — poate doar re-ambala aceiași pixeli. Pentru fotografii, un PNG este deja mare, iar re-codificarea fără pierderi economisește puțin. Câștigul real vine din comutarea formatului de ieșire la JPEG sau WebP, care folosesc compresie cu pierderi potrivită pentru fotografii și ajung de regulă de 4 până la 10 ori mai mici. Păstrează PNG doar când ai nevoie de calitate fără pierderi sau transparență; altfel, alege JPEG pentru fotografii sau WebP pentru cel mai bun raport dimensiune-calitate.

Ce format ar trebui să aleg?

Pentru fotografii, WebP la calitatea 0.8 oferă cel mai bun raport dimensiune-calitate și este suportat de orice browser lansat din 2021; JPEG este fallback-ul universal sigur când destinația este mai veche sau mai strictă. Alege PNG doar când ai nevoie de calitate fără pierderi sau de un canal alpha — grafică lineară, capturi de ecran UI, logo-uri cu transparență. Dacă optimizezi pentru viteza paginii și audiența ta folosește browsere moderne, WebP este aproape întotdeauna alegerea corectă; dacă hrănești un CMS vechi sau o conductă de tipărire care respinge WebP, rămâi la JPEG.

Plasează imaginile, alege un nivel de calitate sau o dimensiune țintă, comprimă. Totul rulează în fila ta. Fără încărcare, fără cont, fără așteptare la o coadă de server.