Jak a kdy použít inline obrázky v Base64 nebo SVG

Když jde o rychlost webu, každá optimalizace počítá. Obrázky jsou typicky největší složkou webových stránek (i jeden menší obrázek je typicky z hlediska velikosti souboru větší, než celý HTML dokument). Proto je řešení obrázků něco, co bychom řešit měli. Vkládat špatnou velikost obrázků nebo nekomprimované verze může webovou stránku obrovsky nabobtnat.
Stejně tak je potřeba řešit věci jako lazy loading, tedy načtení obrázku až ve chvíli, kdy se k němu uživatel dostane.
Na druhou stranu některé obrázky je potřeba načítat co nejdříve, aby byla zajištěna plynulost webu a důležité prvky nedoskakovaly na stránku, až se načtou, což nevypadá moc dobře. Využívat je možné přednačítání obrázků, ale také pomocí inline obrázků, kterých se týká tento článek.
📝Obsah
Co je inline kód
Že je nějaký kód inline znamená, že je přímo vložen do HTML kódu. Nenachází se tedy v externím souboru, ale je přímo vepsán do HTML. Tohle můžeme udělat v případě JavaScriptu pomocí tagu <script>
, v případě CSS přes tag <style>
nebo přímém vepsáním stylů do atributu každého elementu, ale využít můžeme i inline obrázky, které se zase tak často nevyužívají, a typicky se v tomto případě používají externí obrázky typicky ve formátech png, jpg, gif nebo modernějších webp či avif, kdy se do HTML kódu vepíše, kde se obrázek nachází, a prohlížeč si ho pak načte.
I obrázky je ale možné vepsat inline přímo do HTML kódu. Využít k tomu můžeme 2 formátů.
Co je obrázek v Base64
Base64 si můžeme představit jako převod binárního kódu na text. Jakákoliv data lze přepsat do čitelného textu. To se týká právě obrázků, které jsou normálně ve formátu binárního kódu v souboru.
Jakýkoliv obrázek ale můžeme převést do textové podoby base64.
Normálně bychom obrázek na web načítali nějak takto:
<img src="https://example.com/logo.png"/>
Při převodu do base64 pak HTML kód vypadá takto:
<img src="data:image/png;base64,...[převedený kód do textové podoby]..."/>
V praxi se tedy namísto cesty k obrázku rovnou napíše formát v base64, což se hodí pro jednoduchou implementaci i v různých redakčních systémech.
Pro převod libovolného obrázku do base64 můžete využít tento nástroj přímo na Expressinfo.cz
Obrázek přetáhnete do prohlížeče nebo vyberete umístění ve vašem zařízení. Ten se převede a vy si ho můžete zkopírovat jako base64.
Výhody a nevýhody base64 inline obrázků
Jako u všeho, nic není černobílé. Využití base64 nebo SVG na webu má své výhody i nevýhody.
Nevýhody
- Obrázky v base64 jsou typicky o 20 až 30 % větší než v JPG/PNG
- Zvětšuje se velikost HTML dokumentu, takže trvá o něco déle, než se zobrazí jakýkoliv obsah stránky
- Obrázky nemůžeme načítat z CDN nebo nějaké externí domény
- Obrázky nemůžeme lazy loadovat
Výhody
- Obrázek je načten spolu se zbytkem HTML
- Nedochází k jakýmkoliv posunům obsahu
Shrnutí
O něco se zvětší velikost samotné stránky a první zobrazení jakéhokoliv obsahu, na druhou stranu se obrázky nedonačítají postupně a web se zobrazí plynuleji. Jde tedy o dvojsečnou zbraň, která může zlepšit zážitek čtenáře, ale za cenu zvětšení HTML dokumentu a prvního zobrazení obsahu.
Co je obrázek ve formátu SVG
SVG je zkratka pro Scalable Vector Graphics. V principu je obrázek vyjádřen matematicky za pomocí křivek a různých tvarů. Samotný kód pak určuje tvary křivek a barvy.
Obrázek v SVG je díky tomu, že je vyjádřen matematicky, možné libovolně zvětšovat bez jakékoliv ztráty na kvalitě. Jednoduché obrázky, které se snadno převedou do SVG, pak mohou být výrazně menší, než formáty png, jpg nebo jiné.
Často se formát SVG využívá pro zobrazení menších ikonek nebo jednoduššího loga. Naopak naprosto nesmyslné je snažit se převést fotky.
SVG je vyjádřeno textově, takže už ho nepřevádíme do base64.
SVG můžeme zobrazit buď odkazem na externí zdroj:
<img src="logo.svg"/>
Nebo obsah tohoto souboru přímo vepíšeme do HTML, tedy se z něj stane inline obrázek:
<svg xmlns="http://www.w3.org/2000/svg">...[obsah]...</svg>
V tomto případě pak již nevyužíváme tag img, ale prostě obrázek vložíme tak, jak je. Obsah souboru můžeme zjistit třeba tak, že onen .svg soubor otevřeme třeba v poznámkovém bloku a zkopírujeme vše, co se v něm nachází.
SVG obrázky si můžeme volně stáhnout. Ve formátu SVG můžeme používat i ikonky třeba z knihovny fontawesome. Stáhněte si zadarmo dostupné ikonky. Ve složce svgs pak najdete soubory ve formátu SVG, které můžete na web externě načítat nebo inline zkopírovat obsahy těchto souborů.
V případě inline SVG můžeme měnit styly a barvy i přes CSS. V případě externího souboru si barvy prvků měnit nemůžeme a přes CSS upravíme jen samotnou velikost zobrazeného obrázku. V tomto případě má tedy inline řešení i výhody z hlediska flexibility toho, jak nakonec obrázek vypadá.
Které obrázky bychom (ne)měli vložit inline
Inline v base64 nebo SVG bychom měli načítat obrázky v horní části stránky. Typicky jde o logo, které převedeme do base64 (teoreticky i do SVG, ale tady je potřeba vyzkoušet, jestli vše funguje, jak má a co vyjde lépe z hlediska velikosti). Stejně tak různé menší ikonky typu lupa v poli na vyhledávání, ikonky v menu atp..
Naopak inline nechceme vkládat obrázky, které jsou už tak velké a převodem do base64/SVG by zvětšily výrazně. Je potřeba mít na paměti, že inline vložený obrázek zpomaluje první načtení jakéhokoliv obsahu. Pokud bychom inline vložili velké obrázky, nemůžeme je lazy loadovat, a HTML se prostě výrazně zvětší. Určitě také vynechejte obrázky, které nejsou v úplně horní části stránky, u kterých chceme naplno využít možností optimalizace obsahu, který není klíčové vidět okamžitě.
V praxi jde tedy hlavně o logo webu a případně pár dalších ikonek. Rozhodně to s převodem do base64 nechcete přehánět.
Jak vložit inline obrázky na web
Tady záleží, jestli máte přístupy k souborům webu a jak moc si věříte na jejich změnu. Pokud jde o redakční systémy typu WordPress, Joomla a další, tak i zde je možné obrázky v base64 vložit i bez zásahů do kódu.
Pokud máte možnost obrázek vložit jako URL, pouze namísto URL zkopírujte formát base64. Protože se tento obrázek vkládá jako cesta k obrázku v img tagu, tak se prostě jen tato cesta nahradí textem.
V případě inline SVG je situace o něco složitější, protože se tento obrázek nevkládá do tagu img, ale prostě jen vkládáme obsah souboru. V tomto případě je tedy reálně potřeba změnit soubory, a obrázek korektně překopírovat, případně využít nástrojů pro převod SVG do base64, což ale znamená zvětšení daného souboru. Pokud tedy můžete, vložte SVG, pokud to opravdu jinak nejde, můžete využít i variantu převodu do base64 a vložit výsledek jako URL.
Některé obrázky a ikony jsou ale natvrdo nakódované v šabloně. Nelze je tedy vložit jako URL nebo jinak, takže v tomto případě je potřeba opravdu jít do souborů šablony/webu, vyhledat, kde v kódu se obrázek nachází (pro prohledávání obsahů spousty souborů je super třeba Notepad++), a tam pak kód přepsat. Pokud si ale na toto nevěříte, prostě se na to vykašlete. Jde všeho všudy o poměrně malou optimalizaci.
Užitečné odkazy
- Převod obrázků nebo libovolných souborů do base64 – Konvertor do base64 přímo na Expressinfo.cz
- Optimalizace SVG obrázků – https://jakearchibald.github.io/svgomg/
Stejně tak byste při převodu do base64 měli řešit velikost obrázku. Pro změnu velikosti můžete využít editory typu IrfanView nebo klidně i klasické Windowsácké Malování. Stejně tak třeba online nástroje typu reduceimages.com.