JPEG Optimizacija za web - Ultimate Guide

Kompresija slike nalazi se u svim izvornim medijskim formatima. Međutim, razlika je između GIF, PNG i JPEG kako informacije se komprimiraju i prikazuju na zaslonu. Postoji toliko mnogo savjeta za pisanje sjajnih slikovnih medija koji su objavljeni na webu, a ipak mnogi dizajneri još uvijek ne razumiju neke osnove.

U ovom vodiču želim podijeliti nekoliko ideja za ispravnu JPEG kompresiju. Želite optimizirati slike kako biste smanjili vrijeme učitavanja web-stranica, a istovremeno zadržali pristojnu razinu kvalitete. Sve je u pronalaženju ravnoteže između veličine datoteka i prikaza zaslona. Ne postoji savršeno rješenje za dizajnere. Potrebna je početna praksa, ali kada shvatite JPEG kompresiju, postaje mnogo lakše razviti web-lokacije u budućnosti.

Izbjegavajte uvijek uštedu na 100%

Gotovo nikada ne biste trebali spremati svoje JPEG slike s 100% kvalitete. Ovo će ne proizvesti što je moguće više “optimizirano” slika. To zapravo izračunava kroz optimizaciju ograničenje formula koja povećava vaše datoteke veličine exorbitantly. Čak iu usporedbi s 90% ili 95% kvalitete vidjet ćete značajan pad veličine datoteke.

U većini slučajeva preporuča se spremanje slika znatno manje od 90% kvalitete. Ako otvorite dijaloški okvir Spremi za web u programu Photoshop, primijetit ćete da nude unaprijed postavljene vrijednosti koje možete odabrati. Dodao sam moguće JPEG vrijednosti ispod - primijetite konvencionalne nazive.

• nizak - 10%
• Srednji - 30%
• visok - 60%
• Vrlo visoko - 80%
• Maksimum - 100%

Čak iu Adobe Photoshopu 60% kvalitete slike smatra se "visokom". Mnogi web-programeri jamče između 50% - 70% sigurnog raspona s kojim se možete pridržavati.

Koliko je niska?

Vrijednosti koje odaberete za optimizaciju u potpunosti ovise o konkretnom projektu. Morat ćete razmisliti koje će vrste grafike donijeti najviše veličine datoteka - to su one koje stvarno trebaju kompresiju.

Rekao bih da ispod 30% stvarno odsijecete temeljnu kvalitetu slike. Ostali dizajneri će se zakleti 50% kao “ograničiti” smanjiti optimalnu vrijednost. Ali najbolji savjet je da isprobate različite postavke i vidite što izgleda najbolje! Ne možete pogriješiti s nekoliko testova koji optimiziraju JPEG slike za web.

Opcije kompresije

Najprije bismo trebali pojasniti dva termina 'kompresija' i 'kvaliteta' koji su obrnuti jedan od drugog. To znači da ako sačuvate JPEG sa 40% kompresije, dobit ćete 60% kvalitete (u usporedbi s maksimalno 100% kvalitete bez kompresije).

To su najosnovnije opcije za korištenje - i trebale bi biti dovoljne za spremanje na web. Opći korisnici ne ulaze u dublje prilagodbe. Uzorkovanje se pretvara u složenije stvari u kojima konvertirate RGB slike u YCbCr (osvjetljenje, Chroma Blue, Chroma Red).

(Izvor slike: Kara Monroe)

osvjetljenje ili se postavka svjetline uvijek drži na najvišoj mogućoj vrijednosti u JPEG kompresiji. S ovom vrijednošću svjetline na odvojenom kanalu lakše je optimizirati pojedinačne vrijednosti boja crvene i plave. To je također poznato kao chroma subsampling. Dizajneri zainteresirani za prljanje svojih ruku će voljeti čitati malo više o ovom algoritmu kompresije. Pogledajte ovaj sjajni post na blogu o uzorkovanju chroma koji je posebno usmjeren na JPEG slike.

(Izvor slike: Derek Hatfield)

Kao zanimljiva strana Adobe Photoshop ne koristi uvijek poduzorkovanje za kompresiju. Sve slike spremljene putem “Spremi za web” dijalog će koristiti samo uzorkovanje chroma ispod vrijednosti kvalitete 50%.

Različiti web mediji

Web je također pun različitih vrsta slikovnih medija. Možete imati fotografije, ikone, gumbe, značke i tone druge grafike. No, primjetno je da uspoređivanje kvalitete između gumba i fotografije nema smisla.

Kada koristite fotografije ili detaljne slike, razmislite o povezivanju na zasebnu manje komprimiranu JPEG datoteku. Tada možete postaviti sličice na web-lokaciji s većim stupnjem kompresije i mnogo manjim veličinama datoteka. Jedini nedostatak je da ćete morati pružiti dva seta slika za medijsku galeriju. Uzmite u obzir mnoge različite grafike koje ste ušivene kroz web stranicu i razmislite o tehnikama optimizacije za svaku pojedinačno.

