Képek átméretezése _

Hogyan működik a böngészőalapú képátmétezés

Minden átméretezés egy rövid csővezeték, ami teljes egészében JavaScript-ben fut. Nem töltődik le kodek könyvtár, és nincs szerver bevonva. A böngésző saját Canvas API-ja dekódolja a fájlt, újrarajzolja a célméretben, és újrakódolja memóriában, majd átad egy Blob-ot, amit az oldal előnézhet vagy zip-elhet. Mivel minden lépés a lap homokozójában él, az eredeti fájlok sosem érik el a hálózatot.

1. Minden feltöltött fájl beolvasása Blobként, és egy objektum URL létrehozása, hogy a böngésző lokálisan dekódolhassa anélkül, hogy bájtokat másolna egy szerverre vagy írna lemezre.
2. A cél dimenziók kiszámítása a választott módból — egy leghosszabb oldal korlát, egy pontos szélesség és magasság, vagy egy százalékos méretezés. A képarány zár tartja a méreteket helyes arányban, amikor egyetlen mezőt szerkesztesz.
3. Egy képernyőn kívüli Canvas létrehozása a célméretben és a ctx.drawImage(source, 0, 0, width, height) hívása a dekódolt pixelek újrarajzolásához. A böngésző kezeli az interpolációt, ami simítja a méretezett eredményt.
4. canvas.toBlob hívása a forrásformátumba való újrakódoláshoz. A PNG veszteségmentes marad, a JPEG és WebP magas minőségben kódol újra. Az oldal ezután egy előtte/utána kártyát mutat, és felkínál egy képenkénti letöltést vagy egyetlen ZIP-et, ami memóriában készül az fflate segítségével.

Miért érdemes képeket átméretezni?

• A túlméretezett képek a leggyakoribb okai a lassú oldalaknak. Egy 4000×3000-es telefon fotó egyenesen bedobva egy 600 pixel széles elrendezésbe nagyjából 40-szer több pixelt szállít, mint amennyit a képernyő mutathat. A leghosszabb oldal 1600 px-re korlátozása a feltöltés előtt keményen csökkenti az oldalsúlyt és javítja a Core Web Vitals LCP-t.
• A feltöltési űrlapok szigorú méreteket kényszerítenek ki. Avatar helyek, ID-fotó portálok, piactéri listázások és OG közösségi kártyák mind specifikus pixelméretet akarnak: 1200×630 egy Open Graph előnézethez, 512×512 egy alkalmazás ikonhoz, 150×150 egy bélyegképhez. Találd el pontosan a számot, és kihagyod az elutasított feltöltési körforgást.
• Az e-mail és chat eszközök csendben újratömörítenek bármi nagyot, ami tönkretehet egy tiszta képernyőképet. A méretezés egy ésszerű szélességre magadnak tartja az eredményt kiszámíthatónak ahelyett, hogy más veszteséges csővezetékére bíznád.
• A köteg konzisztencia számít galériákban és katalógusokban. Egy vegyes méretű fotómappának egyetlen 800×800-as célon való átfuttatása azt jelenti, hogy minden kártya egy vonalba kerül a rácson, egyetlen eltévedt óriás kép nélkül, ami megtörné az elrendezést.

Gyakori felhasználások

Az átméretezés akkor merül fel, amikor a forrásdimenziók és a cél elvárásai nem egyeznek. Három minta jelenik meg újra és újra.

• Termékfotók előkészítése egy Shopify vagy WooCommerce áruházhoz. Egy mappa 4000 pixeles kamera eredeti korlátozva 1600 px leghosszabb oldalra, hogy az áruház gyorsan betöltődjön, miközben a képarány érintetlen marad, így semmi nem néz ki nyújtottnak.
• Közösségi és alkalmazás anyagok generálása egyetlen mesterfájlból. Állíts be egy pontos 1200×630-at az Open Graph kártyához, majd 512×512-t egy alkalmazás ikonhoz, exportálva mindegyiket néhány kattintással egy nehéz szerkesztő megnyitása nélkül.
• Egy köteg QA vagy támogatási képernyőkép zsugorítása, mielőtt egy tickethez csatolnák. Egy 50 felvételes mappa 50%-ra méretezése tipikusan az archívum méretét nagyjából háromnegyedével csökkenti, mielőtt egy hibakövetőbe kerül.

