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?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ů?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ě).
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.
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.
Pokračování textu Jak na průhlednost obrázků?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>
Technika spritů je nejjednodušší způsob, jak zrychlit načítání stránky, pokud na ní potřebujete mít velké množství ikonek nebo jiných (zpravidla relativně malých) obrázků.
Problém ale začíná s tím, jak sprite správně vytvořit a nastavit, aby se zobrazila požadovaná ikona (a nebyly vidět ty sousední). Nejobtížnější pak bývá udělat ikony responzivní, aby se například vždy přizpůsobili na výšku řádky v menu.
