Kako stisniti slike: Vodnik spletnega oblikovalca

Povprečna hitrost sodobne internetne povezave bi se spletnim mojstrom v preteklosti zdela zelo futuristična. Že v zgodnjih dneh spleta je bila količina prenesenih podatkov ključnega pomena, tako časovno kot stroškovno, zato so vsi, ki so sodelovali pri spletnem gostovanju, poskušali slike zmanjšati.

Ironično je, da problem danes ni izginil. Vsakič, ko obiščete skriptno težko spletno mesto (na primer glavne svetovne novice), pogosto povleče ducat megabajtov kode JavaScript, slik, videoposnetkov in še česa. Morda je še vedno boleče počasen in za nekatere uporabnike mobilnih podatkov celo stane precej centa (to ne bi smelo predstavljati težav, če uporabljate dostojno graditelj spletnih strani in dobro spletno gostovanje naj vas pazi).



V tej vadnici bomo ugotovili, kako lahko zmanjšate bitne datoteke za splet. Dokler uporablja dobre stare formate PNG in JPEG (glej več o slikovne datoteke tukaj in shranite datoteke na desni shranjevanje v oblaku bomo videli tudi, kako jih lahko z nekaj vročih naprav zmanjšamo, ne da bi ogrozili kakovost odprtokodni projekti . Na koncu bomo imeli bistveno manjše datoteke, ki bodo še vedno videti dobro, vendar potrebujejo manj časa in podatkov za upodabljanje v spletnih brskalnikih uporabnikov.



Preberite, če se želite poglobiti v podrobnosti. Najprej kratka opomba o programski opremi. Vsa tu omenjena orodja so odprtokodna - za vodnik pojdite na dno kako priti do programske opreme potrebujete.

Izberite pravo obliko

Morda se sliši nepomembno, če še vedno posegamo po velikosti datoteke, vendar je dovolj primerov, ko je slika preveč masivna brez kakršnega koli namena ali pa izgleda kljub majhnosti. Če se želite izogniti takim napakam, izberite obliko za pametno shranjevanje ali pretvorbo slike. Uporaba JPEG pomeni razbijanje slike na ploščice velikosti 8x8 slikovnih pik, kjer se vsaka ploščica stisne. Raven stiskanja je odvisna od uporabnika (to je tisti drsnik, ko shranite sliko), vendar običajno JPEG omogoča povečanje velikosti datoteke 10: 1 s sprejemljivo izgubo kakovosti.



Zaznavna razlika med datotekami JPEG, ustvarjenimi z visokim (80–100) in nizkim (40–60) razmerjem stiskanja, je za fotografske slike minimalna, zelo opazna pa pri stvareh, kot so digitalna umetniška dela, ikone in posnetki zaslona. Zato je priporočljivo, da za fotografije izberete JPEG, za druge vrste bitnih slik pa uporabite nekaj drugega.

kako 3d besedilo v

PNG je ena najprimernejših oblik za mrežno grafiko (pravzaprav to pomeni njegova okrajšava). Medtem ko je oblika JPEG vedno z izgubo (tudi s kakovostjo, nastavljeno na 100), je oblika PNG lahko z izgubo ali ne. Še več, tudi kadar je, stisne podatke tako, da zmanjša število barv, uporabljenih na sliki, tako da je rezultat navadno še vedno svež in jasen. Torej izberite PNG za upodabljanje posnetkov zaslona ali katere koli druge slike s trdnim polnilom.

Začnite s priročnimi metodami

Imagine temelji na Electronu in ponuja prijazen vmesnik za obdelavo več slik hkrati



Imagine temelji na Electronu in ponuja prijazen vmesnik za obdelavo več slik hkrati

Optimizacija bitnih datotek je možna s številnimi brezplačnimi orodji, zato se vam ni treba zanašati na polnopravni urejevalnik slik. Predstavljajte si, da je ena takih aplikacij in je neverjetno enostavna za uporabo. Samo sliko (ali kup slik) povlecite čez okno Imagine in z majhnimi drsniki prilagodite razmerje stiskanja.

Predstavljajte si, da deluje z datotekami JPEG, PNG in WebP in je idealen za kodiranje z izgubo. Največja prednost je, da je orodje interaktivno; takoj vam pokaže, kako bo slika videti s trenutnimi nastavitvami in prikaže predlagano velikost datoteke. Predstavljajte si, da se odlično obnese za serijsko obdelavo - vsaj po potrebi lahko shrani vse odprte slike hkrati.

Ni treba posebej poudarjati, da obstaja na desetine, če ne celo na stotine drugih optimizatorjev JPEG in PNG, vključno z nekaterimi priročnimi spletnimi storitvami (na primer TinyJPG ). Toda še ne hitite - v rokavu imamo nekaj boljšega.

Napredne tehnike stiskanja

Za JPEG smo uporabili testno fotografijo slamnika na zamegljenem ozadju; Guetzli je zmanjšal velikost datoteke za 33 odstotkov, Lepton pa za dodatnih 23 odstotkov

Za JPEG smo uporabili testno fotografijo slamnika na zamegljenem ozadju; Guetzli je zmanjšal velikost datoteke za 33 odstotkov, Lepton pa za dodatnih 23 odstotkov

Na prvi pogled se zdi, da iz izgubljenih velikosti datotek JPEG ne moremo zagriziti veliko več, kar lahko takoj dokažemo z jalovimi poskusi nadaljnjega arhiviranja slik z ZIP-om ali katero koli drugo tehniko stiskanja. Tu pa prihaja Guetzli, pametni švicarski piškotek in izpopolnjen zaznavni kodirnik za JPEG.

Guetzli s povečanjem gostote stiskanja v povprečju zmanjša JPEG za 20 do 30 odstotkov. Skrivnost je v tem, da se algoritem zaveda, kako ljudje dojemajo to, kar vidijo, zato dobljena slika še vedno izgleda očem. Guetzli je orodje ukazne vrstice za več platform, ki uporablja naslednjo sintakso:

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

Izvirna slika je lahko PNG ali JPEG, izhod pa je vedno JPEG. Zato lahko s pomočjo Guetzlija pretvorite PNG v JPEG, saj ima vrhunsko stiskanje. Kakovost bi morala pasti med 0-100. Guetzli je neverjetno težka programska oprema; porabi skoraj 300 MB pomnilnika na 1 milijona slikovnih pik in tudi veliko procesorske moči. Upamo, da vaši super optimizirani JPEG-ji ne bodo spodbudili globalnega segrevanja ...

Prenosna mrežna grafika je drugačna zgodba, če je bila zasnovana za kodiranje slik brez izgub. Ko shranite sliko kot PNG v urejevalniku slik, kot je GIMP, imate drsnik z razmerjem stiskanja z vrednostmi od 0 do 9. Tu 0 pomeni, da ni stiskanja in slika tehta, kot da bi bila shranjena kot TIFF. Nasprotno pa 9 odstrani večino nepotrebnih barvnih informacij in povzroči datoteko, ki je 15-20 krat manjša od TIFF.

Tokrat bomo poskušali že tako majhno datoteko PNG (z razmerjem 9) še zmanjšati. V ta namen bomo uporabili Zopfli, drugo odprtokodno orodje, ki ima spet korenine v Google Labs. Zopfli je visokokakovosten kompresor za deflacijo, Gzip in zlib kodiranje podatkov.

Zanimiv del je, da Zopfli vsebuje dva kodirnika v enem svežnju: binarni program za splošno uporabo in namensko orodje 'zopflipng'. Slednje je točno tisto, kar potrebujemo! Zopflipng je kodirnik, ki temelji na deflaciji, z določenimi algoritmi, ki so podprti iz oblike WebP. Dovolj pametno je, da samodejno izberete najboljšo strategijo z uporabo kod za skeniranje in odstranjevanjem različnih nepotrebnih kosov znotraj PNG. Uporabite ga s to preprosto sintakso:

zopflipng original_png output_png

Zopflipng lahko delo še bolje opravi z naslednjimi izrecnimi možnostmi:

zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent original_png output_png

Cena, ki jo plačate, je enaka kot pri Guetzliju: orodje traja veliko časa za obdelavo slike, še posebej, če je velika. Več kot ponovitev uporabite, dlje bo trajalo, 500 pa je razumno število. Zopfli povečuje velikost datoteke med 8 in 20 odstotki, kar je zelo dobro za vizualno popolne slike. Na kratko je za posnetke zaslona običajno pridobiti 8 odstotkov, medtem ko je pri fotografijah mogoče 20 odstotkov (kadar jih morate shraniti kot PNG).

Nadgradite na datoteke naslednje generacije

Testna slika PNG je bila običajna slika 1920x1080; posledično stiskanje z Zopflipngom in nato FLIF pridobil 14 odstotkov, ne da bi zmanjšal število barv

Testna slika PNG je bila običajna slika 1920x1080; posledično stiskanje z Zopflipngom in nato FLIF pridobil 14 odstotkov, ne da bi zmanjšal število barv

Formalno ta del presega obseg PNG in JPEG, vendar je zelo praktičen, saj lahko pretvorbo datotek organizirate sproti. Tu mislimo na uporabo alternativnih in novih formatov slik, ki presegajo najboljše industrijske standarde (beri WebP).

Eden je FLIF, nova oblika slike brez izgub, ki temelji na metodi stiskanja MANIAC (meta-prilagodljivo celoštevilčno aritmetično kodiranje), ki lahko v razmerju stiskanja preseže PNG, FFV1, WebP brez izgub, BPG brez izgub in JPEG 2000. FLIF je na voljo za vse platforme in nekateri pregledovalniki slik ga že podpirajo, vendar ga čaka še dolga pot, da doseže mainstream. Trenutno je smiselno uporabiti FLIF za shranjevanje ali na strani strežnika. Lahko deluje kot učinkovita oblika arhiviranja. Kodo boste morali zajeti s strani projekta GitHub in jo sestaviti. Ko enkrat flif binarno nameščen, uporabite naslednji ukaz za kodiranje slike PNG:

flif -e original_png output_flif

Zamenjati -je s -d in datoteke postavite v obratnem vrstnem redu, da sliko 'stisnete' nazaj v PNG. Kar zadeva orodja, trenutno obstajajo komponenta FLIF WIC API za Windows, vtičnik Qt FlIF za Linux in pregledovalnik slik Phew ter vtičnik QuickLook za macOS (za podrobnosti glejte razdelek s povezavami). V primerjavi s sliko, ki jo je prej mučil Zopflipng, FLIF zmanjša svojo velikost datoteke še za približno 10 odstotkov. Impresivni rezultati!

Naš zadnji junak je Lepton, še ena odprtokodna oblika, ki so jo izdatno objavili razvijalci Dropbox. Lepton z JPEG počne tisto, kar FLIF počne s PNG. Lepton lahko v načinu brez izgub zmanjša JPEG-je do 22 odstotkov, kar pomeni, da dajalnik ne povzroča izgube kakovosti v primerjavi z izvirno datoteko JPEG. Lepton pod pokrovom vključuje pametne tehnike stiskanja teh blokov 8x8 JPEG. Namesto da zapisuje ničle in enote, Lepton kodira bitne podatke z uporabo aritmetičnega kodirnika VP8, ki spoštuje kontekst okoli vsakega bloka.

Naš test je dokazal, da je Lepton zelo učinkovit in hiter. Ukaz je bil videti takole:

lepton original.jpg output.lep

In v sekundi ali dveh je orodje ustvarilo datoteko .lep, ki je bila manjša za skoraj četrtino izvirnika. V primerjavi z zamudnim Guetzlijem je Lepton izjemno hiter. Leptona lahko uporabljate na enak način kot Dropbox. Format vam omogoča, da znižate stroške shranjevanja za 20 do 25 odstotkov, in ker je tako hiter, lahko med seboj izvajate zaporedja kodiranja / dekodiranja brez večjih pomanjkljivosti. Mimogrede, ukaz za dekodiranje je enako preprost, le dve datoteki je treba zamenjati in nastala datoteka je enaka prvotni JPEG:

lepton original.lep output.jpg

Uporabite opisane tehnike za optimizacijo shranjevanja uporabniških podatkov ali nadaljnje izboljšanje hitrosti nalaganja spletnih projektov.

Kako do programske opreme

Vsaka programska oprema, opisana v tej vadnici, je odprtokodna, zato jo lahko uporabljate prosto. Ni se treba truditi, da bi vse sestavili iz virov, saj ima večina spodnjih orodij binarne prenose. Tu je opisano, kako zagnati in zagnati programsko opremo.

Zgrabi binarni Guetzli tukaj . To je najlažje narediti. Zopfli daje kodo (sestavi jo z 'make') samo na GitHub . Vendar je morda pametneje, da ga dobite prek upravitelja paketov node.js:

npm install node-zopfli

Nekaj ​​koristnih povezav za FLIF:

  • FLIF-vozlišče : Referenčna izvedba, viri in binarne datoteke Windows
  • XnView MP : Pregledovalnik fotografij z več platformami z vgrajeno podporo za FLIF
  • qt-flif-plugin : Nebesa za uporabnike Linuxa
  • Fuj : Pregledovalnik in vtičnik QuickLook za macOS
  • Lepton : Izvorna koda in binarni programi Windows

Ta članek je bil prvotno objavljen v številki 316 z dne mreža , najbolje prodajana revija na svetu za spletne oblikovalce in razvijalce. Kupite številko 316 tukaj ali naročite se tukaj .

Povezani članki: