Kuvien pakkaaminen: Web Designerin opas

Sep 14, 2025

Miten tehdään

Modernin Internet-yhteyden keskimääräinen nopeus kuulostaa hyvin futuristisesti menneisyyden web-mestareille. Takaisin verkon alkupäivisin, siirrettyjen tietojen määrä oli ratkaiseva, sekä ajan että kustannusten osalta, joten kaikki osallistuivat hosting jotain verkossa yrittivät tehdä kuvia pienempiä.

Ironista kyllä, ongelma ei ole mennyt pois nykyään. Joka kerta kun vierailet käsikirjoitus-raskas verkkosivustolla (kuten Mainstream World News), se vetää usein tusinaa megatavua JavaScript-koodia, kuvia, videoita ja Whatnot. Se voi silti olla tuskallisen hidasta ja jopa maksaa melko pennin joillekin mobiilidatan käyttäjille (tämä ei saisi olla ongelma, jos käytät kunnon Verkkosivuston rakentaja , ja hyvä sivujen ylläpito pitäisi pitää silmällä sitä sinulle).

Tässä opetusohjelmassa selvitämme tavoista, joilla voit ohittaa bittikarttatiedostoja verkossa. Niin kauan kuin se hyödyntää hyviä vanhoja PNG- ja JPEG-formaatteja (katso lisää Kuvatiedostomuodot Tässä ja muista tallentaa tiedostot oikealla pilvivarasto myös), näemme, miten voimme tehdä niistä pienempiä vaarantamatta laatua, käyttämällä jotain kuumaa Avoimen lähdekoodin hankkeet . Lopulta meillä on huomattavasti pienempiä tiedostoja, jotka näyttävät silti hyvältä, mutta vaativat vähemmän aikaa ja tietoja, jotka koskevat käyttäjien selaimissa.

Lue sukeltaa yksityiskohtiin. Ensinnäkin, nopea huomautus ohjelmistosta. Kaikki tässä mainitut työkalut ovat avoimen lähdekoodin - siirry ohjaimen alareunaan Miten saada ohjelmisto tarvitset.

Paras WordPress Portfolio-teemat

Valitse oikea muoto

Se voi kuulostaa triviaalista vielä harhaa tiedostokokoa, mutta on olemassa tarpeeksi esimerkkejä, joissa kuva on liian massiivinen ilman mitään tarkoitusta tai näyttää kauhealta, vaikka se on pieni. Jos haluat välttää tällaisten virheiden, valitse muoto, jolla voit tallentaa tai muuntaa kuvan viisaasti. JPEG: n käyttäminen merkitsee kuvaa 8x8 pikselin laattoihin, joissa jokainen laatta puristetaan. Pakkauksen taso riippuu käyttäjältä (se on se liukusäädintä, kun säästät kuvan), mutta tyypillisesti JPEG mahdollistaa 10: 1 tiedostokokoisen vahvistuksen hyväksyttävällä tavalla.

High (80-100) ja alhaisen (40-60) ja alhaisen (40-60) mukaisen JPEG-tiedostojen välinen havaintoero on vähäinen valokuvauskuvilla, mutta erittäin havaittavissa asioista, kuten digitaalista taidetta, kuvakkeita ja kuvakaappauksia. Siksi on suositeltavaa valita JPEG valokuvista ja mennä jotain muuta muille bittikarttakuvista.

PNG on yksi sopivimmista verkon grafiikan formaateista (itse asiassa sen lyhennevälineet). Vaikka JPEG-muoto on aina häviöllistä (jopa laadusta 100: een), PNG-muoto voi olla joko häviöllinen vai ei. Lisäksi, vaikka se pakkaa tietoja vähentämällä kuvassa käytettyjen väreiden määrää, niin että tulos silti näyttää silti rapealta ja selkeältä. Joten valitse PNG kuvaamalla Screengrabit tai muut kuvat, joilla on kiinteä täyttö.

Aloita kätevällä menetelmillä

