V dnešním digitálním světě, kde přístup na internet probíhá přes různá zařízení s různými velikostmi a rozlišeními displejů, je nezbytné, aby webdesign byl co nejvíce responzivní. Responzivní design se týká schopnosti webových stránek automaticky se přizpůsobit rozlišení a velikosti obrazovky, na které jsou zobrazovány, což zahrnuje i obrázky a videa. V tomto článku se podíváme na techniky a postupy, jak dosáhnout optimální responzivity obrázků a videí.
1. Obrázky
a) HTML5 a atribut srcset
HTML5 přineslo atribut srcset pro značku <img>, který umožňuje webdesignérům definovat více verzí obrázku pro různá rozlišení a hustoty pixelů. Prohlížeč pak může na základě rozlišení a velikosti obrazovky zařízení vybrat nejvhodnější verzi obrázku.
<img src="/maly-obrazek.jpg" srcset="/velky-obrazek.jpg 1920w, /stredni-obrazek.jpg 1280w, /maly-obrazek.jpg 640w" alt="Popisek obrázku">
b) CSS Media Queries
Dalším způsobem, jak dosáhnout responzivity obrázků, jsou CSS Media Queries. Ty umožňují aplikovat různé CSS styly na základě charakteristik zařízení, jako jsou šířka, výška nebo orientace obrazovky. To lze využít pro změnu velikosti obrázků nebo pro zobrazení různých obrázků na různých zařízeních.
@media (max-width: 600px) {
img {
width: 100%;
}
}
c) Lazy loading
Lazy loading je technika, která načítá obrázky až ve chvíli, kdy se dostanou do viditelné oblasti prohlížeče. To zlepšuje výkon načítání stránky, protože se na začátku načítají pouze obrázky, které jsou potřeba.
2. Videa
a) Responzivní zabalení
Pro vložení videa na webovou stránku de forma responzivní, je často používán tzv. responzivní wrapper. Tento obal (wrapper) má nastavené poměry stran (např. 16:9) a video uvnitř se přizpůsobí jeho velikosti.
<div class="video-wrapper">
<iframe src="/url-videa" frameborder="0" allowfullscreen></iframe>
</div>
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* Poměr stran 16:9 */
height: 0;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
b) HTML5 <video> a atributy
HTML5 značka <video> umožňuje přímo vložit video do Webové stránky a má vlastní atributy pro řízení velikosti a chování videa. Atribut controls přidává ovládací prvky, zatímco nastavení šířky (width) a výšky (height) na 100% zajišťuje, že video bude responzivní.
<video width="100%" height="auto" controls>
<source src="/video.mp4" type="video/mp4">
Vaše prohlížeč neumí přehrávat video.
</video>
Responzivita obrázků a videí na webu je klíčová pro zajištění optimálního uživatelského zážitku na různých zařízeních. Využitím HTML5 atributů, CSS Media Queries, lazy loadingu a responzivních wrapperů můžeme zajistit, že naše mediální obsah bude vypadat skvěle a fungovat efektivně na jakémkoliv zařízení.
