A képek tömörítése: A webes tervezői útmutató

Sep 11, 2025

kézikönyv

A modern internetkapcsolat átlagos sebessége nagyon futurisztikusnak hangzik a múlt webes mesterei számára. Vissza a szövedék korai napjaiban, az átruházott adatok összege döntő fontosságú volt, mind az idő, mind a költségek, ezért mindenkinek részt vett az interneten való fogadásban, hogy kisebb képeket készítsen.

Ironikus módon a probléma ma nem ment el. Minden alkalommal, amikor meglátogat egy script-heavy weboldal (például többségi világ hírek), akkor gyakran húz egy tucat megabájt JavaScript kódot, képek, videók és miegymás. Lehet, hogy továbbra is fájdalmasan lassú, és akár egy csinos pennyt is fizetnek néhány mobil adathasználó számára (ez nem lehet probléma, ha tisztességeset használsz weboldal építője , és jó web hosting szemmel kell tartania az Ön számára).

Ebben a bemutatóban meg fogjuk találni, hogyan lehet a bitmap fájlokat szkennelni az interneten. Mindaddig, amíg a jó régi PNG és JPEG formátumokat használja (lásd többet Képfájlformátumok Itt, és győződjön meg róla, hogy a fájlokat jobbra mentse felhő tároló is), meglátjuk, hogyan lehet őket kisebb mértékben veszélyeztetni a minőség, néhány forró Nyílt forrásprojektek . Végül lényegesen kisebb fájlokat fogunk találni, amelyek még mindig jól néznek ki, de kevesebb időt és adatokat igényelnek, hogy a felhasználók böngészőjeiben legyenek.

Olvassa el a részleteket. Először is, gyors megjegyzés a szoftveren. Az itt említett összes eszköz nyílt forráskódú - Ugrás az aljára egy útmutatóhoz Hogyan kapja meg a szoftvert szükséged van.

A legjobb Wordpress portfólió témák

Válassza ki a megfelelő formátumot

Triviálisnak tűnhet, hogy még mindig a fájlméretre nézzen, de elegendő példa van, ahol a kép túlságosan hatalmas, anélkül, hogy bármilyen célból lenne, vagy kicsi, annak ellenére, hogy kicsi. Az ilyen hibák elkerülése érdekében válasszon egy formátumot, hogy mentse vagy átalakítsa a képet bölcsen. A JPEG használata 8x8 képpontos csempékbe való törés, ahol minden csempe tömörül. A tömörítés szintje a felhasználótól függ (ez a csúszka, amikor elment egy képet), de jellemzően a JPEG 10: 1 fájlméretet tesz lehetővé, elfogadható minőségveszteséggel.

A magas (80-100) és az alacsony (40-60) tömörítési arányban készült JPEG fájlok közötti észlelési különbség minimális a fotográfiai képekhez, de nagyon észrevehető a digitális grafikákhoz, ikonokhoz és képernyőképekhez. Ezért ajánlott JPEG-t választani a fotókhoz, és menjen valami mással a többi bitmap képhez.

A PNG az egyik legmegfelelőbb formátum a hálózati grafika számára (valójában ez az, amit a rövidítés eszköze). Míg a JPEG formátum mindig veszteséges (még a minőségi készlet 100), a PNG formátum lehet veszteséges vagy sem. Ráadásul még akkor is, ha ez az, hogy tömöríti az adatokat a képen használt színek számának csökkentésével, hogy az eredmény általában ropogós és világosabb legyen. Tehát válassza ki a PNG-t a screinggrabs vagy bármilyen más, tömör kitöltéssel.

Kezdje a kényelmes módszerekkel

Imagine is based on Electron and provides a friendly interface for processing several images at once — Képzeld el az elektronon alapul, és barátságos felületet biztosít több kép feldolgozásához egyszerre

A bitmap fájlok optimalizálása lehetővé teszi egy csomó freeware eszközzel, így nem kell egy teljes körű képszerkesztőre támaszkodnia. Képzeld el az egyik ilyen alkalmazás, és hihetetlenül könnyű használni. Csak húzza egy képet (vagy egy köteg képet) az elképzelt ablak fölé, és használja a kis csúszkákat a tömörítési arány beállításához.

Képzeld el, hogy JPEG, PNG és WEBP fájlokkal működik, és ideális a veszteséges kódoláshoz. A legnagyobb előny az, hogy az eszköz interaktív; Ez azonnal megmutatja, hogy a kép hogyan fog megjelenni az aktuális beállításokkal, és megjeleníti a javasolt fájlméretet. Képzeld el, hogy nagyszerűen dolgozik a kötegelt feldolgozáshoz - Legalábbis egyszerre mentheti az összes megnyitott képet, ha szükséges.

Mondanom sem kell, hogy több tucat, ha nem több száz, más JPEG és PNG optimalis, beleértve néhány praktikus online szolgáltatásokat (mint például Tinyjpg ). De még csak ne rohanj le - van valami jobb a hüvelyünk.

