Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
maxy obr
Člen
Avatar
maxy obr:15.9.2016 17:57

Ahoj, mám responzivní obrázek a do určité velikosti nechc zobrazovat žádný napadlo mě tedy tam vložit base64 obrázek s co nejmenším počtem znaků. Jen bych potřeboval poradit nějaký generátor popřípadě rovnou poslat nějaký zápis. Moc nevím jak tohle funguje a sám to nesestavím.

 
Odpovědět
15.9.2016 17:57
Avatar
gorri
Člen
Avatar
gorri:25.9.2016 13:14

Co mediaQuery?

Nahoru Odpovědět
25.9.2016 13:14
Když vím, tak poradím. Nikdo neví všechno :-)
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na maxy obr
TomasGlawaty:25.9.2016 17:20

stačí 1x1px ? :)
data:image/gif;ba­se64,R0lGODlhA­QABAAAAACH5BA­EKAAEALAAAAAA­BAAEAAAICTAEA­Ow==

 
Nahoru Odpovědět
25.9.2016 17:20
Avatar
maxy obr
Člen
Avatar
Odpovídá na gorri
maxy obr:27.9.2016 10:38

A jak v mediaQuery vyřešíš toto?

<img src="small.png"
srcset="small.png 600w, medium.png 1024w, large.png 1600w"
alt="Obrázek" >

Když do 600w nechci obrázek žádný.

 
Nahoru Odpovědět
27.9.2016 10:38
Avatar
maxy obr
Člen
Avatar
Odpovídá na TomasGlawaty
maxy obr:27.9.2016 10:39

Díky to je to co jsem chtěl. Vyzkouším to.

 
Nahoru Odpovědět
27.9.2016 10:39
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:27.9.2016 11:18

vzhledem k tvému nicku bych nečekal, že budeš hledat ten nejmenší možný obrázek... :D

 
Nahoru Odpovědět
27.9.2016 11:18
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na maxy obr
Michal Žůrek - misaz:27.9.2016 11:21

tak když ho chceš skrýt je nejlepší ho skutečně skrýt (display: none) a to udělat přes media query většinou jde.

 
Nahoru Odpovědět
27.9.2016 11:21
Avatar
maxy obr
Člen
Avatar
maxy obr:27.9.2016 11:27

Tak nevím co dělám špatně ale ten obrázek to nezobrazí.

<img alt="obr" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 600w, img.jpg 800w ,img2.jpg 1200w, img3.jpg 4000w" />

Vlastně ani jiný, není problém to používat v srcset?

 
Nahoru Odpovědět
27.9.2016 11:27
Avatar
maxy obr
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
maxy obr:27.9.2016 11:28

To dělám samozřejmě, teď mi ale jde o rychlost načítání.

 
Nahoru Odpovědět
27.9.2016 11:28
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na maxy obr
Michal Žůrek - misaz:27.9.2016 11:31

display: none se nerenderuje, takže by se žádný obrázek neměl stáhnout.

 
Nahoru Odpovědět
27.9.2016 11:31
Avatar
maxy obr
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
maxy obr:27.9.2016 11:33

Já celý život žiju v tom, že obrázky skryté css se stahují. :D Podívám se na to

Editováno
 
Nahoru Odpovědět
27.9.2016 11:33
Avatar
maxy obr
Člen
Avatar
Odpovídá na maxy obr
maxy obr:27.9.2016 11:40

Nestahuje se nejdříve HTML a až poté CSS? Obrázky se stahují všechny nezávisle na stylu viz Chrome dev tools nebo jak se to jmenuje :D

 
Nahoru Odpovědět
27.9.2016 11:40
Avatar
Luboš Běhounek Satik
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Luboš Běhounek Satik:27.9.2016 11:40

Nerenderuje, ale vetsinou stahuje (minimalne posledni Chrome/FF/IE11 ho stahujou)
http://jsfiddle.net/dk3TA/

Nahoru Odpovědět
27.9.2016 11:40
https://www.facebook.com/peasantsandcastles/
Avatar
maxy obr
Člen
Avatar
maxy obr:27.9.2016 11:44

Mohl by mi někdo vysvětlit rozdíl mezi stahováním a renderováním? :-)

 
Nahoru Odpovědět
27.9.2016 11:44
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na maxy obr
Honza Bittner:27.9.2016 11:50

stahování - získávání dat ze serveru do tvého počítače
renderování - využití stažených dat v tvém počítači prohlížečem, který je zobrazí

Nahoru Odpovědět
27.9.2016 11:50
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
maxy obr
Člen
Avatar
Odpovídá na Honza Bittner
maxy obr:27.9.2016 11:55

Díky, no a když už jsme tedy u toho jak by jste to řešili? Mám obrázek který chci využít až od nějaké velikosti. Tak mě napadlo použít responzivní obrázky s tím, že do určité šířky tam stahuji 1px png a skývám pomocí display: none. Ale pořád je tam request no tak jsem se ho chtěl zbavit tím 1px obrákem v base64 ale vypadá to, že to prohlížeč nějak nepobere a nebo to špatně zapisuji nevím.

 
Nahoru Odpovědět
27.9.2016 11:55
Avatar
maxy obr
Člen
Avatar
maxy obr:27.9.2016 12:30 
<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 600px)" srcset="medium.jpg">
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="…">
</picture>

Toto ale už funguje

 
Nahoru Odpovědět
27.9.2016 12:30
Avatar
00
Člen
Avatar
Odpovídá na maxy obr
00:27.9.2016 22:50

