Autor Zpráva
juiCZe
Profil
Zdravím,

Obsah na stránce má 3 MB, z toho 2 MB tvoří velké obrázky, co mají v css display: none; takže nejsou stejně hned vidět, ukážou se až po kliknutí na nějaký prvek (jquery změní display: none;).

Je možnost říct prohlížeči, ať je načítá jako poslední ? zbytečně se mi pak seká načítání stránky, a trvá déle. Děkuji !!
Mistr
Profil
juiCZe
Úpravy pořadí v kódu stránky?
ninja
Profil
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.
Joker
Profil
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.
juiCZe
Profil
Jak ? Budu vděčný za jakoukoliv radu. Změnit pořadí v kódu nemohu, protože by se posunuly úplně jinam.
ninja
Profil
ajax, nebo otevrit pres nejaky LightBox.
juiCZe
Profil
Je tam pužito jquery, není nějaká možnost ho pro tento účel využít ? s psaním ajaxu nemám žádné zkušenosti. Rozměry jsem nastavil, nepomohlo to.
Nemyslíte že je možnost nahradit img jiným prvkem co zobrazí obrázek, ale nebude ho hned načítat ?
Večer zkusím iframe. Je to web petrchutny.cz, moje nové portfolio. (ne že bych měl staré :) ). Konkrétně ty reference, kdybych odkaz na referenci nasměroval na iframe, a ten poté zobrazil, mělo by to fungovat ..
Joker
Profil
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";
habendorf
Profil
Otázkou je, zda skutečně potřebuješ 2 MB obrázků. A ten zbývající 1 MB je taky nějak dost.
Chamurappi
Profil
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.
juiCZe
Profil
2Joker: Přesně toto jsem potřeboval, díky. Nyní se obrázky načtají jako poslední, celková velikost prezentace je 1,5 MB což je akceptovatelné.
2Chamurappi: Protože se na určité (žádné gradientní přechody a podobně) obrázky hodí víc gif se svojí ostrostí. PNG jsem na velké obrázky nepoužil nikde, používám je na stíny. Došlo mi že tady to není potřeba, nahradím to gifem, díky za připomínku.
Bubák
Profil
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.
joe
Profil
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.
Chamurappi
Profil
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.
Bubák
Profil
„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ů.
joe
Profil
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 ;-)
Bubák
Profil
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ě.
juiCZe
Profil
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?
Nevalidní to není, vadí to podle vás něčemu (kromě nemožnosti obrázek indexovat) ? rád si vyslechnu názor fundovanějšího člověka. S Jquery nijak po nocích aktivně nepracuji, takže jsem využil řešení co mi poradil Joker, fungovalo a jsem spokojen :) Obrázky nebude nijak
Užíváš velké obrázky, takže si musíš si vybrat mezi stoprocentní kvalitou a přijatelnou velikostí.
Vypadá to že png doopravdy řeší problém u většiny plných náhledů, děkuji za vaši vyčerpávající diskusi.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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