Imagine is based on Electron and provides a friendly interface for processing several images at once — Kuvittele perustuu elektroniin ja tarjoaa ystävällisen käyttöliittymän useiden kuvien käsittelyyn kerralla

Bittikarttatiedostojen optimointi on mahdollista, kun joukko freeware-työkaluja, joten sinun ei tarvitse luottaa täysimittaiseen kuvankäsittelyyn. Kuvitus on yksi tällainen sovellus ja se on uskomattoman helppokäyttöinen. Vedä vain kuva (tai kuvien pino) kuvittelun ikkuna ja käytä pieniä liukusäätimiä säätääksesi pakkaussuhteita.

Kuvittele toimii JPEG-, PNG- ja Webp-tiedostoja ja se sopii erinomaisesti häviölliseen koodaukseen. Suurin etu on se, että työkalu on vuorovaikutteinen; Se näyttää heti, miten kuva näyttää nykyisillä asetuksilla ja näyttää ehdotetun tiedostokoon. Kuvittele toimii erinomaisesti eräkäsittelyyn - ainakin se voi tallentaa kaikki avatut kuvat kerralla, jos tarvitset.

Tarpeetonta sanoa, on kymmeniä, ellei satoja muita JPEG- ja PNG-optimointerit, mukaan lukien kätevät verkkopalvelut (kuten Tinyjpg ). Mutta älä kiirettä pois vielä - meillä on jotain parempaa hihassamme.

Kehittyneet pakkaustekniikat

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 — JPEG: lle käytimme testivalokuvaa epäselvällä taustalla; Guetzli pienensi tiedoston koko 33 prosenttia ja Lepton vielä 23 prosenttia

Ensi silmäyksellä näyttää siltä, että emme voi ottaa paljon enemmän puremasta häviöllisestä JPEG-tiedostokokoista, jotain, joka voidaan osoittaa välittömästi turhat yritykset edelleen arkistoida kuvia zip- tai minkä tahansa muun pakkaustekniikan avulla. Mutta täällä tulee Guetzli, älykäs Sveitsin eväste ja hienostunut havaintokooderi JPEG: lle.

Guetzli on keskimääräinen JPEG pienempi 20 - 30 prosenttia lisäämällä pakkaustiheyttään. Salaisuus on se, että algoritmi on tietoinen siitä, miten ihmiset havaitsevat, mitä he näkevät, joten tuloksena oleva kuva näyttää edelleen hyvältä silmään. Guetzli on ristikkäin komentorivityökalu, joka käyttää seuraavaa syntaksia:

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

Alkuperäinen kuva voi olla joko PNG tai JPEG, kun taas lähtö on aina JPEG. Siksi voit käyttää Guetzliä muuntaa PNG JPEG: lle sen huippuluokan pakkauksen ansiosta. Laadun tulee laskea 0-100. Guetzli on uskomattoman resurssien raskas ohjelmisto; Se kuluttaa lähes 300 Mt: n muistia 1 megapikselin ja myös paljon CPU-tehoa. Toivomme, että super-optimoidut jpegit eivät lisää ilmaston lämpenemistä ...

Kannettavat verkko-grafiikka ovat erilainen tarina, kunhan se on suunniteltu häviöttömään kuvakoodaukseen. Kun tallennat kuvan PNG: ksi kuvankäsittelijä, kuten GIMP, sinulla on pakkaussuhteen liukusäädin, jonka arvot ovat 0 - 9. Tässä 0 tarkoittaa mitään pakkausta ja se tekee kuvan painaa kuin se tallennetaan TIFF: ksi. Sitä vastoin 9 nauhaa pois useimmat tarpeettomat väritiedot ja tulokset tiedostoon, joka on 15-20 kertaa pienempi kuin TIFF.

Tällä kertaa yritämme tehdä jo pienen PNG-tiedoston (suhteessa 9) vielä pienemmäksi. Tätä tarkoitusta varten käytämme ZopFli, toinen avoimen lähdekoodin työkalu, joka jälleen on juuret Google Labsissa. Zopfli on laadukas kompressori deflate, Gzip ja Zlib-tietokoodaus.