Egy gyakorlati példa: 4000 px fotó 1600 px webes képre

Egy 4000×3000-es fotó egyenesen egy telefonról gyakori terhelés, ami sokkal nagyobb, mint bármilyen webes elrendezés igényli. Ez egy jó benchmark arra, hogy az átméretezés mennyit spórol.

Dobd a fotót a feltöltési zónába, hagyd a módot Leghosszabb oldal korlátozása-n, és állítsd az értéket 1600-ra. A Canvas pipeline újrarajzolja a képet 1600×1200-ban a képarány megtartásával, majd újrakódolja az eredeti formátumban. A kimeneti kártya mutatja az új méreteket és fájlméretet, ami egy tipikus JPEG esetén több megabájtról néhány száz kilobájtra csökken. Kattints a Letöltés gombra a kártyán az egyetlen fájl letöltéséhez, vagy kattints a .zip letöltése gombra, ha több képet méreteztél át egy menetben. A teljes kör, a dobástól a letöltésig, a másodperc töredéke alatt lefut, és nulla sávszélességet használ, miután az oldal betöltődött.

Milyen átméretezési módok állnak rendelkezésre?

Három. Leghosszabb oldal korlátozása a szélesség vagy magasság közül a hosszabbat egy pixel értékre korlátozza, és a másik oldalt hozzá igazítja, ami a biztonságos alapértelmezés, mert soha nem torzít. Pontos szélesség × magasság lehetővé teszi mindkét szám beírását, egy képarány zárral, ami újraszámolja a második mezőt a forrás arányból az első szerkesztésekor — kapcsold ki a zárat, amikor egy űrlap pontosan aránytalan méretet kér. Méretezés százalékban mindkét dimenziót egyetlen tényezővel szorozza, praktikus egy egész köteg felezéséhez vagy duplázásához egy menetben. Hat egykattintásos előbeállítás (1920×1080-tól 150×150-es bélyegképig) lefedi a leggyakoribb célokat.

Ez az eszközömön történik?

Igen, teljes mértékben. Az oldal a böngésző natív Canvas API-ját és a Web File API-t használja minden kép dekódolásához, újrarajzolásához és újrakódolásához memóriában. Semmilyen képadat nem kerül szerverre, nincs ideiglenes feltöltés, és nincs felhőbeli oda-vissza út. Ellenőrizheted: nyisd meg a DevTools-t, válts a Network panelre, és futtass egy átméretezést. Az egyetlen kimenő kérés, amit látsz, a kezdeti oldalbetöltés és a hirdetési hívások. Semmi képszerű nem hagyja el a lapot, ami biztonságossá teszi ezt a szkennelt személyi igazolványok, orvosi képek és más anyagok számára, amiket sosem akarnál feltölteni.

Az átméretezés csökkenti a minőséget?

Egy kép kicsinyítése (leskálázás) kiválóan néz ki — a böngésző átlagolja a forráspixeleket kevesebb pixelbe, így a részletek élesek maradnak és a fájl sokkal kisebb lesz. A forrásfelbontáson túli nagyítás (felskálázás) nem tud olyan részletet létrehozni, ami sosem került rögzítésre, így egy kis kép felnagyítva lágyan fog kinézni; ez minden átmétező korlátja, nem csak ezé. A kimenet megtartja a forrásformátumot: a PNG veszteségmentes marad, míg a JPEG és WebP magas minőségi beállítással kódol újra, így a látható különbség az eredetitől nehezen észrevehető.

Milyen fájlformátumokat támogat?

A bemeneti oldalon minden formátum elfogadott, amit a böngésző dekódolni tud: PNG, JPEG, WebP, GIF és BMP lefedi szinte az összes fájlt, amit egy telefon, kamera vagy képernyőkép eszköz készít. A kimenet megőrzi a forrásformátumot, ahol a Canvas kódoló támogatja — PNG, JPEG és WebP közvetlenül átmennek. A GIF és BMP, amiket a Canvas API dekódolni tud, de nem újrakódolni, veszteségmentes PNG-ként kerülnek mentésre. Az átméretezett fájlnév tartalmazza az új méreteket (például photo-1600x1200.jpg), így egy köteg könnyen rendezhető marad.

Dobd be a képeidet, válassz egy méretet, méretezd át. Minden a lapodon fut. Nincs feltöltés, nincs fiók, nincs várakozás szerver sorban.