JPEG Optimizacija za splet - Ultimate Guide

Stiskanje slik je mogoče najti v vseh izvornih oblikah predstavnosti. Vendar je razlika med GIF, PNG in JPEG različica kako informacije so stisnjene in prikazane na zaslonu. Obstaja toliko nasvetov za ustvarjanje odličnih slikovnih medijev, ki so objavljeni na spletu, vendar mnogi oblikovalci še vedno ne razumejo nekaterih temeljev..

V tem priročniku bi rad delil nekaj idej za pravilno JPEG stiskanje. Želite optimizirati svoje slike, da zmanjšate obremenitve spletnih strani in hkrati ohranite dostojno raven kakovosti. Gre za iskanje ravnovesja med velikostjo datotek in prikazom zaslona. Za oblikovalce ni idealne rešitve. Potrebno je nekaj začetne prakse, vendar ko enkrat spoznate JPEG stiskanje, postane v prihodnosti veliko lažje razviti spletne strani.

Izogibajte se vedno varčevanju pri 100%

Sliko JPEG skoraj nikoli ne shranite pri 100% kakovosti. To bo ne proizvajajo najbolj možne “optimiziran” sliko. Dejansko izračuna preko formule za omejitev optimizacije, ki poveča velikost datotek. Tudi v primerjavi z 90% ali 95% kakovostjo boste opazili velik padec velikosti datoteke.

V večini primerov vam priporočamo, da shranite slike, ki so veliko nižje od kakovosti 90%. Če odprete pogovorno okno Shrani za splet v Photoshopu, boste opazili, da ponujajo prednastavljene vrednosti, med katerimi lahko izbirate. Dodal sem možne vrednosti JPEG spodaj - obvestilo o značilnih konvencijah poimenovanja.

• Nizka - 10%
• Srednje - 30%
• Visoka - 60%
• Zelo visoko - 80%
• Največ - 100%

Tudi v Adobe Photoshopu je kakovost slike 60% visoka. Mnogi spletni razvijalci bodo jamčili med 50% - 70%, kar je varno območje.

Kako nizka je prenizka?

Vrednosti, ki jih izberete za optimizacijo, so popolnoma odvisne od projekta. Upoštevati boste morali, katere vrste grafike bodo imele največjo velikost datoteke - to so tiste, ki res potrebujejo stiskanje.

Trdim, da pod 30% resnično odrezujete temeljno kakovost slike. Drugi oblikovalci bodo prisegli 50% kot “meja” zmanjšanje optimalne vrednosti. Toda najboljši nasvet je, da preizkusite različne nastavitve in vidite, kaj izgleda najbolje! Z nekaj preizkusnimi raziskavami, ki optimizirajo slike JPEG za splet, ne morete zgrešiti.

Možnosti stiskanja

Najprej moramo razjasniti dva izraza „stiskanje“ in „kakovost“, ki sta obratna. To pomeni, da če shranite JPEG pri 40-odstotni kompresiji, boste dobili kakovost 60% (v primerjavi z največ 100% kakovostjo brez stiskanja).

To so najpomembnejše možnosti, ki jih je mogoče uporabiti - in bi morale biti dovolj pri shranjevanju za splet. Splošni uporabniki ne pridejo v globlje prilagoditve. Podvzorčenje prehaja v bolj zapletene zadeve, kjer slike RGB pretvorite v YCbCr (svetilnost, Chroma Blue, Chroma Red).

(Slika Vir: Kara Monroe)

The svetilnost ali pa je nastavitev svetlosti vedno pri najvišji možni vrednosti v JPEG stiskanju. S to vrednostjo svetlosti na ločenem kanalu je lažje optimizirati posamezne barvne vrednosti rdeče in modre barve. To je znano tudi kot kromirana podvzorčenje. Oblikovalci, ki so zainteresirani za umazane roke, bodo radi prebrali nekaj več o tem algoritmu stiskanja. Oglejte si to odlično objavo v spletnem dnevniku o vzorčenju chroma, ki je posebej osredotočeno na slike JPEG.

(Vir: Derek Hatfield)

Kot zanimivo opombo Adobe Photoshop ne uporablja vedno podvzorčenja za stiskanje. Vse slike, shranjene preko “Shrani za splet” pogovorno okno bo uporabljalo samo podvzorčevanje barve pod vrednostjo kakovosti 50%.

Različni spletni mediji

Splet je poln različnih vrst slikovnih medijev. Imate lahko fotografije, ikone, gumbe, značke in tone drugih grafik. Vendar je opazno, da primerjava kakovosti med gumbom in fotografijo nima smisla.

Pri uporabi fotografij ali podrobnih slik se lahko povežete z ločeno manjšo JPEG datoteko. Nato lahko na svojem spletnem mestu nastavite sličice z višjim razmerjem stiskanja in veliko manjšimi velikostmi datotek. Edina pomanjkljivost je, da boste morali za galerijo medijev zagotoviti dva niza slik. Bodite pozorni na različne grafike, ki ste jih zašili na spletni strani, in razmislite o optimizacijskih tehnikah za vsakega posebej.

