Autor Zpráva
kajka
Profil
Dobrý den ve tvorbě webu jsem uplný začátečník,
nedávno jsem v editoru wysiwyg web builder 10 vyrobila stránky a ted je nahrála na net
http://www.uklid11.kvalitne.cz/

ale mám problémy, že se mi pomalu načítají obrázky.
Nevěděli by jste prosím jak to změnit, aby se to načítalo svižněji?

Předem moc děkuji za každou radu
Alphard
Profil
Ty obrázky jsou zbytečně příliš velké, např. http://www.uklid11.kvalitne.cz/images/pp1.gif je pomocí CSS zmenšený na necelých 300 px, ale originální velikost je 1 472px × 1 487 px a datová velikost je 588,69 kB.
Takže vytvořit vhodně velké zmenšeniny (v nějakém grafickém editoru nebo online) a ty nahrát na web a používat. Navíc by lepší formát byl myslím png.
kajka
Profil
aha děkuji za odpověť
a to tedy znamena, že budu muset všechny obrázky smazat upravit a znovu nahrát??
a mohu se ještě zeptat jak zjstit na jakou velikost mám vždy daný obrázek uložit. jsem opravdu začátečník a v daném editoru mě to ukazuje po kliknutí a obrázek vždy působí rozměry 1472 x 1487 ikdyž je stažený na menší rozměr.
Děkuji
lionel messi
Profil
kajka:
a to tedy znamena, že budu muset všechny obrázky smazat upravit a znovu nahrát??

Presne tak.

v daném editoru mě to ukazuje po kliknutí a obrázek vždy působí rozměry 1472 x 1487 ikdyž je stažený na menší rozměr.

Uvedený editor nepoznám. Skúste zmeniť veľkosť obrázku v niektorom programe na úpravu obrázkov (určite nejaký v PC nájdete - Picasa, XnView, PhotoFiltre, IrfanView, v núdzi môže byť aj Malování) a tam zmeňte veľkosť obrázka.

Ako už zmienil Alphard, lepší by bol formát jpg, prípadne png, ukladať „kvázi fotografiu“ v gif nie je dobrý nápad (kvôli dátovej veľkosti — využíva nestratovú kompresiu — a obmedzenému počtu farieb).

a mohu se ještě zeptat jak zjstit na jakou velikost mám vždy daný obrázek uložit.

Na takú, v akej ho reálne použijete na webe. Čiže ak ho v CSS zmenšujete trebárs na 300px, nastavte jeden rozmer na 300px a druhý nechajte dopočítať.
mimochodec
Profil
kajka:
a to tedy znamena, že budu muset všechny obrázky smazat upravit a znovu nahrát??

Ne tak úplně. Tím, že se pod stejným názvem nahraje jiný obrázek, odpadne nutnost mazat.

na jakou velikost mám vždy daný obrázek uložit

Na tu velikost, která je uvedena v kódu.
Příklad:
<div id="wb_Image6" style="position:absolute;left:643px;top:595px;width:291px;height:295px;z-index:17;">
<a href="./darkovy_poukaz.html"><img src="images/dd2.gif" id="Image6" alt=""></a></div>

dd2.gif by bylo dobré zmenšit na 291 x 295 px.

v daném editoru mě to ukazuje po kliknutí a obrázek vždy působí rozměry 1472 x 1487 ikdyž je stažený na menší rozměr.

Tuším problém v tom, že "stažený na menší rozměr" bude ve skutečnosti zoom, nikoliv zmenšení obrázku. Nevím, o jaký editor jde, ale hledal bych něco jako Změnit velikost, Rozměry obrázku, nebo Resize nebo tak nějak. Třeba na https://pixlr.com/editor/ je to menu Obrázek / Velikost obrázku.

A jak píše lionel messi, pokud má být dodržen poměr stran, je dobré zadávat jen jedno to číslo. Jak v editoru (při zatrženém "Dodržet poměr stran"), tak potom v html (zadá se jen jedno číslo, druhé si dopočítá prohlížeč sám)
Bubák
Profil
lionel messi:
gif nie je dobrý nápad (kvôli dátovej veľkosti — využíva nestratovú kompresiu — a obmedzenému počtu farieb).
V tomto případě omezení počtu barev nevadí, většina obrázků určených na zmenšení, zrovna nehýří barvami.
PNG, 24 bitů na pixel, 138 KB (141 285 bajtů)
PNG 8 bitů na pixel, 54 KB (54 620 bajtů)
kajka
Profil
Děkuji za dobré a užitečné rady
vše jsem předělala, ale i tak některé obrázky stále pomalejí se načítají.
Nevíte čím to je?
Zatím svůj web zkouším na serveru, kde je možné zadarmo zveřejnovat stánky, nevím zda to není tím a tudíž by pak na mém placeném hostinku bylo vše v pořádku.
http://www.uklid11.kvalitne.cz/

