Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

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. září 17:57
Avatar
gorri
Člen
Avatar
gorri:

Co mediaQuery?

 
Nahoru Odpovědět  +1 25. září 13:14
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na Maxy_obr
TomasGlawaty:

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

Nahoru Odpovědět 25. září 17:20
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
Maxy_obr
Člen
Avatar
Odpovídá na gorri
Maxy_obr:

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. září 10:38
Avatar
Maxy_obr
Člen
Avatar
Odpovídá na TomasGlawaty
Maxy_obr:

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

 
Nahoru Odpovědět 27. září 10:39
Avatar
Michal Žůrek (misaz):

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

Nahoru Odpovědět 27. září 11:18
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Maxy_obr
Michal Žůrek (misaz):

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. září 11:21
Nesnáším {}, proto se jim vyhýbám.
Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

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. září 11:27
Avatar
Maxy_obr
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Maxy_obr:

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

 
Nahoru Odpovědět 27. září 11:28
Avatar
Odpovídá na Maxy_obr
Michal Žůrek (misaz):

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

Nahoru Odpovědět  +2 27. září 11:31
Nesnáším {}, proto se jim vyhýbám.
Avatar
Maxy_obr
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Maxy_obr:

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

Editováno 27. září 11:34
 
Nahoru Odpovědět  +1 27. září 11:33
Avatar
Maxy_obr
Člen
Avatar
Odpovídá na Maxy_obr
Maxy_obr:

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. září 11:40
Avatar
Odpovídá na Michal Žůrek (misaz)
Luboš Běhounek (Satik):

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

Nahoru Odpovědět 27. září 11:40
:)
Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

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

 
Nahoru Odpovědět 27. září 11:44
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Maxy_obr
Honza Bittner:

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. září 11:50
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Maxy_obr
Člen
Avatar
Odpovídá na Honza Bittner
Maxy_obr:

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. září 11:55
Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:
<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. září 12:30
Avatar
00
Člen
Avatar
Odpovídá na Maxy_obr
00:

Alt je možné nechat prázdný

 
Nahoru Odpovědět 27. září 22:50
Avatar
Maxy_obr
Člen
Avatar
 
Nahoru Odpovědět 28. září 10:47
Avatar
gorri
Člen
Avatar
Odpovídá na Maxy_obr
gorri:

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 29. září 21:10
 
Nahoru Odpovědět 29. září 21:08
Avatar
Maxy_obr
Člen
Avatar
Odpovídá na gorri
Maxy_obr:

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. září 21:27
Avatar
gorri
Člen
Avatar
Odpovídá na Maxy_obr
gorri:

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. září 21:36
Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

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. září 21:43
Avatar
gorri
Člen
Avatar
Odpovídá na Maxy_obr
gorri:

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. září 14:28
Avatar
Maxy_obr
Člen
Avatar
Odpovídá na gorri
Maxy_obr:

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. září 16:30
Avatar
gorri
Člen
Avatar
Odpovídá na Maxy_obr
gorri:

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. září 17:01
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na gorri
TomasGlawaty:

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

Nahoru Odpovědět  +1 30. září 21:57
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

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. září 22:20
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na Maxy_obr
TomasGlawaty:

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

Nahoru Odpovědět 30. září 22:50
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
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.