Optimalizace JPEG pro Web - Ultimate Guide

Komprese obrazu se nachází v každém nativním formátu médií. Nicméně rozdíl mezi GIF, PNG a JPEG je jak informace jsou komprimovány a zobrazeny na obrazovce. Existuje mnoho tipů pro skládání skvělých obrazových médií publikovaných na webu, a přesto mnozí návrháři stále nerozumí některým základům.

V této příručce bych se rád podělil o několik nápadů pro správnou kompresi JPEG. Chcete optimalizovat své obrázky, aby se snížila doba načítání webových stránek a zároveň se udržovala slušná úroveň kvality. Je to všechno o nalezení rovnováhy mezi velikostmi souborů a zobrazení obrazovky. Neexistuje žádné dokonalé řešení pro designéry následovat. To trvá nějakou počáteční praxi, ale jakmile pochopíte kompresi JPEG se stává mnohem snazší vývoj webových stránek v budoucnu.

Vyhnout se vždy ukládání na 100%

Obrázky ve formátu JPEG byste neměli téměř nikdy ukládat ve 100% kvalitě. Tohle bude ne co nejvíce “optimalizováno” obraz. Je to vlastně vypočítává prostřednictvím optimalizace limit vzorec, který zvyšuje velikost souborů přemrštěně. I ve srovnání s 90% nebo 95% kvalitou uvidíte výrazný pokles velikosti souboru.

Většinou se doporučuje ukládat snímky mnohem méně než 90% kvality. Pokud otevřete dialogové okno Uložit pro web ve Photoshopu, zjistíte, že nabízejí přednastavené hodnoty, ze kterých si můžete vybrat. Přidal jsem níže uvedené možné hodnoty JPEG - všimněte si vlastních konvencí pojmenování.

• Nízký - 10%
• Střední - 30%
• Vysoký - 60%
• Velmi vysoko - 80%
• Maximum - 100%

Dokonce i v Adobe Photoshopu je 60% kvalita obrazu považována za 'vysokou'. Mnoho webových vývojářů bude ručit mezi 50% - 70% je bezpečný rozsah držet se.

Jak nízká je příliš nízká?

Hodnoty, které zvolíte pro optimalizaci, jsou zcela závislé na projektu. Budete muset zvážit, které typy grafik budou na výstupu nejvyšší velikosti souborů - to jsou ty, které opravdu potřebují kompresi.

Řekl bych, že pod 30% skutečně odřezáváte základní kvalitu obrazu. Ostatní návrháři budou přísahat 50% jako “omezit” snížení optimální hodnoty. Ale nejlepší rada zde je jen vyzkoušet různá nastavení a zjistit, co vypadá nejlépe! Nemůžete pokazit několik testovacích studií, které optimalizují obrázky JPEG pro web.

Možnosti komprese

Měli bychom nejprve objasnit dva pojmy „komprese“ a „kvalita“, které jsou navzájem opačné. To znamená, že pokud uložíte JPEG při 40% kompresi, získáte 60% kvalitu (ve srovnání s maximálně 100% kvalitou bez komprese).

To jsou nejzákladnější možnosti využití - a měly by stačit při ukládání na web. Obecní uživatelé se nedostanou do mnohem hlubších úprav. Vzorkování se dostává do složitějších záležitostí, kde převádíte obrazy RGB do formátu YCbCr (Luminance, Chroma Blue, Chroma Red).

(Zdroj obrázku: Kara Monroe)

jasu nebo nastavení jasu se vždy udržuje na nejvyšší možné hodnotě v kompresi JPEG. S touto hodnotou jasu na samostatném kanálu je snazší optimalizovat jednotlivé hodnoty barev červené a modré. Toto je také známé jako chroma subsampling. Návrháři se zajímají o to, aby si své špinavé ruce rádi přečetli trochu více o tomto kompresním algoritmu. Podívejte se na tento skvělý blog příspěvek na chroma vzorkování konkrétně zaměřené na obrázky JPEG.

(Zdroj obrázku: Derek Hatfield)

Pozoruhodnou stránkou je, že Adobe Photoshop ne vždy využívá podvzorkování pro kompresi. Jakékoliv obrázky uložené přes “Uložit pro web” dialogové okno bude používat pouze chroma subsampling pod hodnotou 50% kvality.

Odlišná webová média

Web je také plný různých druhů obrazových médií. Můžete mít fotografie, ikony, tlačítka, odznaky a spoustu dalších grafik. Je však pozoruhodné, že porovnání kvality mezi tlačítkem a fotografií nedává smysl.

Při použití fotografií nebo podrobných snímků zvažte propojení se samostatným méně komprimovaným souborem JPEG. Pak můžete na svých stránkách nastavit miniatury s vyšším kompresním poměrem a mnohem menšími velikostmi souborů. Jediná nevýhoda je, že budete muset poskytnout dvě sady obrázků pro galerii médií. Všímejte si mnoha různých grafik, které jste šité na webových stránkách a zvážit optimalizační techniky pro každou z nich individuálně.

