Diskuze: Base64 image

maxy obr

Člen

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

gorri

Člen

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 :-)

TomasGlawaty

Člen

TomasGlawaty:25.9.2016 17:20

stačí 1x1px ?
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Nahoru Odpovědět

25.9.2016 17:20

maxy obr

Člen

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

maxy obr

Člen

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

Michal Žůrek - misaz

Tvůrce

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...

Nahoru Odpovědět

27.9.2016 11:18

Michal Žůrek - misaz

Tvůrce

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

maxy obr

Člen

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

maxy obr

Člen

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

Michal Žůrek - misaz

Tvůrce

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

maxy obr

Člen

maxy obr:27.9.2016 11:33

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

Editováno 27.9.2016 11:34

Nahoru Odpovědět

27.9.2016 11:33

maxy obr

Člen

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

Nahoru Odpovědět

27.9.2016 11:40

Luboš Běhounek Satik

Tvůrce

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/

maxy obr

Člen

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

Honza Bittner

Tvůrce

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.

maxy obr

Člen

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

maxy obr

Člen

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

00

Člen

00:27.9.2016 22:50

Alt je možné nechat prázdný

Nahoru Odpovědět

27.9.2016 22:50

maxy obr

Člen

maxy obr:28.9.2016 10:47

já vím

Nahoru Odpovědět

28.9.2016 10:47

gorri

Člen

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 29.9.2016 21:10

Nahoru Odpovědět

29.9.2016 21:08

Když vím, tak poradím. Nikdo neví všechno :-)

maxy obr

Člen

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

gorri

Člen

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 :-)

maxy obr

Člen

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á Je fajn když stránky načteš pod vteřinu.

Nahoru Odpovědět

29.9.2016 21:43

gorri

Člen

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 :-)

maxy obr

Člen

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

gorri

Člen

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 :-)

TomasGlawaty

Člen

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

maxy obr

Člen

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

TomasGlawaty

Člen

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

Nejčastěji vyhledáváné

Diskuze: Base64 image