Diskuze: Po obnovení stránky jiný obrázek
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.


Zobrazeno 21 zpráv z 21.
K personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze naší návštěvnosti využíváme soubory cookie. Informace o tom, jak náš web používáte, sdílíme se svými partnery pro sociální média, inzerci a analýzy. Partneři tyto údaje mohou zkombinovat s dalšími informacemi, které jste jim poskytli nebo které získali v důsledku toho, že používáte jejich služby.
Používáme nezbytné cookies pro fungování webu a s tvým souhlasem také analytické a marketingové cookies.
Zajišťují základní funkce, bezpečnost a služby, které sis vyžádal. Nelze je vypnout.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| ITnetwork | ITnetwork | Provoz webu, relace, přihlášení a uložení nastavení cookies. | PHPSESSID, auth_token, sid, itn_consent_impression, __Host-itn_consent | Relace až 1 rok |
| Google Tag Manager | Správa značek a načítání měřicích nástrojů webu. | Žádné | Neukládá se | |
| Google Fonts | Načítání typografie webu. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele | |
| Google Hosted Libraries | Načítání potřebných knihoven a stylů webu. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele | |
| Google reCAPTCHA | Ochrana formulářů a webu před zneužitím. | _GRECAPTCHA, rc::a, rc::b, rc::c, rc::f | Relace až 180 dní | |
| YouTube | Přehrávání vloženého video obsahu. | localStorage, IndexedDB; cookies after playback interaction | Relace až trvalé úložiště | |
| Vimeo | Vimeo | Přehrávání vloženého video obsahu. | __cf_bm, _cfuvid, vuid, localStorage, IndexedDB | Relace až 2 roky |
| Facebook Login | Meta | Přihlášení pomocí účtu třetí strany. | Úložiště řízené poskytovatelem | Relace až 1 rok |
| GoPay | GoPay | Zpracování uživatelem vyžádané platby. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele |
Pomáhají nám porozumět používání webu a zlepšovat ho.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| Google Analytics 4 | Měření návštěvnosti a používání webu. | _ga, _ga_* | Až 2 roky | |
| Microsoft Clarity | Microsoft | Měření návštěvnosti a používání webu. | _clck, _clsk, _cltk | Relace až 1 rok |
Slouží k měření kampaní, personalizaci reklamy a marketingové komunikaci.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| Google Ads | Měření kampaní, reklama a remarketing. | _gcl_au, _gcl_ls | Relace až 90 dní | |
| Meta Pixel | Meta | Měření kampaní, reklama a remarketing. | _fbp, _fbc, localStorage | Až 90 dní |
| Sklik | Seznam.cz | Měření kampaní, reklama a remarketing. | retargeting, sid, szn:* | Relace až trvalé úložiště |
| LinkedIn Insight | Měření kampaní, reklama a remarketing. | bcookie, li_gc, lidc, __cf_bm | Relace až 1 rok | |
| Ecomail | Ecomail.cz | Měření kampaní, reklama a remarketing. | ecmid, Úložiště řízené poskytovatelem | Dle podmínek poskytovatele |
| Atribuce kampaní ITnetwork | ITnetwork | Přiřazení návštěvy a objednávky ke kampani. | campaign_clid[*], user_session_context | Až 1 rok |
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.


