pomalé načítání obrázků

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:
„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ť.

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:

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)

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

Skús použiť nástroj google page insights(vygoogli si link)

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.

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.

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.

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

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.