Plánování grafického modelu

Chcete mít organizovaný souborový systém, který bude snadno prohledávat. Někteří webmasteři se rozhodnou hostit své fotografie jinde na webu - například Flickr nebo Picasa. Stále však budete chtít použít nějaký kompresní nástroj pro zmenšení velikosti obrázku, ale jak se zobrazují na vašich stránkách, bude se lišit. To platí zejména s populárním nárůstem mobilních zařízení s přístupem na internet.

Našel jsem zajímavý článek, který pojednává o kódování JPEG ve formátu JavaScript, které by se stalo ve vašem kódu frontendu. Vysoce kvalitní galerii obrázků však příliš neprospívá, ale může ušetřit časy načítání pro vaše mobilní návštěvníky. Byla by to také užitečná technika při dynamickém přidávání obrázků nebo opětovném ořezávání miniatur.

Dalším efektním nástrojem pro odhlášení je Yahoo! Smush.it. Jedná se o webovou aplikaci založenou na prohlížeči, do které můžete nahrát obrázek a Smush.it odstraní všechny zbytečné bajty pro optimalizaci velikosti souboru. Je 100% bezeztrátový, což znamená, že kvalita obrazu se vůbec nezhorší. A ještě lépe můžete dávkově nahrávat obrázky z přímých adres URL, pokud je máte na svých webových stránkách nebo na serveru třetích stran.

Další nástroje

Tam je spousta softwaru, aby se pokusili, pokud jde o manipulaci s obrázky. Klíčové jsou všechny bajty, které můžete oholit. Není tam spousta softwaru, ale možnosti, které jsou k dispozici, jsou úžasné.

IrfanView

Tento bezplatný software pro systém Windows umožňuje zobrazit a optimalizovat libovolný soubor velkých obrázků. Obzvláště se mi líbí tento software, protože podporuje dávkovou konverzi z obrázků ve více adresářích. Stejné funkce můžete aplikovat automaticky na stovky obrázků JPEG.

Ještě lepší je podpora pluginů od vývojářů třetích stran. Jedním z takových příkladů je RIOT (Radical Image Optimization Tool). Tento plugin funguje pro jiné podobné open-source grafické editory, jako je GIMP. Nabízí zobrazení dvou obrazů, kde můžete ručně upravit parametry komprese pro každý z vašich snímků.

Softwarová podpora je úžasná a funkce RIOT se velmi snadno používají. Spolu s kompresí obrázků máte také přístup k odstranění dalších metadat, například EXIF ​​a Adobe XMP. Tyto dodatečné bity dat mohou pouze přidat do vaší celkové velikosti souborů a jsou zřídka potřebné.

ImageOptim pro Mac

Pokud používáte OS X a potřebujete výkonnou aplikaci pro kompresi, pak nehledejte žádné další. ImageOptim je mocný nástroj pro kompresi obrázků pro web - někdy dokonce lepší než Photoshop.

Celá aplikace podporuje funkce přetahování, takže je snadné optimalizovat velké sady obrázků. Podobně můžete spouštět příkazy přímo z terminálu a nastavení skriptů shell. Další informace a technickou podporu naleznete na stránce s kódem Google.

Tam byly některé menší problémy s nejnovější 1.3.3 stabilní vydání v renderování pixelated JPEG obrázků v Opeře. Zkuste zkontrolovat všechny své optimalizované obrázky ve 4 hlavních prohlížečích - Chrome, Safari, Firefox a Opera (a možná i IE). Pokud něco vypadá šikmo, můžete zkusit stáhnout ImageOptim 1.3.0, který převádí trochu čistší.

Užitečné zdroje

• JPEG 101: Průvodce pádem na JPEG
• Správná nastavení komprese pro uložení obrázků JPG pro WordPress
• Chytré optimalizační techniky JPEG
• Jak optimalizovat obrázky JPEG pro webové stránky
• Vše, co potřebujete vědět o kompresi obrazu

Závěr

Komprese JPEG je složitá, protože potřebujete najít správnou rovnováhu mezi kvalitou a substancí. I když se naše moderní rychlosti připojení k internetu zvyšují, stále je potřeba zmenšit velikost webových stránek. Nové rámce jako jQuery a Typekit mohou navázat na stovky dalších kilobajtů, dokonce i na dobře optimalizovaném designu.

Stále musím doporučit Adobe Photoshop jako svůj premiérový software pro úpravu obrázků. Pro optimalizační proces JPEG existují další příklady, které mohou být lepší. Weboví designéři se však mohou dostat k ještě méně známým open source řešením. Pokud máte podobné triky nebo nápady týkající se komprese JPEG, sdělte nám je prosím v níže uvedené diskusní oblasti.