Archiv štítku: image

Jaké použít obrázky v roce 2021?

Odpověď na otázku v titulku je velmi jednoduchá: AVIF a WEBP obrázky. Chcete vědět víc?

Tento článek navazuje na starší Jak na průhlednost obrázků? z roku 2015, který již není aktuální kvůli tomu, že popsané formáty obrázků již nejsou relevantní hlavně kvůli tomu, že všechny prohlížeče již podporují formát WEBP.

Pokračování textu Jaké použít obrázky v roce 2021?

Co nedělat při návrhu webu ve Photoshopu

Navrhovat web ve Photoshopu je špatný nápad, ale když váš grafik s ničím jiným neumí dělat, nemáte na výběr. V takovém případě ale existuje řada věcí, kterým by se měl grafik vyhnout nebo je naopak vzít v úvahu, aby bylo možné jeho práci použít pro vytvoření webové stránky.

Pokračování textu Co nedělat při návrhu webu ve Photoshopu

Jak určit kvalitu a kompresi JPG obrázků?

Pokud připravujete obrázky JPG pro váš web, pravděpodobně jste již narazili na problém, v jaké kvalitě (resp. kompresi) obrázek uložit, aby byl co nejmenší a zároveň stále bylo vidět, co na něm je místo aby byly vidět chyby (artefakty).

Já vám ukážu jednoduchý matematický výpočet, kterým určíte nejvhodnější kompresi.

Pokračování textu Jak určit kvalitu a kompresi JPG obrázků?

ARIA jako CSS nástroj

Specifikace ARIA vznikla pro zpřístupnění webu postiženým uživatelům, kteří jsou odkázáni na různá zařízení jako jsou čtečky textu (text-to-speech), braillovo displeje či speciální ovládací joysticky nebo klávesnice.

ARIA = Accessible Rich Internet Application (Přístupná webová aplikace)

Specifikace ale obsahuje celou řadu rolí a vlastností, které můžete přiřazovat prvkům v HTML, můžete se na ně v CSS odkazovat přes selektor vlastnosti a v Javaskriptu je používat pro ukládání stavu prvků. Navíc WAI-ARIA je již součástí HTML5 specifikace, takže uvedením je ARIA automaticky zahrnuto ve stránce (pro HTML4 bylo potřeba uvést správné DTD).

Pokračování textu ARIA jako CSS nástroj

Stylování nenačteného obrázku

Pokud se ve stránce nenačte obrázek, zpravidla to znamená chybu serveru a je potřeba ji opravit. Když je to chyba vašeho serveru, zpravidla to není problém, ale řada stránek načítá obrázky z jiných serverů, např. CDN třetích stran, kde dostupnost nelze moc ovlivnit (a často může být jen dočasná).

Nicméně to návštěvníka nezajímá. Z jeho pohledu stačí, když mu místo nedostupného obrázku zobrazíte něco jiného. HTML k tomuto účelu nabízí atribut ALT, který může (resp. měl by) obsahovat popis toho, co by bylo na obrázku vidět, kdyby se zobrazil. Nicméně obyčejně zobrazený text v základním stylu už dopředu říká „tady něco není v pořádku“ zvláště v okamžiku, kdy máte stránku založenou na speciálním designu.

Námět článku: http://bitsofco.de/styling-broken-images/

Pokračování textu Stylování nenačteného obrázku

Animace zobrazení obrázku na pozadí

Obrázek v pozadí prvku lze použít jako náhražku obyčejného obrázku (image) na celou řadu věcí, s jednou výjimkou – zobrazení nebo skrytí obrázku na pozadí není možno animovat pomocí transition (podle W3C je možno animovat pouze barvu a pozici).

Nebo existuje nějaký způsob, jak dát prvku obrázek do pozadí (např. sprite) a zároveň animovat jeho zobrazení? Samozřejmě bez použití JS.

Pokračování textu Animace zobrazení obrázku na pozadí