Speciális tömörítési technikák

For JPEG, we used a test photo of a straw hat on a blurred background; Guetzli reduced file size by 33 per cent and Lepton by another 23 per cent — A JPEG esetében egy vizsgált fotót használtunk homályos háttéren egy szalmakalapról; Guetzli csökkentette a fájlméretet 33 százalékkal és leptonnal további 23 százalékkal

Első pillantásra úgy tűnik, hogy nem tudunk sokkal többet harapni a veszteséges JPEG fájlméretekből, ami azonnal bebizonyíthatja a hiábavaló próbálkozásokat a zip vagy bármely más tömörítési technikával. De itt jön Guetzli, egy okos svájci cookie és kifinomult perceptuális jeladó JPEG számára.

Guetzli átlagos JPEG-t tesz ki 20-30 százalékkal a tömörítési sűrűség növelésével. A titok az, hogy az algoritmus tisztában van azzal, ahogyan az emberek észlelik, amit látnak, így az így kapott kép még mindig jól néz ki a szemnek. Guetzli egy cross-platform parancssori eszköz, amely a következő szintaxist használja:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

Az eredeti kép lehet PNG vagy JPEG, míg a kimenet mindig JPEG. Ezért a Guetzli segítségével a PNG-t JPEG-ra konvertálhatja a legmodernebb tömörítésnek köszönhetően. A minőség 0-100 között kell esnie. Guetzli hihetetlenül erőforrás-nehéz szoftver; Közel 300 MB memóriát fogyaszt 1 megapixeles és sok CPU teljesítmény. Reméljük, hogy a szuper optimalizált JPEG-k nem fogják növelni a globális felmelegedést ...

A hordozható hálózati grafika egy másik történet, mindaddig, amíg a veszteséges képkódolásra tervezték. Ha a képet PNG-ben menti, olyan képszerkesztőben, mint a GIMP, akkor a 0-tól 9-ig terjedő értékű tömörítési aránya van. Itt 0 nincs tömörítés, és a kép súlya, mintha TIFF-ként mentett volna. Ezzel szemben 9 csíkok távolítják el a felmerült színinformációk nagy részét, és olyan fájlt eredményeznek, amely 15-20-szor kisebb, mint a TIFF.

Ezúttal megpróbáltunk már kis PNG-fájlt készíteni (9 arányban) még kisebb. Ebből a célból a Zopfli-t, egy másik nyílt forráskódú eszközt használjuk, amely ismét gyökerei vannak a Google Labs-ban. A Zopfli kiváló minőségű kompresszor a deflát, a Gzip és a ZLIB adatkódoláshoz.

Az érdekes rész az, hogy a Zopfli két kódolót tartalmaz egy kötegben: az általános célú bináris és a dedikált "zopflipng" eszköz. Az utóbbi pontosan az, amire szükségünk van! A Zopflipng egy deflate-alapú kódoló, amely bizonyos algoritmusokkal bontja be a webc formátumot. Elég okos, hogy automatikusan kiválasztja a legjobb stratégiát a scanline kódok használatával, és eltávolítja a különböző felesleges darabokat a PNG belsejében. Használja ezt az egyszerű szintaxist:

zopflipng original_png output_png

A Zopflipng valószínűleg még jobban elvégezheti a munkát a következő kifejezett lehetőségekkel:

 Zopflipng --itations = 500 - Filters = 01234mepb --lossy_8bit --lossy_transparent Original_png
output_png

Az Ön által fizetett ár ugyanaz, mint a Guetzli: Az eszköz sok időt vesz igénybe a kép feldolgozásához, különösen akkor, ha nagy. Minél több iterációt használsz, annál hosszabb ideig tart, de 500 ésszerű szám. A Zopfli fájlméret-nyeresége 8-20 százalék, ami nagyon jó a vizuálisan tökéletes képekhez. Röviden, 8 százalékos nyereséget gyakorol a képernyőképekre, míg 20 százalék lehetséges fényképekkel (ha PNG-ként kell tárolni őket).

Frissítés a következő gen fájlformátumokra

The test PNG image was an ordinary 1920x1080 screenshot; consequent compression by Zopflipng and then FLIF gained 14 per cent without reducing the number of colours — A teszt PNG kép rendes 1920x1080 képernyőkép volt; következetes tömörítés zopflipgnel, majd flifben 14 százalékot nyert anélkül, hogy csökkentené a színek számát

Formálisan ez a rész meghaladja a PNG és a JPEG hatókörét, de nagyon praktikus, mivel a fájlkonverziót rendezheti. Az itt azt értjük, hogy alternatív és új képformátumokat használ, amelyek felülmúlják a legjobb ipari szabványokat (lásd WebE).

