Optimalizácia JPEG pre web - Ultimate Guide

Kompresia obrázkov sa nachádza v každom nativnom formáte médií. Avšak rozdiel medzi GIF, PNG a JPEG je ako informácie sú komprimované a zobrazené na obrazovke. Existuje toľko tipov pre tvorbu skvelých obrázkových médií uverejnených na webe, a napriek tomu mnohí dizajnéri stále nerozumejú niektorým základom.

V tejto príručke by som chcel zdieľať niekoľko nápadov na správnu kompresiu JPEG. Chcete optimalizovať svoje obrázky, aby ste znížili čas načítania webových stránok, zatiaľ čo udržiavali slušnú úroveň kvality. Je to všetko o hľadaní rovnováhy medzi veľkosťou súborov a zobrazením obrazovky. Neexistuje žiadne dokonalé riešenie pre návrhárov, aby nasledovali. Trvá niekoľko úvodných postupov, ale akonáhle porozumiete kompresii JPEG, v budúcnosti sa stáva oveľa jednoduchšie rozvíjať webové stránky.

Vyhnite sa vždy pri 100%

Takmer nikdy by ste nemali ukladať obrázky vo formáte JPEG v 100% kvalite. Toto bude nie produkovať čo najviac “optimalizované” image. Skutočne sa vypočíta pomocou optimalizačného limitu, ktorý výrazne zvyšuje veľkosť súborov. Dokonca v porovnaní s 90% alebo 95% kvalitou uvidíte výrazný pokles veľkosti súboru.

Väčšinou sa vám odporúča uložiť obrázky oveľa nižšie ako 90% kvality. Ak otvoríte dialógové okno Uložiť pre web vo Photoshope, všimnete si, že ponúkajú predvolené hodnoty, z ktorých si môžete vybrať. Pridal som možné hodnoty JPEG nižšie - všimnite si vlastné konvencie pomenovania.

nízky - 10%
stredná - 30%
vysoký - 60%
Veľmi vysoko - 80%
maximum - 100%

Dokonca aj v programe Adobe Photoshop je kvalita obrazu 60% považovaná za vysokú. Mnoho webových vývojárov zaručí, že 50% - 70% je bezpečný rozsah, na ktorý sa budete držať.

Ako nízka je príliš nízka?

Hodnoty, ktoré si vyberiete pre optimalizáciu, sú úplne závislé od aktuálneho projektu. Budete musieť zvážiť, ktoré typy grafiky budú produkovať najvyššie veľkosti súborov - to sú tie, ktoré skutočne potrebujú kompresiu.

Chcel by som tvrdiť, že pod 30% skutočne vyrastete základnú kvalitu obrazu. Ostatní dizajnéri prisahajú 50% ako “limit” k zníženiu optimálnej hodnoty. Najlepšia rada je však len vyskúšať rôzne nastavenia a zistiť, čo vyzerá najlepšie! Nemôžete pokaziť niekoľko testovacích štúdií, ktoré optimalizujú obrázky JPEG pre web.

Možnosti kompresie

Najskôr by sme mali objasniť dva pojmy "kompresia" a "kvalita", ktoré sú navzájom inverzné. To znamená, že ak uložíte formát JPEG pri 40% kompresii, získate 60% kvalitu (v porovnaní s maximálnou 100% kvalitou bez kompresie).

To sú najzákladnejšie možnosti využitia - a mali by stačiť pri ukladaní pre web. Všeobecní používatelia sa nedostanú do oveľa hlbších prispôsobení. Subsampling sa dostáva do komplikovanejších záležitostí, kde konvertujete obrazy RGB do YCbCr (Luminance, Chroma Blue, Chroma Red).

(Image Source: Kara Monroe)

svietivosť alebo nastavenie jasu sa vždy drží pri najvyššej možnej hodnote v kompresii JPEG. S touto hodnotou jasu na samostatnom kanáli je jednoduchšie optimalizovať jednotlivé farebné hodnoty červenej a modrej farby. Toto je tiež známe ako chroma subsampling. Dizajnéri, ktorí majú záujem o znečistenie svojich rúk, sa radi o tomto kompresnom algoritme budú čítať o niečo viac. Pozrite sa na tento skvelý blogový príspevok na chroma vzorkovanie zamerané najmä na obrázky JPEG.

(Image Source: Derek Hatfield)

Ako zaujímavá bočná poznámka Adobe Photoshop nie vždy používa vzorkovanie na kompresiu. Všetky obrázky uložené prostredníctvom priečinka “Uložiť pre web” dialóg bude používať iba chroma podsúbor pod 50% hodnotou kvality.

Rozdielne webové médiá

Web je tiež plný rôznych druhov obrazových médií. Môžete mať fotografie, ikony, tlačidlá, odznaky a množstvo ďalších grafiky. Je však pozoruhodné, že porovnávanie kvality medzi tlačidlom a fotografiou jednoducho nemá zmysel.

Pri používaní fotografií alebo detailných obrázkov zvážte prepojenie so samostatným komprimovaným súborom JPEG. Potom môžete na svojich stránkach nastaviť miniatúry s vyšším pomerom kompresie a oveľa menšou veľkosťou súborov. Jedinou nevýhodou je, že pre mediálnu galériu budete potrebovať dve sady obrázkov. Vezmite si na vedomie mnoho rôznych grafiky, ktoré ste šité po celej webovej stránke a zvážte optimalizačné techniky pre každého jednotlivo.