Alt je možné nechat prázdný

 
Nahoru Odpovědět
27.9.2016 22:50
Avatar
maxy obr
Člen
Avatar
Odpovídá na 00
maxy obr:28.9.2016 10:47

já vím :D

 
Nahoru Odpovědět
28.9.2016 10:47
Avatar
gorri
Člen
Avatar
Odpovídá na maxy obr
gorri:29.9.2016 21:08

Obrázek je pokaždé jiný nebo se stahuje z CSS stejný?
Jde o to, že můžeš mít pozici kde se ti bude náhodně zobrazovat 1 obrázek z 10 (například) a nebo je jeden, který je definovaný v CSS a tudíž by šlo udělat následující

<div class="obrazek"></div>

zapis do CSS

@media only screen and  (max-width: 940px - toto si nastavíš dle libosti ale tento rozměr je tak nějak běžný) {
.obrazek {
display: none;
}

}

když nebude fungovat tak zkusit přidat !important, takže výsledný zápis by byl

@media only screen and  (max-width: 940px - toto si nastavíš dle libosti ale tento rozměr je tak nějak běžný) {
.obrazek {
display: none !important;
}

A vzhledem k tomu, že tablety mají rozlišení přijatelné tak se stránka na tabletu zobrazí pomalu jak v PC.
Například iPad mini 2 má rozlišení 2048 × 1536

Editováno
Nahoru Odpovědět
29.9.2016 21:08
Když vím, tak poradím. Nikdo neví všechno :-)
Avatar
maxy obr
Člen
Avatar
Odpovídá na gorri
maxy obr:29.9.2016 21:27

Promiň ale asi jsi úplně nepochopil co řeším. Já to právě nechtěl dělat pomocí display: none, abych zbytečně nestahoval obrázek a zároveň nevytvářel request.

 
Nahoru Odpovědět
29.9.2016 21:27
Avatar
gorri
Člen
Avatar
Odpovídá na maxy obr
gorri:29.9.2016 21:36

Jestli ten obrázek není nějak závratně velký tak bych to asi moc neřešil. Faktem je, že nepochopil :-D
Nicméně pokud to je obrázek, který má pár kb (doslova pár) tak bych to neřešil. Tohle je jednoduché, rychlé a funguje vždy.
Nicméně pokud nevyhovuje tak se omlouvám.
Jen jsem chtěl poskytnout řešení. ;-)
Já třeba používám jen mediaquery a nikdy nebyl problém s načítáním/rychlost

Nahoru Odpovědět
29.9.2016 21:36
Když vím, tak poradím. Nikdo neví všechno :-)
Avatar
maxy obr
Člen
Avatar
maxy obr:29.9.2016 21:43

Není to závratný problém ale ušetří to pár requestů a kb a to se počítá :D Je fajn když stránky načteš pod vteřinu.

 
Nahoru Odpovědět
29.9.2016 21:43
Avatar
gorri
Člen
Avatar
Odpovídá na maxy obr
gorri:30.9.2016 14:28

Jo to jo. Ale to tam nemáš skoro nic :-D
Nicméně teď mě napadlo, že to co jsem ti napsal se může klidně použít i tak. Stačí nahrát ještě jeden obrázek (třeba 1x1px a dát ho jako background v mediaquery. Tím se ti nebude načítat nic tak velkého a nemusíš se obávat o velkou datovou zátěž.
Nicméně problém je, že pod vteřinu to načteš ty ale co ostatní? Slabší internet atd ;-)
Je moc věcí které to mohou ovlivnit.

Nahoru Odpovědět
30.9.2016 14:28
Když vím, tak poradím. Nikdo neví všechno :-)
Avatar
maxy obr
Člen
Avatar
Odpovídá na gorri
maxy obr:30.9.2016 16:30

Ale jak by ten bg zabránil načtení toho obrázku? Nijak. Jak říkáš ještě jeden, takže se budou stahovat rovnou 2. Já už to vyřešil, přečti si předchozí diskusi. Pod vteřinu beru pouze na desktopu s normálním připojením.

 
Nahoru Odpovědět
30.9.2016 16:30
Avatar
gorri
Člen
Avatar
Odpovídá na maxy obr
gorri:30.9.2016 17:01

Nebudou se načítat 2. Mobilní verze si bere to co je za mediaquery. Pokud je tam k tomu nějaká informace.
Pokud ano tak si bere hodnotu z mediaquery.
Ale chápu už co myslíš. Prostě chceš načíst web po 1 vteřinu. Nicméně je tu hodně věcí, které nelze bohužel ovlivnit.
Každopádně už mlčím raději :-D

Nahoru Odpovědět
30.9.2016 17:01
Když vím, tak poradím. Nikdo neví všechno :-)
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na gorri
TomasGlawaty:30.9.2016 21:57

Mobilní verze sice zobrazí jeden obrázek, ale stáhnou se oba.

 
Nahoru Odpovědět
30.9.2016 21:57
Avatar
maxy obr
Člen
Avatar
maxy obr:30.9.2016 22:20

Ale přiznám se, že nevím jak je to v případě backgroundů pokud jsou v media query.

 
Nahoru Odpovědět
30.9.2016 22:20
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na maxy obr
TomasGlawaty:30.9.2016 22:50

Řekl bych, že prohlížeč stahuje vše, co vidí. A to vcětně odkazů v css.

 
Nahoru Odpovědět
30.9.2016 22:50
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 29 zpráv z 29.