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.

Předchozí část: WebP

Další část: Jak se vzděláváme ve frontendu?

DevelTalks.cz

Podcasty a streamy o webovém vývoji. Pohledy dvou frontenďáků na každodenní problémy vývojářů, probírání technologií, novinek a lorem ipsum.


Martin Kolář

Martin Kolář

Freelancer frontend kodér - kromě kódování např. pro Eppi řeším performance webu, radím, organizuji Frontendisty a nesnáším jQuery.


David Czernín

David Czernín

Frontenďák aka Programátor UI. Aktuálně v Seznam.cz pečuji o TelevizeSeznam.cz. Ponořen více v JavaScriptu, obklopen Reactem, dobrými lidmi a pivem.