Obrázky v e-mailu se nezobrazují tak spolehlivě jako na webu a to, jestli příjemce uvidí fotku, prázdný rámeček, nebo rozmazané logo, určuje především volba formátu. Prohlížeče dnes zvládají téměř cokoli. E-mailoví klienti jsou naproti tomu konzervativní a každý z nich obrázky zpracovává po svém.
Který formát podporují běžní klienti, kde narazíte na omezení a podle jakého obsahu formát volit? A jaká velikost souboru je optimální? To vše budete na konci tohoto článku vědět.
Proč e-mail funguje jinak než web
Webová stránka se zobrazuje v jednom prohlížeči, který se pravidelně aktualizuje a moderní formáty přijímá rychle. Newsletter se otevírá v desítkách různých programů a aplikací. Některé z nich vycházejí z technologií starých i více než deset let.
Pokud chcete vědět, jak konkrétní klient zachází s určitou funkcí, sáhněte po databázích kompatibility. Jednu z nich představuje třeba tento web, který mapuje podporu HTML funkcí v e-mailových klientech. Pro obrázky z takových přehledů plyne jasný závěr. Starší formáty fungují téměř všude, novější zatím jen částečně.
Přehled 4 formátů a jejich podpory v e-mailových klientech
JPEG pro fotografie a barevné záběry
JPEG je asi nejvíce rozšířeným z obrázkových formátů. Zobrazí ho prakticky každý klient od webových schránek po firemní desktopové programy. Ztrátová komprese si dobře poradí s fotografiemi produktů, lidí i interiérů a při rozumném nastavení drží velikost souboru nízko.
Slabinou JPEG formátu jsou ostré hrany a text. Nápis v obrázku či tenké linky v grafu se při kompresi rozpijí a kolem písmen se objeví šum. JPEG proto nepoužívejte pro loga ani pro bannery s drobným písmem.
PNG pro loga, text a průhlednost
PNG má stejně širokou podporu jako JPEG a umožňuje bezztrátovou kompresi. Hodí se pro loga, ikony, tlačítka a grafiku s textem, kde potřebujete ostré hrany. Ze všech široce podporovaných formátů navíc jen on zvládá plnohodnotnou průhlednost.
S průhledností ovšem opatrně. Řada klientů dnes nabízí tmavý režim, ve kterém tmavé logo na průhledném pozadí splyne s tmavým podkladem schránky. Bezpečnější je přidat kolem loga tenký světlý okraj, případně použít pozadí v barvě, která obstojí v obou režimech.
GIF pro jednoduché animace
GIF podporují téměř všichni klienti a dodnes je jediným spolehlivým způsobem, jak do newsletteru dostat pohyb. Hodí se pro krátké ukázky produktu, odpočet akce či drobnou animaci tlačítka. Některé webové schránky navíc GIF při zpracování mírně upraví a uberou mu část barev. Vyhněte se proto animacím se složitými barevnými přechody.
Klasická desktopová verze Outlooku pro Windows animaci nepřehraje a zobrazí jen první snímek. Ten proto navrhněte tak, aby sám o sobě nesl celé sdělení. Na první snímek patří název akce, cena či výzva, nikoli prázdná úvodní scéna.
WebP zatím jen s opatrností
Formát WebP na webu výrazně šetří data. V e-mailu je jeho situace složitější. Některé webové schránky obrázek převádějí na JPEG či PNG a přijdou přitom o průhlednost, u animovaného WebP pak zůstane jen první snímek. Starší desktopové verze Outlooku obrázek ve WebP nezobrazí vůbec.
Ještě méně vhodný pro e-mail je SVG. Tento vektorový formát, který se na webu běžně používá pro loga a ikony, většina klientů buď nezobrazí, nebo ho z bezpečnostních důvodů odstraní. Logo proto exportujte do PNG ve dvojnásobném rozlišení.
Pro newslettery tedy zatím zůstaňte u JPEG a PNG. Převod do WebP si nechte pro web, kde přináší jasný užitek. Kdy konverze dává smysl a jak ji provést, tomu se věnuje následující článek na téma optimalizace png.
Jak formát vybrat podle obsahu obrázku
Nejjednodušší je rozhodovat podle toho, co obrázek zobrazuje:
| Obsah obrázku | Doporučený formát | Proč |
|---|---|---|
| Fotografie produktu či lidí | JPEG | Malý soubor, univerzální podpora |
| Logo, ikona, tlačítko | PNG | Ostré hrany, průhlednost |
| Banner s textem | PNG | Písmo zůstane čitelné |
| Krátká animace | GIF | Jediný široce podporovaný animovaný formát |
| Grafika pro web | WebP | V e-mailu zatím s omezenou podporou |
Tabulka platí pro většinu běžných kampaní. U netradičních případů si výsledek vždy ověřte testovacím odesláním do několika schránek najednou.
Nezapomeňte ani na alternativní text. Řada příjemců má načítání obrázků ve výchozím stavu vypnuté a místo grafiky uvidí jen popisek. Krátký a výstižný alt text se postará o to, že sdělení dorazí i bez obrázků.
Velikost souborů je důležitá stejně jako formát
Správný formát nestačí, pokud je soubor zbytečně velký. Příjemci třeba otevírají poštu v telefonu na mobilních datech a příliš velký obrázek se jim načítá po částech. Doporučujeme držet jednotlivé obrázky v řádu desítek, nanejvýš nízkých stovek kilobajtů.
Před vložením do šablony obrázky zmenšete na skutečnou zobrazovanou šířku, obvykle kolem 600 pixelů, a u displejů s vysokým rozlišením na dvojnásobek. Následnou kompresi zvládne online nástroj OptiBot, který zmenší JPEG, PNG i GIF bez viditelné ztráty kvality. Obrázky se do newsletterů obvykle vkládají odkazem ze serveru, takže velikost HTML kódu zprávy nezvyšují. Zátěž ale nese příjemce, jehož aplikace je musí stáhnout.
Spolehlivý newsletter stojí na JPEG a PNG
JPEG je tedy nejlepší volbou pro fotografie, PNG pro loga a text a GIF pro jednoduché animace s promyšleným prvním snímkem. WebP zatím patří spíš na web. Stejně jako formát je pak důležité pohlídat si i velikost souborů.
Při přípravě další kampaně projděte obrázky podle obsahu, zvolte formát z tabulky a výsledek otestujte v několika schránkách, abyste si mohli být jistí, že grafika dorazí ke všem příjemcům tak, jak jste ji navrhli.
