Autor Zpráva
Tlapka
Profil
Zdravím, mám menší dotaz. Vytvořila jsem web, kde jsem jako pozadí použila fotku. Jelikož to není textura a ta fotka se tam prostě hodí, vložila jsem ji tam tak, aby vždy vyplnila celou šířku okna prohlížeče se zachováním poměru stran. Design je nakódován tak, aby seděl do fotky - potud je vše v pořádku.
body {
    min-width: 100px;
    font-size: large;
    background-image: url('img/logo_fei3_1920.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    margin: 0px;
    padding: 10px;
    padding-top: 15vw;
}

Jelikož má ale pozadí v základní šířce (1920px) moc velkou datovou velikost, udělala jsem několik kopií v různých šířkách, tudíž i datových velikostech, aby se nenačítalo při prohlížení na menších obrazovkách (spec. mobilech) moc dat. Stále to dobře funguje, i načítací časy odpovídají velikostem příslušných souborů.
@media screen and (min-width: 1777px) {
    body {
        background-image: url('img/logo_fei3_1920.jpg');
    }
}

@media screen and (min-width: 1681px) and (max-width: 1776px) {
    body {
        background-image: url('img/logo_fei3_1776.jpg');
    }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
    body {
        background-image: url('img/logo_fei3_1680.jpg');
    }
}

/* ... */

@media screen and (max-width: 200px) {
    body {
        background-image: url('img/logo_fei3_200.jpg');
    }
}

Jediný problém, co ale bohužel neumím vyřešit je, že se při změně rozměru okna, kdy nový rozměr padne do jiného z rozsahů, obrázek vymění za jiný - přičemž než se ten jiný načte, je v okně prohlížeče chvíli bílá plocha. Bohužel to nevypadá moc hezky. Alespoň Firefox to tak dělá. Opera i mobilní prohlížeče to nedělají, ale zase ignorují odsazení textu od vrchu stránky. Nechce se mi to skriptovat, už teď je to dost náročné na počítač a nemám moc skriptované weby ráda - to raději vymyslím nějakou alternativu. Poradí mi někdo, jak říct Firefoxu (a celkově všem prohlížečům), aby obrázek nenačítaly znovu? Zbytečně se tak ještě zvyšuje datový tok (i když jen při změně šířky okna) a stránka při tom na chvíli problikne do bílé. Případně jak udělat alternativní design, ale s tímto jsem jinak spokojená. :) A kdyby někdo věděl, jak vyřesit to, že některé prohlížeče špatně odsazují obsah stránky od horního okraje, byla bych ráda, kdyby se o to též podělil. ;) Předem díky za rady.
Jinak tady je hotový web: fei.itlapka.eu
joe
Profil
1. Obrázky jsou zbytečně datově moc velké, zkus použít nějaký nástroj na jejich optimalizaci, třeba službu kraken.io a nebál bych se na JPEG použít i ztrátovou kompresi, pak z 1 MB obrázku dostaneš něco málo přes 200 kB.

2. Nerozumím tomu, proč chceš zabránit načtení jiného obrázku, pokud se zvětší okno prohlížeče, přece určuješ pravidly, jaké pozadí se kdy zobrazí a teď tomu chceš zabránit, to si odporuje. Uživatelé si při prohlížení internetu běžně okna stejně příliš zmenšovat nebudou. Efekt by to mohlo mít na mobilech, kdy ho otočíš na šířku a vé době by se načítal další obrázek. Pravděpodobně by to šlo nakombinovat přímo v CSS přidáním dalších podmínek v media queries, třeba orienatation.

3. Mezeru asi bude způsobovat html tag, zpravidla se nulujeí okraje u tagů html a body, tedy přesněji html, body { margin: 0; padding: 0; }

---

4. V obrázku mi přijde mít zbytečnou hlavičku, která by šla vyměnit lepším gradientem a normálním textem pro ostřejší písmo.
Trejpa
Profil
Tlapka:
Zásadním problémem je ukládání JPEG obrázků se 100% kvalitou. Proč? Pouhé snížení kvality na 90 % ušetří zhruba 70 % objemu dat. Prakticky se dá jít u textu na 80 až 75 % kvality. Hotovo, dál nemusíš nic řešit, použij jeden velký obrázek všude. Pro opravdu ostrý text stačí horní část obrázku odříznout a nahradit buď písmem na pozadí nebo formátem PNG.


