Obrázky na pozadí webu – od okraje k okraji

6. 3. 2012 20:14:37

Zdravím,

co si myslíte o obrazcích od okraje k okraji? Jaký je váš názor?

Mám na mysli například toto: http://adrians.info/# , http://www.aupetitpanisse.fr/#!/ , http://gunsnroses.com/ .

Osobně se mi celkem líbí, ptž ten web to může hodně pozvednout. Nadruhou stranu mám trochu strach to používat, ptž obrázek určitě bude muset být v obří velikosti aby se dobře zobrazil i na extrémě velkých rozlišeních.

Máte s tím někdo zkušenost? Pokud ano, jaká technologie se používá na vykreslení? Pokud bych normálně dal obrázek jako background, tak se podle mě bude načítat pěkně dlouho, zatímco na těhle stránkách to bývá instantní spolu se zbytkem obsahu.

6. 3. 2012 20:14:37

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740246

FAKAM

(10 hodnocení)

6. 3. 2012 20:32:49

No začína sa to páčiť aj mne, ale aj tu záleží o aký web ide. Nie všade sa to samozrejme hodí a niekde to môže skôr uškodiť.

Na takéto vecičky existujú pluginy napr:

http://css-tricks.com/perfect-full-page-background-image/,

http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html,

http://www.emanueleferonato.com/2010/11/13/full-screen-centered-background-image-with-css-and-jquery/

6. 3. 2012 20:32:49

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740245

David Musil

(72 hodnocení)

6. 3. 2012 20:35:01

Tyto obrázky mají velikost okolo 200kb, ale i to se mi zdá moc, pokud to vezmu z hlediska jakési přístupnosti webu.

6. 3. 2012 20:35:01

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740244

FAKAM

(10 hodnocení)

6. 3. 2012 20:38:31

Napsal musil.david;768452
Tyto obrázky mají velikost okolo 200kb, ale i to se mi zdá moc, pokud to vezmu jakési přístupnosti webu.

napriklad tu http://www.aupetitpanisse.fr/#!/ máš veľkosť obrázku 86kb čo je pohoda. DialUpy už skončili

6. 3. 2012 20:38:31

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740243

Pavel Petržela

(1 hodnocení)

6. 3. 2012 20:40:40

Ja osobne jsem je jiz na par webech pouzil a je to velice efektni.. Myslim ze pri dnesnich rychlostech pripojeni je 200KB nic a pokud jde o mensi zarizeni, tak jednoduse pres css (media screen and(max-width: xxx px))..

6. 3. 2012 20:40:40

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740242

Marek Lenárd

(3 hodnocení)

6. 3. 2012 20:52:15

Přesně tak, mnohem horší z hlediska rychlosti načítání je prý počet HTTP požadavků než-li velikost přenášených souborů. Zmíněných 200 kB je při dnešních přenosových rychlostech drobnost. V širším hledisku se těmito trendy zabývá tzv. Responsive Web Design.

6. 3. 2012 20:52:15

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740241

Michal

(9 hodnocení)

6. 3. 2012 21:01:22

Teda tak to mám výrazný mezery. Představoval sem si, že podobný obrázek v tak obrovským rozlišení musí mít alespoň kolem 10mb. Určitě mrknu na ty plug-iny, dík za typ.

Jinak teda si myslim, že by to šlo perfektně využít třeba v restauraci - přes celou stránku nějaký nádherný biftek a někde např nalevo jen decentní menu s vysouvacím textem, aby to příliš nepřekrývalo obrázek. Pak bych ale řekl, že je to do jistý míry "zážitkový web" protože tak nějak ustupuje ta klasická informační stránka a více se cílí na smysly. :) Asi něco zkusím vytvořit pro zábavu...

6. 3. 2012 21:01:22

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740240

Marek Lenárd

(3 hodnocení)

6. 3. 2012 21:18:14

Není třeba žádných pluginů, víceméně si stačí chvíli hrát s vlastností background-size z CSS3. :-)

6. 3. 2012 21:18:14

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740239

Pavel Petržela

(1 hodnocení)

7. 3. 2012 08:37:42

neni treba ani css3, staci dat obrazek do absolutniho divu a dat mu

a roztahne se podle rozliseni.. .)

7. 3. 2012 08:37:42

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740238

Marek Lenárd

(3 hodnocení)

7. 3. 2012 10:01:08

Díky za tip, to jsem neznal. :-) Předpokládám ale, že se v tom případě pracuje s obrázkem (tag ) a nikoliv pozadím, je tak?

7. 3. 2012 10:01:08

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740237

Michal

(9 hodnocení)

7. 3. 2012 11:25:05

Super a ještě bych se zeptal v jakym formatu bude nejlepsi obrazek vyuzit? Klasicky jpeg je moc velky- takze napr gif nebo png ?

7. 3. 2012 11:25:05

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740236

DX632

(3 hodnocení)

7. 3. 2012 11:45:45

Mythis: Naopak, právě komprese JPEG *jpg je právě pro tohle využití ideální. GIF je úplně mimo a PNG formát by byl v tomto případě datově příliš náročný.

Zmiňovaný obrázek využitý výše (86kb) je také *jpg.

7. 3. 2012 11:45:45

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740235

Pavel Petržela

(1 hodnocení)

7. 3. 2012 20:04:08

Napsal Marek Lenárd;768635
Díky za tip, to jsem neznal. :-) Předpokládám ale, že se v tom případě pracuje s obrázkem (tag ) a nikoliv pozadím, je tak?

jop jedna se o v nejakym absolutnim divu..

Jinak jpeg je idelani - photoshop -> ctrl+alt+shift+s, nastavis kvalitu tak kolem 70 - 80 a melo by ti to vyplivnout pouzitelnou velikost :)

7. 3. 2012 20:04:08

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740234

Roman Zámečník

(11 hodnocení)

7. 3. 2012 20:34:43

Ahoj,

já používám fixní obrázek přes pozadí zde:

http://www.futurehits.cz/home

udělal jsem to normálně přes cc3 background-size http://www.css3.info/preview/background-size/ a běží to snad všude. (obrázek ale musí být takový, aby nevadilo když je neproporcionálně zvětšen)

No a moje zkušenosti? S načítáním problém opravdu není i na mobilu mi těch 200 Kb naskočí rychle. Problém ale způsobuje scrollování v některých prohlížečích - kde se tak neják "seká". Proto uvažuji, že ho odstraním.

Podle mne je tedy velký obrázek fixně na pozadí vhodný spíše pro weby malého obsahu, kde se nescrolluje. Jinde už bych se k němu nepřiklonil.

7. 3. 2012 20:34:43

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740233

Marek Lenárd

(3 hodnocení)

8. 3. 2012 09:09:42

Napsal zamek;768972
Problém ale způsobuje scrollování v některých prohlížečích - kde se tak neják "seká".

Důvodem bude pravděpodobně fixní zakotvení pozadí, což prý způsobuje neúměrně velkou zátěž CPU. Nevím proč, nevím, jestli je tomu opravdu tak, ale také mám s fixním pozadím spíše špatné zkušenosti.

8. 3. 2012 09:09:42

https://webtrh.cz/diskuse/obrazky-na-pozadi-webu-od-okraje-k-okraji/#reply740232

Pro odpověď se přihlašte.

Přihlásit