Responsive design s <BASE>
Když upravujete kód HTML podle zásad responsive designu, k těm náročnějším problémům patří otázka, jak vyřešit načítání různě kvalitních obrázků pro různá zařízení. Na malé displeje s nízkým rozlišením není nutné stahovat stejně velké obrázky jako na displeje stolních počítačů, notebooků a tabletů s vysokým rozlišením.
Pokud nechcete všechny obrázky přenést na pozadí prvků, abyste jejich zdroje mohli měnit pomocí CSS a @media queries, zbývá už asi jen možnost podle hlavičky User-Agent rozlišovat zařízení, a pomocí mod_rewrite pak dosazovat vhodné zdrojové soubory.
Napadlo mě, že by šlo s využitím relativních cest, javascriptu a značky <BASE> problém elegantně vyřešit bez nutnosti cokoli nastavovat na serveru.
Mějme všechny obrázky pro zařízení s vysokým rozlišením ve složce /img/high a všechny obrázky pro zařízení s nízkým rozlišením ve složce /img/low. Na obrázky odkazujme pouze názvem souboru. Do hlavičky dokumentu vložme značku <BASE> s cestou k obrázkům o menších rozměrech a javascriptem v případě načítání na zařízení s vysokým rozlišením změňme její vlastnost href na cestu ke složce s většími obrázky:
<!DOCTYPE html>
<html>
<head>
<title>Pokus s tagem <BASE></title>
<base href="http://www.example.org/img/low/" id="responsive">
<script>
if(window.innerWidth > 800)
document
.getElementById('responsive')
.setAttribute('href', 'http://www.example.org/img/high/');
</script>
</head>
<body>
<img src="img.png" alt="">
</body>
</html>
Zbývá dořešit problém pomalejšího vykreslování layoutu v důsledku absence rozměrů v prvku <IMG>.