Plánovanie grafického modelu

Chcete mať organizovaný súborový systém, ktorý je dostatočne jednoduchý na to, aby sa prebral. Niektorí správcovia webových stránok sa rozhodnú hostiť svoje fotografie inde na webe - napríklad Flickr alebo Picasa. Napriek tomu však budete chcieť použiť niektorý kompresný nástroj na zníženie veľkosti obrázkov, ale ich zobrazovanie na vašich stránkach sa bude líšiť. Platí to najmä pre populárny vzostup mobilných zariadení s prístupom na internet.

Našiel som zaujímavý článok, ktorý diskutuje kódovanie JPEG vo formáte JavaScript, čo by sa stalo v kóde frontend. Nie je veľký prínos pre vysokokvalitné obrazové galérie, ale pre návštevníkov mobilných telefónov sa môže oholiť čas načítania. Bolo by tiež užitočnou technikou, ak sa budú horúce obrázky zobrazovať alebo dynamicky znova orezávať miniatúry.

Ďalším fantastickým nástrojom na kontrolu je Yahoo! Smush.it. Je to webová aplikácia založená na prehliadači, kde môžete nahrať obrázok a Smush.it odstráni všetky nepotrebné extra bajty na optimalizáciu veľkosti súboru. Je to 100% bezstratové, čo znamená, že kvalita obrazu sa vôbec nezhorší. A ešte lepšie môžete dávkové obrázky nahrať z priamych adries URL, ak ich hosťujete na svojich webových stránkach alebo na serveri tretej strany.

Ďalšie nástroje

Existuje dostatok softvéru, ktorý sa pokúsi o manipuláciu s obrázkami. Akékoľvek ďalšie bajty, ktoré môžete oholiť z každej veľkosti súboru, sú rozhodujúce. Nie je tam veľa softvéru, ale dostupné možnosti sú úžasné.

IrfanView

Tento bezplatný softvér pre systém Windows umožňuje zobraziť a optimalizovať akúkoľvek sadu veľkých obrázkov. Obzvlášť sa mi páči tento softvér, pretože podporuje dávkovú konverziu z obrázkov vo viacerých adresároch. Môžete použiť rovnaké funkcie na stovkách obrázkov JPEG automaticky.

Čo je ešte lepšie, je podpora doplnkov od vývojárov tretích strán. Jedným z takýchto príkladov je RIOT (Radical Image Optimization Tool). Tento doplnok pracuje pre iné podobné grafické editory s otvoreným zdrojovým kódom, ako napríklad GIMP. Ponúka dvojité zobrazenie, kde môžete manuálne upraviť parametre kompresie pre každý z vašich obrázkov.

Softvérová podpora je skvelá a funkcie RIOT sú veľmi jednoduché. Spolu s kompresiou obrázkov máte prístup aj k odstráneniu ďalších metadát, ako sú EXIF a Adobe XMP. Tieto extra bity dát môžu byť pridané len do vašej celkovej veľkosti súborov a sú zriedka potrebné.

ImageOptim pre Mac

Ak používate OS X a potrebujete silnú aplikáciu na kompresiu, nepozerajte sa ďalej. ImageOptim je výkonný nástroj na kompresiu obrázkov pre web - niekedy dokonca lepší ako Photoshop.

Celá aplikácia podporuje funkcie drag-and-drop, takže je ľahké optimalizovať veľké množiny obrázkov. Podobne môžete spustiť príkazy priamo z terminálov a inštalačných skriptov. Viac informácií a technickej podpory nájdete na stránke kódov Google.

Vyskytli sa niektoré menšie problémy s najnovším 1.3.3 stabilným uvoľnením pri vykresľovaní pixelovaných obrázkov JPEG v operácii. Skúste skontrolovať všetky optimalizované obrázky v 4 hlavných prehliadačoch - Chrome, Safari, Firefox a Opera (a možno i IE). Ak niečo vyzerá naklonené, môžete skúsiť sťahovať ImageOptim 1.3.0, ktorý konvertuje bitový čistič.

Užitočné zdroje

JPEG 101: Príručka crash course na JPEG
Správne nastavenia kompresie na uloženie obrázkov JPG pre WordPress
Chytré techniky optimalizácie JPEG
Ako optimalizovať obrázky JPEG pre webové stránky
Všetko, čo potrebujete vedieť o kompresii obrázkov

záver

Kompresia JPEG je zložitá, pretože potrebujete nájsť správnu rovnováhu medzi kvalitou a obsahom. Aj keď sa zvyšujú naše moderné rýchlosti pripojenia na internet, je stále potrebné znížiť veľkosť webových stránok. Nové rámce ako jQuery a Typekit dokážu dosiahnuť stovky ďalších kilobajtov, dokonca aj na dobre optimalizovanom dizajne.

Musím napriek tomu doporučiť Adobe Photoshop ako môj premiérový softvér na úpravu obrázkov. Existujú ďalšie príklady, ktoré môžu byť lepšie pre proces optimalizácie JPEG. Web dizajnéri sa však môžu dostať aj s menej známymi open source riešeniami. Ak máte podobné triky alebo nápady na kompresiu JPEG, prosím zdieľajte s nami v diskusnej oblasti nižšie.