Obrázkové placeholdery

Moderní weby používají pro obrázky lazyloading. Uživatelský zážítek ale před tím, než se načte plný obrázek, není nejpříjemnější. Proto se dnes začínají používat tzv. image placeholdery.

Místo použití jednoho obrázku (většinou bílý obrázek o velikosti 1px) se mohou použít zmenšené obrázky o velikosti jednotek kb, které se rozostří pomocí CSS, než se stáhne originální obrázek.

Vyzkoušeli jsme proto malý JPG obrázek o velikosti 50px, ale také jsme vyzkoušeli transformaci JPG do SVG triangulace pomocí primitive knihovny. Jak ale takové SVG vypadá? Z naší testovací sady jsme vygenerovali SVG soubory se 100, 50 a 20 objekty (trojúhelníky).

Určitě se podívejte i na porovnání SVG placeholderů. Můžete se také podívat na rozdíl SVG a JPG placeholderů. A důležitá je také velikost výsledných obrázků.

Bohužel i v dnešní době nám v poměru kvality a velikosti vyhrává malý JPG obrázek. Pokud je chcete vidět v praxi, mrkněte na aktin.cz. Tam jsme již image placeholdery aplikovali.

Další část: Vzdělávání ve frontendu

DevelTalks.cz

twitch-brands (1) twitter-brands facebook-f-brands youtube-brands

Streamujeme a píšeme o vývoji webu, řešíme každodení problémy vývojářů a snažíme se vývoj webu posunout o úroveň výš.

info@develtalks.cz


Martin Kolář

Martin Kolář

twitter-brands facebook-f-brands instagram-brands (1) linkedin-in-brands github-brands (1) globe-solid envelope-regular

Frontend kodér na volné noze. Převážně pracuji na aktin.cz a snbz.cz. Nesnáším jQuery a zbytečně použitý kód.


David Czernín

David Czernín

facebook-f-brands linkedin-in-brands github-brands (1) globe-solid envelope-regular

Frontenďák na jedné noze. Momentálně se více věnuji studiu na VUT FIT - MBS. Hejtuji JavaScript, hlavně tam, kde není potřeba a vyzdvihuji purecss řešení.