Ako a kedy používať inline obrázky v Base64 alebo SVG
Pokiaľ ide o rýchlosť webu, každá optimalizácia sa počíta. Obrázky sú zvyčajne najväčšou zložkou webovej stránky (aj jeden menší obrázok má zvyčajne väčšiu veľkosť súboru ako celý dokument HTML). Preto by sme sa mali venovať obrázkom. Vkladanie obrázkov nesprávnej veľkosti alebo nekomprimovaných verzií môže webovú stránku veľmi zväčšiť.
Podobne musíme riešiť aj také veci, ako je lenivé načítanie, t. j. načítanie obrázka až vtedy, keď sa k nemu používateľ dostane.
Na druhej strane, niektoré obrázky je potrebné načítať čo najskôr, aby sa zabezpečila plynulosť stránky a aby dôležité prvky pri načítaní neskákali po stránke, čo nevyzerá dobre. Môžete použiť predvyplnenie obrázkov, ale aj inline obrázky, ktoré sú predmetom tohto článku.
📝Obsah
Čo je to riadkový kód
To, že niektorý kód je inline, znamená, že je priamo vložený do kódu HTML. Preto sa nenachádza v externom súbore, ale je zapísaný priamo v HTML. V prípade JavaScriptu to môžeme urobiť pomocou značky <script>, v prípade CSS pomocou značky <style> alebo priamym zápisom štýlov do atribútu každého prvku, ale môžeme použiť aj inline obrázky, ktoré sa však nepoužívajú tak často a zvyčajne sa v tomto prípade používajú externé obrázky, zvyčajne vo formátoch png, jpg, gif alebo modernejších formátoch webp alebo avif, kde sa kód HTML zapíše tam, kde sa obrázok nachádza, a potom ho prehliadač načíta.
Ale aj obrázky možno vkladať inline priamo do kódu HTML. Môžeme na to použiť 2 formáty.
Čo je to obrázok v jazyku Base64
Base64 si možno predstaviť ako prevod binárneho kódu na text. Všetky údaje možno prepísať do čitateľného textu. To sa týka najmä obrázkov, ktoré sú zvyčajne v súbore vo formáte binárneho kódu.
Ale akýkoľvek obrázok možno previesť na text base64.
Za normálnych okolností by sme obrázok na web načítali takto:
<img src="https://example.com/logo.png"/>
Po konverzii do formátu base64 vyzerá kód HTML takto:
<img src="data:image/png;base64,...[prevedený%20kód%20do%20textovej%20podoby]..."/>
V praxi sa teda namiesto zápisu cesty k obrázku zapisuje priamo formát base64, čo je užitočné na jednoduchú implementáciu v rôznych systémoch na správu obsahu.
Na prevod akéhokoľvek obrázka do formátu base64 môžete použiť tento nástroj priamo na Expressinfo.sk
Potiahnite obrázok do prehliadača alebo vyberte miesto v zariadení. Bude skonvertovaný a môžete ho skopírovať ako base64.
Výhody a nevýhody riadkových obrázkov base64
Tak ako vo všetkom, ani tu nie je nič čiernobiele. Používanie formátu base64 alebo SVG na webe má svoje výhody aj nevýhody.
Nevýhody
- Obrázky Base64 sú zvyčajne o 20 až 30 % väčšie ako obrázky JPG/PNG
- Zväčší veľkosť dokumentu HTML, takže zobrazenie obsahu stránky trvá o niečo dlhšie
- Nemôžeme načítať obrázky zo siete CDN alebo externej domény
- Nemôžeme lenivo načítať obrázky
Výhody
- Obrázok sa načíta spolu s ostatnými časťami HTML
- Neexistujú žiadne obsahové posuny
Zhrnutie
Mierne sa zväčší veľkosť samotnej stránky a prvé zobrazenie akéhokoľvek obsahu, na druhej strane sa obrázky nenačítavajú postupne a stránka sa zobrazuje plynulejšie. Je to teda dvojsečná zbraň, ktorá môže zlepšiť čitateľský zážitok, ale za cenu zväčšenia dokumentu HTML a prvého zobrazenia obsahu.
Čo je to obrázok SVG
SVG je skratka pre škálovateľnú vektorovú grafiku. Obraz sa v podstate vyjadruje matematicky pomocou kriviek a rôznych tvarov. Kód potom sám určuje tvary kriviek a farby.
Keďže obrázok v SVG je vyjadrený matematicky, možno ho ľubovoľne škálovať bez straty kvality. Jednoduché obrázky, ktoré sa dajú ľahko previesť do SVG, môžu byť potom výrazne menšie ako png, jpg alebo iné formáty.
Formát SVG sa často používa na zobrazenie menších ikon alebo jednoduchšieho loga. Naopak, je úplne zbytočné pokúšať sa konvertovať fotografie.
SVG je vyjadrený textovo, takže ho už nekonvertujeme na base64.
SVG môžeme zobraziť buď prepojením na externý zdroj:
<img src="logo.svg"/>
Alebo môžeme obsah tohto súboru priamo vložiť do HTML, takže sa stane riadkovým obrázkom:
<svg xmlns="http://www.w3.org/2000/svg">...[obsah]...</svg>
V tomto prípade už nepoužívame značku img, ale jednoducho vložíme obrázok tak, ako je. Obsah súboru môžeme zistiť tak, že otvoríme súbor .svg v Poznámkovom bloku a skopírujeme všetko, čo sa v ňom nachádza.
Obrázky SVG si môžete voľne stiahnuť. Môžeme použiť aj ikony vo formáte SVG, napríklad z knižnice fontawesome. Stiahnite si dostupné bezplatné ikony. V priečinku svgs potom nájdete súbory vo formáte SVG, ktoré môžete načítať externe na web alebo skopírovať obsah týchto súborov do riadku.
Vprípade inline SVG môžeme štýly a farby meniť aj pomocou CSS. V prípade externého súboru nemôžeme meniť farby prvkov a prostredníctvom CSS môžeme upraviť iba veľkosť zobrazeného obrázka. V tomto prípade má teda inline riešenie výhody aj z hľadiska flexibility toho, ako obrázok nakoniec vyzerá.
Ktoré obrázky by sme (nemali) vkladať do riadkov
Inline v base64 alebo SVG by sme mali načítať obrázky v hornej časti stránky. Typicky ide o logo, ktoré konvertujeme do formátu base64 (teoreticky aj do SVG, ale tu potrebujeme otestovať, či všetko funguje tak, ako má, a čo vyjde lepšie z hľadiska veľkosti). Podobne aj rôzne menšie ikony, ako je lupa vo vyhľadávacom poli, ikony v menu atď.
Naopak, inline nechceme vkladať obrázky, ktoré sú už veľké a prevod na base64/SVG by ich výrazne zväčšil. Treba mať na pamäti, že vložený obrázok spomalí prvé načítanie akéhokoľvek obsahu. Ak vložíme veľké obrázky, nemôžeme ich lenivo načítať a HTML sa výrazne zväčší. Takisto nezabudnite vynechať obrázky, ktoré sa nenachádzajú na samom vrchu stránky, kde chceme naplno využiť optimalizáciu obsahu, ktorý nie je rozhodujúci pre okamžité zobrazenie.
V praxi teda ide najmä o logo stránky a prípadne niekoľko ďalších ikon. S konverziou base64 to určite nechcete preháňať.
Ako vložiť inline obrázky na webovú lokalitu
Tu záleží na tom, či máte prístup k súborom lokality a nakoľko ste si istí ich zmenou. Pokiaľ ide o systémy správy obsahu, ako sú WordPress, Joomla a iné, je možné vkladať obrázky v base64 bez akéhokoľvek zásahu do kódu.
Ak máte možnosť vložiť obrázok ako adresu URL, stačí namiesto adresy URL skopírovať formát base64. Keďže tento obrázok je vložený ako cesta k obrázku v značke img, stačí túto cestu nahradiť textom.
V prípade inline SVG je situácia trochu komplikovanejšia, pretože tento obrázok nevkladáme do značky img, ale jednoducho vložíme obsah súboru. V tomto prípade teda musíte skutočne zmeniť súbory a správne skopírovať obrázok alebo použiť nástroje na prevod SVG na base64, čo znamená zväčšenie súboru. Ak teda môžete, vložte SVG, ak to naozaj nemôžete urobiť inak, môžete tiež použiť možnosť konverzie base64 a výsledok vložiť ako adresu URL.
Niektoré obrázky a ikony sú však v šablóne pevne zakódované. Nemôžete ich vkladať ako adresy URL alebo inak, takže v tomto prípade musíte naozaj prejsť do šablóny/webových súborov, nájsť, kde v kóde sa obrázok nachádza (Notepad++ je skvelý na vyhľadávanie obsahu mnohých súborov), a potom prepísať kód tam. Ale ak tomu neveríte, jednoducho to vynechajte. Celkovo ide o pomerne malú optimalizáciu.
Užitočné odkazy
- Konvertovať obrázky alebo akékoľvek súbory do base64 – Konverzia do base64 priamo na Expressinfo.sk
- Optimalizácia obrázkov SVG – https://jakearchibald.github.io/svgomg/ –
Podobne aj pri konverzii do formátu base64 by ste sa mali zaoberať veľkosťou obrázka. Na zmenu veľkosti obrázka môžete použiť editory, ako je IrfanView, alebo dokonca klasický program Windows Paint. Podobne aj online nástroje ako reduceimages.com.
