Jak prohlížeči poručit, který obsah má načíst jako první?

juiCZe
Úpravy pořadí v kódu stránky?

juiCZe: prohlizeci neporucite. U tech velkych obrazku nastavte vysku a sirku, to trochu pomuze. Ale nejlepsi bude tak velke obrazky na zacatku vubec nenacitat, az nasledne kdyz o to bude uzivatel stat.

ninja
U tech velkych obrazku nastavte vysku a sirku, to trochu pomuze.
Fakt? Nastavení výšky a šířky ovlivní pořadí načítání prvků?

Mám takové tušení, že například Opera se tak chová "sama od sebe"- že obrázky s display:none ani nestahuje (na což na druhou stranu naráží skripty, které si takhle přednačítají obrázky).

Ale šlo by ty obrázky vložit do kódu skriptem až na onload stránky.

ajax, nebo otevrit pres nejaky LightBox.

Teoreticky by to šlo i jednodušeji...

<img id="velkyobrazek" src="" style="display:none">

...
a na onload stránky skript:
document.getElementById("velkyobrazek").src = "velikyobrazek.jpg";

Otázkou je, zda skutečně potřebuješ 2 MB obrázků. A ten zbývající 1 MB je taky nějak dost.

Reaguji na juiCZe:
„Je to web petrchutny.cz, moje nové portfolio.“
Na velké obrázky se hodí formát JPEG. Proč používáš GIF a PNG?
Chceš-li své zákazníky lákat na hezké JS animace, měl bys je umět sám optimalizovat tak, aby nestahovaly zbytečná data. Umíš sice hezky zapojit jQuery a zavolat pár příkazů, ale moc promyšlené to nemáš. Proč máš přímo v HTML kódu i velké varianty obrázků, které se stejně zobrazují až po kliknutí? Kdybys je tam neměl, nestahovaly by se.

„PNG jsem na velké obrázky nepoužil nikde“
To je chyba, PNG používá modernější algoritmus pro kompresi a při použití správného programu (vyhnout se Malování a Photoshopu) pro uložení PNG dostaneš menší soubor, než v případě GIFu.

„Protože se na určité (žádné gradientní přechody a podobně) obrázky hodí víc gif se svojí ostrostí.“
GIF se hodí na animace a na pidiobrázky, typu 1px transparentní GIF.
Jestli použít PNG, nebo JPEG, záleží na obsahu obrázku. Pokud jde jen ostré barevné přechody, pomůže u JPEGu vypnutí podvorkování barev.
Pokud obrázek neuvidím, nedokážu odhadnout, jestli bude vhodnější PNG, nebo JPEG.

„pro uložení PNG dostaneš menší soubor, než v případě GIFu.“
Ne vždy.

Někdy je vhodnější právě GIF, protože velikost bude menší. Navíc nevím proč zavrhuješ Photoshop, umí dělat celkem malé PNG soubory, jen se to musí umět.

Reaguji na juiCZe:
„Přesně toto jsem potřeboval, díky.“
Máš teď v kódu <img> s prázdným src, to je opravdu nádhera. Proč tam vlastně máš ten jQuery, když ho neumíš využívat?

„Protože se na určité obrázky hodí víc gif se svojí ostrostí.“
Užíváš velké obrázky, takže si musíš si vybrat mezi stoprocentní kvalitou a přijatelnou velikostí.


Reaguji na Bubáka:
„Pokud obrázek neuvidím […]“
Už uvedl adresu petrchutny.cz.

„„pro uložení PNG dostaneš menší soubor, než v případě GIFu.“
Ne vždy.“
Proto zmiňuji "pidiobrázky". Od rozměru cca 10×10px je PNG menší. Když už by došlo na "lámání chleba", u "pidiobrázků" vyjde nastejno, jestli použiju GIF, nebo PNG, protože data chodí v paketech.

„ Navíc nevím proč zavrhuješ Photoshop, umí dělat celkem malé PNG soubory, jen se to musí umět.“
Jaké umět? Dej sem odkaz na soubor(y) PNG dělaný v PS, já ho jen otevřu v XnView a beze změny ho uložím a výsledný soubor bude vždy (někdy znatelně) menší!
Nemluvě o tom, že na co nejúčinnější kompresi v PNG souborech, beze změny zobrazeného obrázku, existuje pár programů.

Bubák
Nerad ruším tohle téma, ale nedá mi to nereagovat. Například můj současný wallpaper webdream.cz/wall.png (čistě uložený v PS) , o kterém silně pochybuju, že uloží XnView v menší velikosti ;-)

joe
Není to typický obrázek pro webovou grafiku, navíc, na takové obrázky je optimální JPEG, ale máš pravdu, zmíněný obrázek je po přeuložení v XnWiew o 0,07% větší ;-) Ještě, že mám Irfanview, výsledek je menší o 1,3%.

juiCZe
Ulož JPEG obrázky s kvalitou 90%, nebo 95, pokud jsi detajlista, a bez EXIFu, případně EXIF odstraň dodatečně. Na tvé úvodní stránce je 7 JPEG obrázků, celkem mají 812 kB, po (bezeztrátovém) odstranění EXIFu mají 674 kB, tedy o 17% menší, a "bez ztráty kytičky".
Při kvalidě 90% se dostaneš na 401 kB, tedy o 51% méně.
GIFy mají 548 kB, po převodu do PNG v IrfanView mají tytéž obrázky 381 kB, tedy o30% méně.