Mielenkiintoinen osa on se, että Zopfli sisältää kaksi koodausta yhdessä nipussa: yleiskäyttöinen binäärinen ja oma "ZopFlipng" -työkalu. Jälkimmäinen on juuri sitä mitä tarvitsemme! Zopflipng on deflate-pohjainen kooderi, jossa on tiettyjä algoritmeja, jotka on syytetty WEBP-muodossa. Se on tarpeeksi älykkäästi valita automaattisesti paras strategia scanline-koodien avulla ja poistamalla erilaisia tarpeettomia paloja PNG: ssä. Käytä sitä tällä yksinkertaisella syntaksilla:

zopflipng original_png output_png

ZopFlipng voi luultavasti tehdä työtä entistä paremmin seuraavilla nimenomaisilla vaihtoehdoilla:

 zopflipngieraalit = 500 --Filters = 01234mepb --Lossy_8bit --Lossy_Transparent Original_png
Lähtö_png

Maksasi hinta on sama kuin Guetzli: Työkalu vie paljon aikaa käsitellä kuvaa, varsinkin jos se on suuri. Mitä enemmän iteraatioita käytät, sitä kauemmin kestää, mutta 500 on kohtuullinen määrä. ZopFli: n tiedostokoko on 8 - 20 prosenttia, mikä on erittäin hyvä visuaalisesti täydellisiin kuviin. Lyhyesti 8 prosenttia on yleistä kuvakaappauksissa, kun taas 20 prosenttia on mahdollista valokuvilla (kun sinun on tallennettava ne PNG: iin).

Päivitä Next-Gen-tiedostomuodoille

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 — Testi PNG-kuva oli tavallinen 1920x1080-kuvakaappaus; Tämän seurauksena zopflipng ja sitten Flif sai 14 prosenttia vähentämättä värejä

Muodollisesti tämä osa ylittää PNG: n ja JPEG: n soveltamisalan, mutta se on erittäin käytännöllinen, koska voit järjestää tiedoston muuntamisen päälle-lentää. Tarkoitamme täällä käyttää vaihtoehtoisia ja uusia kuvamuotoja, jotka ylittävät parhaat alan standardit (Lue Webp).

Yksi on Flif, uusi häviötön kuvamuoto, joka perustuu maniakkiin (meta-adaptiivinen lähes nolla-integer aritmeettinen koodaus) pakkausmenetelmä, joka voi ylittää PNG, FFV1, Lossless Webp, Lossless BPG ja Lostless JPEG 2000 pakkaussuhteen suhteen. Flif on käytettävissä kaikilla alustoilla ja jotkut kuvan katsojat jo tukevat sitä, mutta sillä on pitkä matka osumaan valtavirtaan. Juuri nyt on järkevää käyttää flif tallennusta tai palvelimen puolelta. Se voi toimia tehokkaana arkistointimuodossa. Sinun täytyy tarttua koodiin projektin Github-sivulta ja koota se. Kun sinulla on flif Binaarinen asennettu, käytä seuraavaa komentoa koodata PNG-kuva:

 Flif -e Original_png lähtö_flif

Korvata -e kanssa --d ja laita tiedostot päinvastaisessa järjestyksessä "Uncompress" kuvasi takaisin PNG: hen. Työkalujen osalta on nyt Flif WIC API -komponentti Windowsissa, Qt Flif Plugin for Linux ja Phew Image Viewer ja QuickLook Plugin for MacOS (katso lisätietoja linkit-osiosta). Verrattuna zopflipngin aiemmin kidutettuun kuvaan, Flif vähentää sen tiedostokokoa edelleen ~ 10 prosenttia. Vaikuttavat tulokset!