Ještě jednou moc děkuji a budu ráda, pokud mi poradíte i s tím to doladěním.
final_
Profil *
Skús použiť nástroj google page insights(vygoogli si link)
kajka
Profil
k těm obrázkům, zatím jsou stále v gif, protože jsem komentář o převedení do PNG četla až ted.
bylo mi poraděno, že pokud obrázek obsahuje i text je lepší na uložení GIF, aby obrázek neměl text deformovany.
Je možné, že po přeuložení obrázku z Gif o PNG by na webu to chodilo rychleji??
Předem děkuji za odpověd, oprvdu jsem v tomto začatečník, takže se učím pokus omyl.....což zabere dos času :(
mimochodec
Profil
kajka:
Je možné, že po přeuložení obrázku z Gif o PNG by na webu to chodilo rychleji??

To snad není problém vyzkoušet.
Kdybych měl velmi zkomprimovat, k čemu je který formát vhodný, tak
- jpg je na fotky
- gif je pro kresby, složené z jednobarevných ploch. Typicky schémata, piktogramy, obrázky používané jako ikony aplikací nebo tlačítek v nich.
- popis png by byl trochu složitější. V zásadě je to modernější a chytřejší alternativa ke gifu.

Zatím tady nikdo nezmínil, že ten web má jisté nedostatky. K nim patří i to, že textový obsah je součástí obrázků. Takže správnou cestou není spekulovat, v jakém formátu ukládat ilustrační obrázky, ale oříznout je tak, aby na nich bylo jen to, co na nich být musí a všechny ty okraje nahradit okraji pomocí css a text napsat do html jako text. Znamená to jistou práci, ale kromě toho, že ty obrázky budou datově nejmenší možné, to bude mít i ten dopad, že ten web dokážou najít a později nabízet vyhledávače. Samo jedno výše uvedené O NÁS by možná za tu práci nestálo, když ale vidím http://www.uklid11.kvalitne.cz/images/cenik-now.gif, tak to je opravdu špatný přístup v rámci celého webu.
Chro.
Profil
Vhodnost nejpoužívanějších obrazových formátů na webu:

JPG:
Na přímé zobrazení fotografií (lidé, zvířata, krajina, interiéry atp.) s rozumně nastavenou kompresí obrázku v rozmezí 75 až 90. Dále pro náhledy fotografií (miniatury) v galeriích.

GIF:
Grafické prvky webu (ikony, čáry, piktogramy atp.). Nenáročné a krátké animace, kde se toho málo pohybuje, např. ukázka přechodu planety Merkur přes sluneční kotouč.

PNG2:
Jen černá a bílá barva. Mapky typu "odbočka z dálnice, příjezdová cesta a budova naší firmy". Technické výkresy. Schémata elektrických a elektronických obvodů. Nákresy. Výhodou formátu je nízká datová velikost a absence artefaktů jako u JPG.

PNG8:
Umí 256 barev. Grafické prvky webu jako u GIF. Tento formát používám pro zobrazování mapových podkladů, třeba přehledové turistické mapy Lysé hory a cyklostras v okolí, kde omezený počet barev ničemu nevadí. Švadlenky jistě najdou použití např. k zobrazování vyšívacích vzorů. Reprodukce textových dokumentů - zpráva od lékaře, výpis z účtu... :) Výhoda formátu stejná jako u PNG2.

PNG24:
Až 16 milionů barev. Grafické prvky webu jako u GIF a PNG8. Pro zobrazování uměleckých děl jako obrazů, interiérů sakrálních staveb, obecně se zaměřením na detaily.
Keeehi
Profil
Ještě pokud je potřeba, aby byla část obrázku průhledná, tak se nedá jpg použít. A pokud je potřeba, aby byla nějaká část obrázku jen poloprůhledná, tzn. aby třeba trochu prosvítalo skrz něj pozadí, tak se musí použít jen png.
Bubák
Profil
Chro.:
PNG2:
Jen černá a bílá barva.
Podle mého názoru by PNG2 měl mít 4 barvy, tedy pokud všude číslem za PNG máš na mysli, o kolika bitové barvy jde.
PNG obrázek s jedno bitovu paletou může obsahovat jakékoliv dvě barvy, nemusí být jen černá a bílá.
150 x 60 pixelů @ 1 bitů na pixel
Chro.
Profil
Bubák:
Máš samozřejmě pravdu. Jako PNG2 to mám označené v jednom prográmku na úpravy obrázků (vedle voleb Uložit v PNG8/PNG24) a dělá to to, že jakýkoli obrázek to převede na obrázek s pouze černou a bílou barvou do formátu PNG. Proč je to tak označené, netuším.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: