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?CSS vlastnost border-radius umožňuje nastavit prvku kulaté okraje. To, zda používat kulaté rohy u tlačítek, se mění stejně jako barva modního dámského oblečení, ale border-radius se dá použít i na mnohem více věcí.
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.
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ů?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).
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/
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.
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ě).