Načrtovanje grafičnega modela

Želite imeti organiziran datotečni sistem, ki je dovolj preprost za brskanje. Nekateri spletni skrbniki bodo gostili svoje fotografije drugje na spletu - na primer Flickr ali Picasa. Kljub temu boste še vedno želeli uporabiti nekaj orodij za stiskanje, da zmanjšate velikost slik, toda kako jih prikažete na vašem spletnem mestu, se razlikujejo. To še posebej velja za popularno rast mobilnih naprav z dostopom do interneta.

Našel sem zanimiv članek, ki obravnava kodiranje JavaScripta JPEG, ki bi se zgodilo v kodi vašega frontenda. Kakovostne galerije slik ne prinašajo veliko koristi, lahko pa obrije čas nalaganja za vaše mobilne obiskovalce. Prav tako bi bila koristna tehnika, če bi povezavali slike ali ponovno dinamično kopirali sličice.

Še ena fancy orodje, da preverite, je Yahoo! Smush.it. To je spletna aplikacija, ki temelji na brskalniku in v katero lahko naložite sliko. Smush.it bo odstranil vse nepotrebne dodatne bajtove za optimizacijo velikosti datoteke. To je 100% brez izgube, kar pomeni, da se kakovost slike sploh ne bo poslabšala. Še bolje pa lahko pošiljate slike iz neposrednih URL-jev, če jih gostite na vaši spletni strani ali strežniku tretje stranke.

Dodatna orodja

Obstaja veliko programske opreme, da poskusite v zvezi z manipulacijo slik. Vsi dodatni bajti, ki jih lahko obrijete, so ključni. Ni veliko programske opreme tam zunaj, toda možnosti, ki so na voljo, so neverjetne.

IrfanView

Ta brezplačna programska oprema za Windows omogoča ogled in optimizacijo vseh velikih slik. Še posebej mi je všeč ta programska oprema, ker podpira serije pretvorbo iz slik v več imenikov. Iste funkcije lahko uporabite več kot sto slik JPEG samodejno.

Še boljši pa je podpora za vtičnike drugih razvijalcev. Eden takih primerov je RIOT (orodje za optimiranje radikalnih slik). Ta vtičnik deluje za druge podobne grafične urejevalce odprte kode, kot je GIMP. Ponuja pogled z dvema slikama, kjer lahko ročno prilagodite parametre stiskanja za vsako sliko.

Programska podpora je čudovita in funkcije RIOT so zelo enostavne za uporabo. Poleg stiskanja slik imate dostop tudi do odstranjevanja dodatnih metapodatkov, kot so EXIF ​​in Adobe XMP. Ti dodatni bitni podatki lahko dodate le na vašo skupno datoteko in le redko so potrebni.

ImageOptim za Mac

Če uporabljate OS X in potrebujete zmogljivo aplikacijo za stiskanje, potem ne iščite več. ImageOptim je močno orodje za stiskanje slik za splet - včasih celo bolje kot Photoshop.

Celotna aplikacija podpira funkcijo povleci-in-spusti, zato je preprosto optimizirati velike sklope slik. Podobno lahko izvajate ukaze prav iz Terminala in nastavite ukazne skripte. Za več informacij in tehnično podporo si oglejte Googlovo kodno stran.

Prišlo je do manjših težav z najnovejšo 1.3.3 stabilno izdajo pri upodabljanju slikovnih slik JPEG v operi. Poskusite preveriti vse optimizirane slike v štirih glavnih brskalnikih - Chrome, Safari, Firefox in Opera (in morda IE). Če se vam kaj zdi poševno, lahko poskusite prenesti ImageOptim 1.3.0, ki pretvarja malo čistejše.

Koristni viri

• JPEG 101: Vodnik po hitrem tečaju za JPEG
• Pravice nastavitev stiskanja za shranjevanje slik JPG za WordPress
• Pametne tehnike optimizacije JPEG
• Kako optimizirati slike JPEG za spletne strani
• Vse, kar morate vedeti o stiskanju slik

Zaključek

Stiskanje JPEG je zapleteno, saj morate najti ustrezno ravnovesje med kakovostjo in vsebino. Čeprav se naše sodobne hitrosti internetne povezave povečujejo, je še vedno treba zmanjšati velikost spletnih strani. Novi okviri, kot so jQuery in Typekit, se lahko dotaknejo več sto kilobajtov, tudi pri dobro optimiziranem dizajnu..

Še vedno moram priporočiti Adobe Photoshop kot svojo premierno programsko opremo za urejanje slik. Obstajajo tudi drugi primeri, ki so morda boljši za postopek optimizacije JPEG. Toda spletni oblikovalci lahko dobijo še manj znane odprtokodne rešitve. Če imate podobne trike ali ideje o JPEG stiskanju, prosimo, da delite z nami v spodnjem razpravnem prostoru.