Planiranje grafičkog modela

Želite imati organizirani sustav datoteka koji je jednostavan za pregledavanje. Neki webmasteri će odlučiti ugostiti svoje fotografije drugdje na webu - kao što su Flickr ili Picasa. Ipak, i dalje želite koristiti neki alat za kompresiju kako biste smanjili veličinu slike, ali kako ćete ih prikazati na web-lokaciji razlikovat će se. To se posebno odnosi na popularni porast broja mobilnih uređaja s pristupom internetu.

Pronašao sam zanimljiv članak u kojem se raspravlja o JavaScript JPEG kodiranju koje bi se dogodilo u vašem frontend kodu. Visokokvalitetnim galerijama slika nema mnogo koristi, ali može obrijati vremena učitavanja za mobilne posjetitelje. To bi također bila korisna tehnika pri povezivanju slika ili dinamičnom ponovnom rezanju minijatura.

Još jedan zgodan alat za provjeru je Yahoo! Smush.it. To je web-aplikacija temeljena na pregledniku gdje možete učitati sliku, a Smush.it će ukloniti sve nepotrebne dodatne bajtove kako bi optimizirao veličinu datoteke. To je 100% bez gubitaka, što znači da se kvaliteta slike uopće neće degradirati. A još bolje možete ispisivati ​​slike iz izravnih URL-ova ako ih imate na vašoj web-lokaciji ili poslužitelju treće strane.

Dodatni alati

Postoji mnogo softvera koje možete isprobati u pogledu manipulacije slikama. Bilo koji dodatni bajt koji možete obrijati s veličine svake datoteke je ključan. Nema puno softvera vani, ali opcije koje su dostupne su nevjerojatne.

IrfanView

Ovaj besplatni softver za sustav Windows omogućuje pregled i optimizaciju bilo kojeg skupa velikih slika. Posebno mi se sviđa ovaj softver, jer podržava serije pretvorbe iz slika u više direktorija. Iste funkcije možete primijeniti na stotine JPEG slika automatski.

Što je još bolje, podrška za dodatke drugih proizvođača. Jedan takav primjer je RIOT (alat za optimizaciju radikalne slike). Ovaj dodatak radi za druge slične grafičke uređivače otvorenog koda kao što je GIMP. Nudi prikaz dvostruke slike gdje možete ručno prilagoditi parametre kompresije za svaku od svojih slika.

Softverska podrška je divna i RIOT značajke su vrlo jednostavne za korištenje. Uz kompresiju slika također imate pristup uklanjanju dodatnih metapodataka kao što su EXIF ​​i Adobe XMP. Ovi dodatni bitovi podataka mogu se dodati samo na vašu ukupnu datoteku i rijetko su potrebni.

ImageOptim za Mac

Ako koristite OS X i trebate snažnu aplikaciju za kompresiju, ne tražite dalje. ImageOptim je moćan alat za komprimiranje slika za web - ponekad čak i bolje od Photoshopa.

Cijela aplikacija podržava povlačenje i ispuštanje tako da je lako optimizirati velike skupove slika. Na sličan način možete izvesti naredbe unutar Terminala i postaviti skripte ljuske. Za više informacija i tehničku podršku pogledajte Google kodnu stranicu.

Bilo je nekih manjih problema s najnovijim 1.3.3 stabilnim izdanjem u izradi pikseliranih JPEG slika u Operi. Pokušajte provjeriti sve svoje optimizirane slike u četiri glavna preglednika - Chrome, Safari, Firefox i Opera (a možda i IE). Ako nešto izgleda iskrivljeno, možete pokušati preuzeti ImageOptim 1.3.0 koji pretvara nešto čišće.

Korisni resursi

• JPEG 101: Vodič za ubrzani tečaj u JPEG-u
• Pravo postavke kompresije za spremanje JPG slika za WordPress
• Pametne tehnike optimizacije JPEG-a
• Kako optimizirati JPEG slike za web stranice
• Sve što trebate znati o kompresiji slike

Zaključak

JPEG kompresija je zahtjevna jer trebate pronaći odgovarajuću ravnotežu između kvalitete i sadržaja. Čak i kada se naše moderne brzine internetske veze povećavaju, još uvijek postoji potreba za smanjenjem veličine web-stranica. Novi okviri poput jQuery i Typekit mogu se postaviti na stotine dodatnih kilobajta, čak i na dobro optimiziranom dizajnu.

Još uvijek moram preporučiti Adobe Photoshop kao moj premijerni softver za uređivanje slika. Postoje i drugi primjeri koji su možda bolji za proces optimizacije JPEG-a. No, web dizajneri mogu dobiti još manje poznata open source rješenja. Ako imate slične trikove ili ideje o JPEG kompresiji, podijelite s nama u području za raspravu u nastavku.