Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/02719.jsonl.gz/0

Pro responzivní stránky je nejlepší použít vektorové obrázky SVG. Stále ale ještě existují prohlížeče, které ho nepodporují a tak je potřeba zajistit, aby se zobrazilo alespoň PNG (i když ve špatné kvalitě).
Od roku 1999 umějí prohlížeče, počínaje tehdy vydaným IE5, zobrazovat ikonu webu, tzv. favicon.
Původně šlo o 16x16px obrázek uložený ve speciálním, Microsoftem vytvořeným, formátu obsahujícím BMP obrázek a masku průhlednosti (známý jako
*.ICO). Od té doby se ale hodně změnilo a s malou ikonou si již nevystačíte.
Pokračování textu Favicon, aneb jedna ikona nestačí
Webkit nyní podporuje tzv. Client Hints („rady od klienta“), pomocí kterých můžete na serveru připravit obrázky a ostatní zdroje tak, aby se co nejlépe hodily pro příslušný prohlížeč nebo zařízení.
Když prohlížeč požádáte, může v každém požadavku poslat údaje o rozlišení a rychlosti připojení zařízení, takže budete přesně vědět, co si můžete dovolit stáhnout a zobrazit, aby to neovlivnilo rychlost zobrazení a kvalitu stránky.
HTML stránka může obsahovat celou řadu tagů a odkazů, které pomohou buď prohlížečům nebo vyhledávačům lépe pochopit rozložení stránek a rychleji ho načíst a zobrazit.
Pokud například načítáte obrázky a soubory z CDN, můžete prohlížeči říct, že se má připravit a najít nejbližší CDN server ještě před tím, než začnete soubory stahovat. Pokud máte seznam nebo článek rozdělený na stránky, můžete označit odkaz na následující stránku a prohlížeč pak tuto stránku načte ještě dříve, než ji bude chtít uživatel zobrazit; vyhledávač naopak díky tomu spojí všechny položky na jednu stránku a nebude uživatele odkazovat doprostřed seznamu.
Pokud potřebujete otestovat stránku v IE (Internet Explorer, Trident, Edge), můžete použít virtuální stroje, které nabízí Microsoft zdarma ke stažení na modern.ie.
Druhou možností je použítí vzdáleného testování přes Microsoft Azure. Zatím jde o Technical preview, takže je zdarma, ale je možné, že později bude tato možnost zpoplatněna nebo dostupná jen uživatelům Azure nebo MSDN. Oproti virtualizaci zde stačí stáhnout několika megabytovou aplikaci a samotný několika GB virtuální stroj bude uložen v Azure cloudu.
Je známo, že pokud zobrazujete nějaký progressbar (zobrazení průběhu), uživatelům se zdá proces rychlejší, pokud se pozadí progressbaru pohybuje směrem doleva.
Jak ale udělat animované pozadí bez toho, abyste složitě připravovali animované obrázky?
Pokračování textu Animovaný progress bez animovaného obrázku
Pokud potřebujete na stránce udělat nějaký obrázek průhledný (ikonu, vodoznak, apod.) asi vás napadne použít GIF nebo PNG, které jsou nejčastěji používanými formáty pro průhledné obrázky.
Bohužel ale GIF podporuje jen 256 barev a PNG je zase bezztrátové, takže generuje hodně velké obrázky.
Existuje ale celá řada alternativ, pomocí kterých můžete ušetřit čas a traffic uživatelů při stahování stránky.
Každý správný web designer a HTML kodér zná CSS pseudo třídu
:visited, pomocí které můžete označit již navštívené odkazy.
V moderním web designu se ale často setkáváme s tím, že navštívené odkazy jsou záměrně sjednocovány, aby nebylo potřeba vymýšlet odlišný styl pro navštívené a nenavštívené položky.
A v neposlední řadě některé designy ani neumožňují efektivně určit, co už uživatel „navštívil“ a co ne (např. Facebook, Twitter, apod.) nebo je lze navštěvovat opakovaně (např. několikrát denně aktualizované články na iDnes nebo Novinkách).
Máte nějaký kontejner (
DIV), jehož nejdůležitějším obsahem je obrázek na pozadí (ikona, logo, apod.) a chcete, aby se velikost
DIVu a velikost pozadí responzivně přizpůsobila na šířku stránky (nebo její část)?
Pokud umístíte obrázek do
DIVu za tím účelem, aby se
DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více
borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že
DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o
padding ani
margin.
<div class="imgWrapper"> <!-- autosize DIV around IMG --> <img src="..." /> </div>