Nemyslím si ale netvrdím to na 100%
. Skôr by som ťa nasmeroval na kúsok JavaScriptu 
jaj, to jsem čekal
no
co se dá dělat, naučit se to musím 
Ano javascript a nebo i za pomocí jquery, tam je na to metoda resize()
...pokud se nepletu...
Ahoj,
tohle bych řešil na straně PHP, jinak budeš posílat velká data
klientovi. Nevím až jak moc to bude trápit tebe, ale znám takový web, kam
když příjdeš stáhne to 100+ Mb, protože je tam hodně obrázku ve velké
kvalitě. Takže někdo s FUP 300mb bude určitě rád 
Něco podobného jsem tu v jednom článku ukazoval.
https://www.itnetwork.cz/…zmena-pozadi
Sice to už má pár let a není to úplně nejlepší řešení, ale
můžeš se inspirovat 
13 obrazku ma dohromady cca 7Mb a je to pouze jednostrankovej web, kde bude
zakladni info a par dalsich fotek, domnivam se, ze vsechny fotky na cele strance
zaberou max 20Mb coz si myslim, ze nebude az tak strasne co se tyce nacitani
nebo se pletu? Mile rad se dozvim dalsi informace 
Nebude strašné? Já osobně si myslim že to je hrozně moc. Záleží pro jakou klientelu to je.
Např, ITNetwork má cca 2Mb se zapnutou cache 14 Kb
Jaj
tak nejspis to moc
vadit nebude, ale pro priste rikas, ze bude urco lepsi to generovat nahodne
serverem z databaze ze?
Ono to můžeš řešit i javascriptem, ale musíš načíst jen ty obrázky které opravdu potřebuješ a nejlépe ve velikosti která bude únosná.
Aha a jde to pouze díky nějaké funkci nebo to je nějaké složitější?
ee, vytvoříš si nejaký buffer (třeba pole, jako seznam obrázků) a pak si vybereš ten co chceš. Myslim že si psal že už to máš hotové, takto je to celkem ok. Pak chce mrknout, jestli ty obrázky opravdu potřebuješ takto velké, jestli nejdou optimalizovat.
function randombg(){
var random= Math.floor(Math.random() * 13) + 0;
var bigSize = ["url('img/random/1.jpg')",
"url('img/random/2.jpg')",
"url('img/random/3.jpg')",
"url('img/random/4.jpg')",
"url('img/random/5.jpg')",
"url('img/random/6.jpg')",
"url('img/random/7.jpg')",
"url('img/random/8.jpg')",
"url('img/random/9.jpg')",
"url('img/random/10.jpg')",
"url('img/random/11.jpg')",
"url('img/random/12.jpg')",
"url('img/random/13.jpg"];
document.getElementById("random").style.backgroundImage=bigSize[random];
}
JS, pak jen zavolám onload funkci randombg a ty obrázky jsem zmenšil na 1920x1080 - jsou to fotky vintage kol a kámoš si na tomhle dost zakládá, aby to šlo vidět, takže se je snažím zachovat s co nejvíce detaily
'20Mb coz si myslim, ze nebude az tak strasne co se tyce nacitani nebo se
pletu'
Bude. Pokud ma stranka se vsim, html, css, text, obrazky a jine vice nez 100 kb
je v celku nepouzitelna a obvykle casto i neprehledna. Pojede jen fakt na dobre
lince. Ale nemuzes uz pri tom delat nic dalsiho na webu.
Ty obrazky na pozadi by se dali prevest na ten novy obrazkovy format od
googlu. Meli by to podporovat vsechny prohlizece. V pripade obrich obrazku
plakatove velikosti, kde nejsou titerne detaily bych tipoval tak 70% mensi
velikost.
https://developers.google.com/speed/webp/
http://webpjs.appspot.com/ - webp js decoder
https://css-tricks.com/…webp-images/
A jak teda řešíš obrázky, které mají 500kb+ kromě toho co jsi poslal?
Zkus poslat link na jeden. Zkusim najit nejaky konvertor, co z toho vyplodi. Zatim jsem jenom videl ukazky googlu. Nezkousel jsem realne obrazky. Webp slibuje usporu 40% aa je na nej js dekoder. Heif snad kolem 15%.
https://developers.google.com/…ebp/gallery1
https://css-tricks.com/…webp-images/
jpeg / av1 (asi heif) pri stejne velikosti souboru. Pouziva tam ale png, tak
stazeni souboru nepomuze.
https://people.xiph.org/…v1stilldemo/
Neresim, nepouzivam 500kb obrazky.
Už na to asi kašli.. vše vyřešeno a projekt je takřka hotový
každopádně všem děkuji za help

Proc hned musi kazdy pouzivat JS. Vzdyt to jde udelat uplne snadno v PHP a nemusim tim zbytecne zasirat stranku JSkem.
SELECT * FROM mistokdemasinformacisobrazky WHERE (pokud budes chtit pouzit neco specifickeho tak to rekni tady) ORDER BY RAND() LIMIT 1
Tot vse. Naprosto jednoduche.
Samozrejme to musis pripsat k <body idealne formou style a napsat background. Tahat pak jen obrazek.
Zobrazeno 21 zpráv z 21.