Jestli děláte pro svou stránku šablony, jistě víte, že součástí šablony jsou často i různé grafiky, ikony a obrázky.
Pokud je stránka správně udělaná a připravená, není to problém, protože většina grafiky bude dělaná přes background-image a ikony přes sprity.
Co ale dělat v případě, že na stránce je natvrdo napsaný IMG s obrázkem, který potřebujete změnit?
V dnešní době je responzivní web důležitou součástí každé firemní stránky. A dá se předpokládat, že takový responzivní web bude hlavně zobrazován na mobilních zařízeních jako jsou chytré telefony a tablety, které mají dost omezenou kapacitu baterie a při vydatném používání vydrží jen pár hodin.
A jistě žádného návštěvníka nepřesvědčí o kvalitách Vašich stránek nebo nabízených produktů to, že při jejich procházení se výdrž jeho baterie sníží na polovinu. Častým příznakem problémů je pomalé nebo trhané skrolování na slabších (starších) strojích a zařízeních.
Jak tedy zabránit tomu, aby Vaše stránky doslova sežrali uživatelům baterie jejich zařízení?
V moderním a mobilním webu často narážíme na problém s tím, jak velké načítat obrázky.
Sice máme HD (1080p) … a v roce 2014 i QHD (1440p) a od roku 2015 dokonce UHD (4K, což odpovídá 2160p, ale už se tak neuvádí) … displeje, které zvládnou zobrazit opravdu kvalitní obrázky, ale na druhou stranu jsou tyto displeje často malé (4″ – 5″ mobilní telefony) nebo se jsou sledovány z velké vzdálenosti (~50″ UHD/4K televize sledované z několika metrů), takže zobrazit v HD/4K např. graf nebo mindmapu může skončit nečitelnou pavučinou. Navíc velmi často se stává, že se s HD telefonem připojujete přes 3G nebo dokonce GPRS/EDGE a pak takové načtení HD obrázku trvá věčnost.
HTML5 specifikace na to myslí a přináší hned dvě tři možnosti, jak to vyřešit. A samozřejmě existují ještě 2 CSS3 možnosti. Pokračování textu Responzivní načítání obrázků
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 hodně malých) obrázků.
Omezení prohlížečů při načítání spočívá v tom, že mohou stahovat současně pouze omezené množství zdrojů (JS, CSS, obrázků, apod.). Zpravidla jde o 4 requesty současně (i když je u většiny prohlížečů tuto hodnotu změnit v nastavení, její zvýšení může naopak zpomalit nebo dokonce zablokovat připojení k internetu). Další problém je trvání každého requestu, který se skládá z několika kroků (překlat adresy v DNS, navázání spojení, odeslání požadavku, čekání na vyřízení, atd.) a i když se řada z nich řeší pomocí cache (DNS), keep-alive (navázání spojení), atd. tak i když stihnete 1 request za 20ms, tak při 100 requestech bude jen vyřízení requestů trvat 2 sekundy (ve kterých není započten vlastní přenost dat!!!).
Trik spočívá v tom, že všechny obrázky spojíte do jednoho velkého, na jehož stažení pak prohlížeči stačí jediný request. Správnou ikonu pak ze spritu zobrazíte pomocí css vlastnosti background-position.
http://yostudios.github.io/Spritemapper/
http://spritegenerator.codeplex.com/downloads/get/247471
Máte na webu obrázky a chcete co nejvíce ušetřit, aby se uživatelům vaše stránka zobrazila co nejdříve? Samozřejmě, že chcete, protože rychlost prvního zobrazení je to nejdůležitější.
Pokud máte na pozadí nějakého prvku obrázek, možná budete potřebovat nastavit jeho velikost. To hlavně v případě, že děláte responzivní layout, který se zvětšuje podle rozlišení zařízení.
Poznámka: Níže uvedené vlastnosti background-* fungují jen v prohlížečích IE9+, Firefox 6+, Chrome 11+, Safari 5+, Android 4+ a iOS 7.1+.
Velikost nastavíte např. takhle:
.big-background { background-size: 50%; }
Pokud chcete, aby obrázek na pozadí (např. ikonka v menu) přesně zapadnul do řádku, bude se hodit např. tento styl:
ul.menu li img.icon {
background-size: 1EM;
}
/* Jednotka EM odpovídá poměru
vůči hodnotě font-size */
Obrázek ale nemusíte zvětšovat jen lineárně, ale můžete použít dvě velikosti k roztažení obrázku jen v jednom směru:
.background {
background-image: url('bg_1x100px.jpg');
background-repeat: repeat-x;
background-size: 1px 1EM;
}
Předchozí styl zvětší obrázek na výšku řádky, ale přitom ponechá jeho šířku na 1px, aby se zbytečně neroztahoval v rozměru, kde to za něj udělá opakování.