Viimeinen sankari on Lepton, toinen avoimen lähdekoodi, jonka Dropboxin kehittäjät julkaisivat. Lepton tekee JPEG: n kanssa, mitä Flif tekee PNG: n kanssa. Lepton voi ohittaa JPEG: itä jopa 22 prosenttiin tappiollisessa tilassa, mikä tarkoittaa, että kooderi ei aiheuta laadun menetystä verrattuna alkuperäiseen JPEG-tiedostoon. Hupun alla lepton tarkoittaa älykkäitä tekniikoita, jotka puristavat nämä 8x8 JPEG-lohkot. Sen sijaan, että kirjoitat nollia ja niitä, Lepton koodaa bittikarttadataa VP8-aritmeettisen kooderin avulla, joka kunnioittaa kontekstia jokaisen lohkon ympärillä.

Testi osoitti leptonia erittäin tehokkaaksi ja nopeasti. Komento näytti seuraavista:

 Lepton Original.jpg Lähtö.Lep

Ja toisessa tai kahdessa työkalu tuotti .lep-tiedoston, joka oli pienempi lähes neljänneksen alkuperäisestä. Verrattuna aikaa vievään Guetzli, Lepton on paskaltaisesti nopea. Voit käyttää Leptonia samalla tavalla Dropbox. Muoto mahdollistaa varastointikustannusten vähentämisen 20-25 prosentilla ja koska se on niin vaivaa, voit tehdä lennon koodaus- / dekoodaussekvenssit ilman suuria haittoja. Muuten dekoodauskomento on yhtä yksinkertainen, sen on vain vaihdettava kaksi tiedostoa ja tuloksena oleva tiedosto on identtinen alkuperäisen JPEG: n kanssa:

 Lepton Original.LEP OUTPUT.JPG

Käytä kuvattuja tekniikoita optimoida käyttäjän tietojen tallennus tai parantaa verkkohankkeiden latausnopeutta.

Miten saada ohjelmisto

Jokainen tässä opetusohjelmassa kuvattu ohjelmisto on avoin lähde, joten voit käyttää sitä vapaasti. Ei ole tarvetta vaivautua kaiken koko lähteistä, koska useimmat alla olevat työkalut ovat binäärisiä latauksia. Näin voit saada ohjelmisto ylös ja käynnissä.

Tartu Guetzli Binary tässä . Se on helpoin asia. Zopfli antaa vain koodille (rakenna se "merkki") Github . Kuitenkin voi olla viisaampi saada se Solmu.js Package Managerin kautta:

  NPM Install Node-Zopfli

Jotkut hyödylliset linkit flif:

Flif-napa : Viite toteutus, lähteet ja Windows-binäärit
XnView MP : Cross-Platform Photo Viewer, jossa on sisäänrakennettu Flif-tuki
QT-Flif-Plugin : Taivas Linux-käyttäjille
Huh huh : Katselija ja Quicklook-laajennus MacOSille
Lepton : Lähdekoodi ja Windows-binäärit

Tämä artikkeli julkaistiin alun perin 316 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 316 täällä tai Tilaa täältä .

Aiheeseen liittyvät artikkelit:

Ultimate opas kuvan tarkkuudelle
Kuinka luoda glitch-tekstiä ja kuvan vaikutuksia CSS: ssä
Suunnittelijan opas käyttämään kuvia tehokkaammin
4 Essential Image Optimointivinkkejä

Kuvien pakkaaminen: Web Designerin opas

Valitse oikea muoto

Aloita kätevällä menetelmillä

Kehittyneet pakkaustekniikat

Päivitä Next-Gen-tiedostomuodoille

Miten saada ohjelmisto

Miten tehdään - Suosituimmat artikkelit

Onko Apple icloud-varastosi täynnä? Näin voit vapauttaa tilaa

Miten pysäyttää lasit sumutus ylös, kun käytät kasvota maskia

Kuinka luoda kerrostettu parallax vaikutus sivustoosi

Rakenna mukautuvia asetteluja ilman mediakyselyjä

Työkuvan naamio taikuutta Houdini

21 tapaa optimoida CSS ja nopeuttaa sivustosi

Aloita monotyypin tulostus

Tee kaksinkertainen valotus Photoshopissa

Luokat