Tvoje pojetí responzivního stylu je dost svérázné.

Kvůli tomu, aby někdo s telefonem nenačítal obrázek objemný 1,2 MB (stejně se načítá, viz níže), musím na počítači, třeba také připojeném přes omezený datový tarif telefonu, při pouhém plynulém zmenšení okna stáhnout až 26 obrázků odpočítaných velikostně po cirka 50 px o celkové velikosti 10 MB. To má nějaký účel? Proč 26? Proč ne dva až tři?

Ve stylech každý obrázek mezi nastavenými rozměry zvětšuješ. Kdybys ho zmenšovala, tak místo zvýrazňování nepřesností je schováš.

Ve všech zařízeních nejdříve načteš velký obrázek (body { background-image: url('img/logo_fei3_1920.jpg');) a pak ho vyměníš za malý. Neměla výměna obrázků znamenat úsporu dat?

CSS vlastnost background-size umí Internet Explorer až od deváté verze, takže uživatelé s IE na Windows XP mají po zvětšování.


Pokud má být účelem uspoření dat na malých displejích, tak bych celý proces obrátil. Nejdříve načtu malý obrázek. Když je okno prohlížeče větší, tak vyměním obrázek za větší. Změnou velikosti okna načítám větší obrázky jen v případě potřeby. Menší obrázky dodatečně nenačítám, nechám na prohlížeči zmenšení již načteného velkého obrázku.

Příklad: Responzivní pozadí
Tlapka
Profil
No takhle, jde mi v ideálním případě o tohle:
1. Aby se podle šířky obrazovky načetl příslušný obrázek, nebo případně nejbližší větší, aby se neztrácela kvalita.
2. Ten obrázek by se načetl jako pozadí, a to přesně přes celou šířku okna prohlížeče.
3. Při přerozměrování okna už by se nenačítalo nic jiného, aby nevznikal zbytečně další datový tok (nepočítám s tím, že to bude uživatel zvětšovat z malého rozlišení do velkého, a kdyžtak se dá stránka vždycky obnovit).

joe:
1. Obrázky jsou zbytečně datově moc velké, zkus použít nějaký nástroj na jejich optimalizaci, třeba službu kraken.io a nebál bych se na JPEG použít i ztrátovou kompresi, pak z 1 MB obrázku dostaneš něco málo přes 200 kB.

Trejpa:
Zásadním problémem je ukládání JPEG obrázků se 100% kvalitou. Proč? Pouhé snížení kvality na 90 % ušetří zhruba 70 % objemu dat. Prakticky se dá jít u textu na 80 až 75 % kvality. Hotovo, dál nemusíš nic řešit, použij jeden velký obrázek všude. Pro opravdu ostrý text stačí horní část obrázku odříznout a nahradit buď písmem na pozadí nebo formátem PNG.

U obrázků JPG používám vždycky 100% kvalitu, protože mám špatnou zkušenost s JPG nižší kvality, nevypadá to hezky. I když co se týče pozadí, možná bych s tím mohla zaexperimentovat (ale nejdřív vyzkouším to kraken.io) :) Předtím jsem tam měla formát PNG, ale největší pozadí mělo v tu chvíli 2,4 MB a to se mi tam fakt nechávat nechtělo.

... při pouhém plynulém zmenšení okna stáhnout až 26 obrázků odpočítaných velikostně po cirka 50 px o celkové velikosti 10 MB. To má nějaký účel? Proč 26? Proč ne dva až tři?

No já jsem právě tohle načítání nových obrázků nechtěla. Prostě načíst jeden podle prvotní šířky okna a dost. To je právě problém, který se tu snažím vyřešit.
Proč 26? Jednoduše, chtěla jsem to udělat pro co nejvíc nejpoužívanějších rozlišení, tak jsem vzala nastavení rozlišení Windows, opsala jsem si všechna rozlišení, co tam jdou nastavit, připsala vlastní, menší které znám z mobilů, ale PC je neumí (320x240 apod.) a pak jsem vzala šířky z těch rozlišení a vypsala si je pod sebe (tak, aby tam každá byla jen jednou) a doplnila výškami, protože když má někdo tablet, tak ho může i otočit ;-) No a takhle nějak mi vzniklo 26 různých šířek té stránky, přerozměrovala jsem do nich ten obrázek a získala jsem tak obrázek pro skoro každé běžně používané rozlišení. :) Takže, ideálně pokud by tam vlezl někdo z mobilu, tak by načítal pozadí třeba 30 kB velké a ne 1 MB. :)

