Responzívny dizajn je tu s nami už istú dobu. Pomáha nám prispôsobiť webstránku pre rôzne rozlíšenia na ešte viac rôznych zariadeniach. A čo obrázky? Samozrejme pomocou CSS je možné obrázku pridať rôzne parametre, aby sa prispôsobil ploche, kde sa nachádza. Ale prečo by sa musel sťahovať rovnako veľký obrázok pre telefón a PC s 4K monitorom?
Tip: Na kontrolu rýchlosti a použiteľnosti stránky na Mobile a PC môžete využiť nástroj od Googlu PageSpeed Insights. Ten Vám môže začať hlásiť napr. že by ste mali Nastaviť primeranú veľkosť obrázkov, alebo Zobrazovať obrázky vo formátoch ďalšej generácie.
Primeraná veľkosť obrázkov
Zobrazujte obrázky s primeranou veľkosťou, čím ušetríte mobilné dáta a skrátite čas načítania. Pri kontrole sa porovnáva veľkosť každého vykresleného obrázku s veľkosťou skutočného obrázka. Vykreslená veľkosť tiež zodpovedá pomeru pixelov zariadenia. Vykreslená veľkosť by mala byť maximálne o 4 kBiB menšia ako skutočná veľkosť.
V ideálnom prípade by vaša stránka nikdy nemala zobrazovať obrázky, ktoré sú väčšie ako verzia vykreslená na obrazovke používateľa. Všetko, čo je väčšie, má za následok zbytočné bajty a spomaľuje načítanie stránky.
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg">
<source media="(min-width: 600px)" srcset="medium.jpg">
<img src="small.jpg" alt="…">
</picture>
Formát obrázkov ďalšej generácie
Takým formátom je napr WebP. Ktorý vymyslel Google a aj preto sa snaží tlačiť stránky do toho, aby ho používali. Čo nie je ani tak na škodu, lebo obrázky vo formáte WebP zaberajú oveľa menej ako taký JPEG alebo PNG. Konkrétne pri PNG je to o 26%.
Čo je však jeho nevýhoda, že ho stále nepodporujú úplne všetky prehliadače. Napr. Safari na Apple zariadeniach ho stále ešte nepodporujú, ale čoskoro to možno príde. No dovtedy je potrebné to obísť tak, že musíme mať každý obrázok dvojmo a zápis potom môže vyzerať aj takto.
<picture>
<source media="(min-width: 1024px)" srcset="large.webp" type="image/webp">
<source media="(min-width: 1024px)" srcset="large.jpg">
<img src="small.jpg" alt="…">
</picture>`Tip: Pre obrázky, ktoré nie sú hneď viditeľné na stránke môžeme pridať aj atribút loading="lazy". Čo pomôže ich oddialeniu načítania až do momentu, kým sa používateľ posunie k ich blízkosti.
Ako to riešime u nás?
Ako príklad si vezmime obrázok produktu. Prejdeme všetky podstránky, kde sa môže tento obrázok nachádzať (homepage, kategória, detail, košík, objednávka…) a zapíšeme si všetky rozmery pre každú plochu od najmenšieho telefónu po 4K podľa responzívnych breakpointov. Pri niektorých projektoch máme aj 46 rozmerov pre jeden obrázok, ktorý je samozrejme 2x (PNG + WebP). Tieto rozmery zapíšeme do configu, kde máme názov plochy, breakpoint a šírku obrázku. Potom máme komponentu pre obrázok, kde pošleme len názov plochy a entitu obrázka a tam sa nám už vypíšu všetky rozmery.
Pozrite si naše široké portfólio úspešnych web stránok TU, ktoré píšu svoj príbeh. Zaujalo Vás, čo robíme? Napíšte nám.