Az egyik a FLIF, egy új veszteségmentes képformátum a mániákum (meta-adaptív közel-nulla egész számtermetikus kódolás) tömörítési módszere alapján, amely a PNG, az FFV1, a veszteség nélküli webp, veszteségmentes BPG és veszteségmentes JPEG 2000-es teljesítményt nyújtja a tömörítési arány tekintetében. FLIF áll rendelkezésre minden platformra, és néhány képnézegetők már támogatják, de hosszú útja van, hogy elérje a mainstream. Most van értelme FLIF használatával a tároláshoz vagy a szerver oldalán. Hatékony archiválási formátumúvá válhat. Meg kell ragadnia a kódot a projekt Github oldaláról és fordítsa össze. Miután megvan a flif Bináris telepítve, használja a következő parancsot, hogy kódolja a PNG képet:

 FLIF -E eredeti_png kimenet_flif

Helyettesít -E val vel -d és tegye a fájlokat fordított sorrendben, hogy a képet visszaállítsa a képedre a PNG-hez. A szerszámok tekintetében most a Windows FLIF WIC API összetevője, a QT FLIF plugin a Linuxhoz és a Phew Image Viewerhez és a MacOS gyorslista bővítményhez (lásd a Részletek részeként). A zopflipng által korábban megkínzott képhez képest a FLIF 10 százalékkal csökkenti a fájlméretet. Lenyűgöző eredmények!

Az utolsó hősünk lepton, egy másik nyílt forráskódú formátum, amelyet a Dropbox fejlesztők nagyvonalúak. Lepton JPEG-vel rendelkezik, mi a FLIF PNG-vel. A Lepton a veszteségmentes üzemmódban legfeljebb 22% -kal csökkentheti a JPEG-t, ami azt jelenti, hogy a kódoló nem okoz veszteséget az eredeti JPEG fájlhoz képest. A motorháztető alatt Lepton intelligens technikákat tartalmaz a 8x8 JPEG blokkok tömörítésének intrálására. A nullák és azok írása helyett a Lepton bitképes adatokat kódol a VP8 aritmetikai kódolóval, amely tiszteletben tartja az egyes blokkok körüli kontextust.

A tesztünk nagyon hatékonynak és gyorsnak bizonyult. A parancs úgy nézett ki, mint a következő:

 Lepton eredeti.jpg kimenet.lep

És egy második vagy két eszközzel a .lep fájlt, amely az eredeti szinte egynegyede kisebb volt. Az időigényes Guetzli-hoz képest Lepton lángosan gyors. A Lepton ugyanúgy használhatja a Dropboxot. A formátum lehetővé teszi, hogy csökkenti a tárolási költségek 20-25 százaléka, és mert olyan szellemes, megteheti on-the-fly / dekódolást szekvenciák nélkül nagy hátránya. By the way, a dekódoló parancs egyformán egyszerű, csak meg kell cserélni a két fájlt, és a kapott fájl megegyezik az eredeti JPEG-vel:

 Lepton eredeti.lep kimenet.jpg

Használja a leírt technikákat a felhasználói adatok tárolásának optimalizálásához, vagy a webes projektek betöltési sebességének további javítása érdekében.

Hogyan kapja meg a szoftvert

A bemutatóban leírt minden olyan szoftver nyitott forrás, így szabadon használhatja. Nincs szükség arra, hogy mindent összeállítson a forrásokból, mivel az alábbi eszközök többsége bináris letöltéssel rendelkezik. Itt van a szoftver felállítása és futása.

Megragadja a guetzli bináris itt . Ez a legegyszerűbb dolog. A Zopfli csak adja meg a kódot (építeni a "make" -vel) Github . Azonban lehet, hogy bölcsebb lehet, hogy megkapja azt a Node.js csomagkezelőn keresztül:

  NPM telepítés csomópont-zopfli

Néhány hasznos link a FLIF-hez:

Flif-hub : Referencia végrehajtás, források és ablakok binárisok
Xnview mp : A Cross-platform fotónéző beépített flif támogatással
QT-FLIF-plugin : A mennyország a Linux felhasználók számára
Pofér : A néző és a QuickLook plug-in a macók számára
Lepton : Forráskód és Windows binárisok

Ezt a cikket eredetileg a 316. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon ki kérdezést 316 itt vagy Iratkozzon fel itt .

Kapcsolódó cikkek:

A képfelbontás végső útmutatója
A GLITCH szöveg és képhatások létrehozása CSS-ben
A tervező útmutatója a képek hatékonyabb használatához
4 Essential Image Optimization Tippek

A képek tömörítése: A webes tervezői útmutató

Válassza ki a megfelelő formátumot

Kezdje a kényelmes módszerekkel

Speciális tömörítési technikák

Frissítés a következő gen fájlformátumokra

Hogyan kapja meg a szoftvert

kézikönyv - Most Popular Articles

Hogyan rajzoljunk egy karot

Használja a toll eszközt és textúrákat a Photoshop mélységének hozzáadásához

Tartsa távol a tökéletes verziót absztraktsal

Hozzáad egy hibás hatás a webhelyére

Bevezetés a frontend teszteléshez

Kezdjük a HTML vászonokkal

A MAYA-ban való robbanások szimulálása

Kor egy fénykép a Photoshop CC-ben

Kategóriák