4. V obrázku mi přijde mít zbytečnou hlavičku, která by šla vyměnit lepším gradientem a normálním textem pro ostřejší písmo.

No ta hlavička je součást té upravené fotky, která tvoří celé pozadí. Odsunutí celého textu níže je zajištěno právě zápisem:
body {
    /* ... */
    padding-top: 15vw;
}
Alternativně jsem přemýšlela i o "rozříznutí" té fotky jakoby na hlavičku a pozadí, nakonec ale padlo rozhodnutí na to, nechat ji takto v celku a posunout text níže. Jednotku vw jsem použila proto, že se řídí podle šířky obrazovky, a ta fotka se zmenšuje taky podle šířky obrazovky, takže to hezky sedí... Ale vypadá to, že Opera a Prohlížeč v mobilu tomu zápisu asi nějako nerozumí. :(

Ve stylech každý obrázek mezi nastavenými rozměry zvětšuješ. Kdybys ho zmenšovala, tak místo zvýrazňování nepřesností je schováš.
Obrázek se ve skutečnosti zmenší. V zápisu @media screen and (min-width: 1601px) and (max-width: 1680px) { /* ... */ se použije obrázek o šířce 1680px když je okno prohlížeče mezi těmito rozměry (viz. kód v mém prvním příspěvku). Tudíž se obrázek případně zmenšuje, nezvětšuje. Zvětšoval by se pouze při prohlížení na rozlišení větším než 1920x1080, ale to dneska zatím moc počítačů nemá. :)

Ve všech zařízeních nejdříve načteš velký obrázek (body { background-image: url('img/logo_fei3_1920.jpg');) a pak ho vyměníš za malý. Neměla výměna obrázků znamenat úsporu dat?
No to jsem se taky bála, nakonec se ukázalo, že prohlížeče jsou v tomhle docela inteligentní (alespoň Firefox). Když jsem zmenšila šířku okna na 320px, vymazala mezipaměť a zkusila stránku načíst přes program, co zpomaluje přenos dat (dokáže to třeba nasimulovat mobilní připojení), tak načítací čas opravdu zhruba odpovídal velikosti toho obrázku se šířkou 320px + asi 3 sekundy na text (celkem 13 sekund). Takže to načítalo opravdu jen ten malý obrázek.

CSS vlastnost background-size umí Internet Explorer až od deváté verze, takže uživatelé s IE na Windows XP mají po zvětšování.
Jej, no já jsem bohužel nepřišla na jiný způsob roztáhnutí pozadí přes celou stránku a mám IE 10, tak jsem to nezjistila... Tak snad pomůže alespoň to, že ten obrázek mám narozměrovaný ve více rozlišeních, jinak bych si s tímto fakt nevěděla rady. :-/

Pokud má být účelem uspoření dat na malých displejích, tak bych celý proces obrátil. Nejdříve načtu malý obrázek. Když je okno prohlížeče větší, tak vyměním obrázek za větší. Změnou velikosti okna načítám větší obrázky jen v případě potřeby. Menší obrázky dodatečně nenačítám, nechám na prohlížeči zmenšení již načteného velkého obrázku.
>
Příklad: Responzivní pozadí
To zní jako dobrý nápad, a i když jsem to nechtěla moc skriptovat, ten skript v tom příkladu vypadá kupodivu jednoduše a nenáročně na počítač. :) Myslím, že ho vyzkouším, případně v kombinaci s nějakou optimalizací, případně i jemným snížením kvality toho pozadí a možná rozseknutím obrázku na hlavičku a pozadí. Moc děkuji za rady, v blízké době se do toho pustím, a kdyby mi to nějak nešlo, napsala bych. Ještě jednou moc dík. :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: