Fotka produktu rozhoduje o nákupu víc než cokoliv jiného. Jenže pokud se načítá pět sekund, zákazník ji nikdy neuvidí. Správná komprese JPEG souborů je přesně ten moment, kdy kvalita a rychlost nemusí stát proti sobě.
Proč e-shopy s obrázky nejčastěji chybují?
Fotograf dodá sérii produktových fotek. Každá má kolem pěti megabajtů, rozlišení 4000 × 3000 pixelů a vypadá skvěle. Majitel e-shopu je nahraje přímo do systému, protože „ať jsou co nejhezčí.“ Výsledkem je, že stránka kategorie načítá dvacet takových fotek najednou a uživatel na mobilu čeká, čeká a nakonec odchází.
Problém není ve fotografovi ani ve kvalitě fotek. Problém je v tom, že nikdo obrázky před nahráním neupravil pro webové použití. Soubor vhodný pro tisk nebo archivaci je naprosto nevhodný pro e-shop.
Co se v JPEG souboru vlastně komprimuje?
JPEG je ztrátový formát. To zní hrozivě, ale v praxi to znamená něco jiného, než si většina lidí představuje. Algoritmus analyzuje fotografii a odstraní z ní informace, které lidské oko stejně nevnímá. Jemné barevné přechody ve stínu, nepatrné variace v jednobarevném pozadí, detaily v místech, kde ostrý fokus přechází v rozostření.
Při rozumném nastavení kvality výsledný obrázek vypadá identicky s originálem, přitom zabírá zlomek původní velikosti. Problém nastane až při příliš agresivní kompresi, kdy se začnou objevovat takzvané artefakty. Jsou to typicky kostičky nebo rozmazané oblasti, nejčastěji kolem ostrých hran a textu. Na produktových fotkách bývají vidět zejména na hranách obalu, logu nebo detailech textury.
Jakou kvalitu nastavit?
Většina nástrojů nabízí nastavení kvality na škále 0 až 100. Čím vyšší číslo, tím větší soubor a lepší kvalita. Čím nižší, tím menší soubor, ale více artefaktů.
Pro produktové fotky na e-shopu funguje hodnota mezi 75 a 85 jako spolehlivé optimum. Soubory jsou výrazně menší než originály a vizuální rozdíl oproti hodnotě 100 je při normálním prohlížení prakticky nepostřehnutelný. Pod hodnotu 70 se u produktových fotek raději nespouštějte. Artefakty se začnou objevovat právě tam, kde zákazník obrázek zkoumá nejpozorněji.
Výjimkou jsou obrázky pro thumbnail nebo miniaturní náhledy v kategoriích. Tam hodnota 65 až 70 stačí a soubory budou ještě menší.
Před kompresí vždy nejdříve zmenšete rozměry
V tom je největší úspora. Fotka v rozlišení 4000 × 3000 pixelů nahraná na e-shop, kde se zobrazí na 800 × 600 pixelech, stáhne data navíc a pak je zahodí. Prohlížeč ji stejně zmenší, ale soubor se celý stáhl.
Správný postup je nejprve obrázek zmenšit na cílové rozměry a teprve pak komprimovat. Tohle pořadí dá vždy lepší výsledek než jen hrát si s nastavením kvality na původně velkém souboru.
Orientační rozměry pro e-shop: hlavní produktový obrázek na detailu produktu se obvykle pohybuje kolem 1200 × 1200 pixelů, náhledy v kategorii kolem 400 × 400 pixelů. Konkrétní čísla závisí na vašem designu, ale tohle je rozumný výchozí bod.
Nástroje, které skutečně usnadní práci
- Squoosh od Googlu je zdarma a funguje přímo v prohlížeči. Nahrajete fotku, nastavíte kvalitu a okamžitě vidíte, jak bude výsledek vypadat vedle originálu. Navíc rovnou ukazuje velikost výsledného souboru. Pro ruční zpracování jednotlivých fotek ideální nástroj.
- Photoshop nabídne přes funkci Exportovat pro web detailní kontrolu. Vedle nastavení kvality JPEG tam rovnou nastavíte cílové rozměry a uvidíte výslednou velikost souboru ještě před uložením. Lightroom pak při hromadném exportu fotek z celého katalogu zvládne nastavit kvalitu a rozměry v jednom kroku pro stovky souborů najednou.
- TinyJPG zvládne hromadné zpracování online a má API pro automatizaci. Pokud pravidelně nahráváte větší množství fotek, vyplatí se tuto možnost prozkoumat.
- Pro WordPress existují pluginy ShortPixel, Imagify nebo Smush. Nově nahraný obrázek automaticky zkomprimují na pozadí bez jakéhokoliv dalšího zásahu. Jednou nastavíte a pak o kompresi nemusíte přemýšlet.
Pozor na bílá pozadí a průhlednost
Produktové fotky na bílém pozadí jsou standard u většiny e-shopů. JPEG si s nimi rozumí dobře, protože velké jednobarevné plochy se komprimují velmi efektivně. Soubory pak bývají překvapivě malé i při vysokém nastavení kvality.
Pozor na jednu věc: JPEG nepodporuje průhlednost. Pokud máte produktovou fotku s průhledným pozadím ve formátu PNG a chcete ji převést do JPEG, průhlednost se nahradí barvou, zpravidla bílou nebo černou. Zkontrolujte, jakou barvu pozadí nástroj použije, aby výsledek na webu vypadal tak, jak chcete.
Kdy JPEG nestačí a co místo něj použít?
JPEG je skvělý na fotografie. Na grafiku s ostrými hranami, textem nebo plochami čistých barev ale naráží. Loga, ikony, infografiky nebo obrázky obsahující čitelný text vycházejí lépe v PNG nebo SVG.
Pokud váš e-shop cílí na výkon a moderní technologie, podívejte se na WebP. Stejnou vizuální kvalitu jako JPEG nabídne při o čtvrtinu menší velikosti souboru. Všechny aktuální prohlížeče ho bez problémů zobrazí a většina nástrojů zmíněných výše WebP také exportuje. Přechod z JPEG na WebP je u produktových fotek jednou z nejefektivnějších optimalizací, které pro e-shop rychle uděláte.
Srovnání různých formátů najdete například zde.
Nastavte si proces jednou a držte se ho
Největší úspora nenastane tím, že jednou zkomprimujete všechny stávající fotky. Nastane tím, že každý nový obrázek, který nahraje na e-shop kdokoliv z vašeho týmu, projde stejným procesem automaticky.
Sepište si jednoduchou interní instrukci: fotky před nahráním zmenšit na konkrétní rozměry, uložit v kvalitě 80, formát JPEG nebo WebP. Dvě věty, které ušetří zákazníkům čekání a vám starosti s pomalým webem.
Obrázky jsou první věc, na kterou se podívat
Když e-shop načítá pomalu a nevíte proč, otevřete PageSpeed Insights a mrkněte, co Google identifikuje jako největší zátěž. V devíti případech z deseti to budou obrázky. Komprese JPEG je jedna z mála optimalizačních taktik, kde výrazný výsledek přijde rychle, bez vývojáře a bez velkých nákladů.
Související příspěvky:
Byty k pronájmu v Praze vybírejte podle lokality. Kde je lepší bydlení pro studenty a kde pro rodiny s dětmi?
Permanentní make-up v Praze vám vykouzlí řada kosmetiček. Víte, jak dlouho takový make-up skutečně vydrží a zda je potřeba jej obnovovat?
Mobilheimy v Hradci Králové a 9 důvodů, proč je pro vás bydlení v mobilním domě vhodné
Je laserové odstranění znamének bezpečné? A lze ho hradit ze zdravotního pojištění?