Bildes

Optimalizácia obrázkov

Obrázky často predstavujú časť stránky s najväčšou veľkosťou, ktoré treba stiahnuť. Pritom správne použitie rozlíšenia (veľkosti), kvality, formátu a optimalizácia obrázku môže výrazne znížiť veľkosť stránky, čím sa návštevníkovi stránka stiahne rýchlejšie, a tým sa aj skôr vykreslí. Použitie niekoľko veľkých obrázkov sa bude načítaval príliš dlho, čo môže prispieť k odchodu návštevníka z vašej stránky.

Rozlíšenie

Dodržiavajte rozumnú veľkosť a nevkladajte na bežné stránky niekoľko MB fotografie alebo obrázky s príliš veľkým rozlíšením, napr 1 920 x 1 080. Rozlíšenie obrázku sa snažte vždy prispôsobiť rozlíšeniu, ktoré bude použité na stránke. Najčistejšia chyba je práve keď užívatelia používajú napr. obrázky z rozlíšením 2 560 x 1 440 (1 MB), ktoré získali priamo z fotoaparátu a použijú ich na stránke, kde im nastavia veľkosť 250 x 140. Pritom obrázok by po zmenšení na rozlíšenie 250 x 140 mohol zaberať niekoľkonásobne menej (5 kB = 0.005 MB). Pre fotografie do galérie alebo produktové obrázky odporúčame používať obrázky s maximálnym rozlíšením 1024 x 768.

Formát

Pre konkrétne použitie obrázkov, používajte vhodné rastrové formáty. Napríklad pre fotografie je vhodný formát JPG, a naopak pre ilustrácie, ikonky, schémy a náčrty bezstratové PNG alebo GIF.

Kvalita

Hlavne pre stratové formáty ako je JPG, je možné obrázku určiť kvalitu, čím sa dá ušetriť značná veľkosť obrázka. Pritom pri porovnaní obrázkov s kvalitou 100% a 80% sú len veľmi malé rozdiely v celkovom dojme z kvality obrázka. Pre obrázky typu JPG odporúčame používať kvalitu 80%, prípadne skúsiť experimentovať s vhodným nastavením kvality.

Optimalizácia

Ak to nie je nevyhnutné odstráňte nepotrebné meta-dáta, napr. množstvo EXIF značiek technického charakteru generované fotoaparátom (typ fotoaparáta, s ktorým bol obrázok vytvorený, GPS súradnice, svetlosť, ISO, atď.). Napríklad pri menších obrázkoch môžu meta-dáta uložené v hlavičke zaberať značnú časť veľkosti obrázka.

Nesprávne zobrazenie obrázkov

URL adresa obrázkov

Ďalšou častou chybou je, že si užívatelia napríklad v článkoch uložia obrázky s URL adresou v absolútnom tvare, napr. s adresou a doménou testovacej prevádzky. Napríklad uložia obrázok, ktorý má URL adresu: "http://www.mojadomena.wexbo.com/files/images/obrazok.jpg". Ak následne prejdete do ostrej prevádzky, subdoména (mojadomena.wexbo.com) zanikne a URL k obrázku nebude fungovať. Preto odporúčame už v testovacej prevádzke vkladať URL adresy v relatívnom tvare, bez domény. V našom prípade teda: "/files/images/obrazok.jpg".

• absolútny tvar URL - http://www.mojadomena.wexbo.com/files/images/obrazok.jpg - nesprávne
• relatívny tvar URL - /files/images/obrazok.jpg - správne

DNS domény

Dôvodom prípadného nezobrazovania obrázkov môže byť aj prípad, ak ste len nedávno registrovali novú doménu alebo ste na nej menili DNS záznamy. Pričom je nutné počkať kým sa DNS záznamy domény globálne prejavia cca 24-48 hod. Bližšie informácie nájdete v nápovede Warum wird meine Webseite/mein E-Shop noch nicht angezeigt, auch wenn ich die Domain schon gerichtet habe?.

Natočenie obrázkov

Problém môže spôsobiť ak majú v sebe obrázky uložené tzv. EXIF meta-dáta o orientácií (natočení) fotografie, kedy pri natočení fotoaparátu pri fotografovaní dané informácie do výslednej fotografie zapisuje samotný fotoaparát. Fotografia je v tomto prípade v skutočnosti uložená natočená a správna orientácia sa uvádza len v EXIF meta dátach fotografie. Ak si tak fotku prezeráte vo Windowse, či nejakom obrázkovom prehliadači, ktorý automaticky upravuje orientáciu podľa informácií EXIF meta dát, zdá sa, že je otočená správne. No pri nahrávaní obrázku na stránky náš skript v určitých prípadoch nedokáže EXIF meta dáta z obrázku načítať, a tak prispôsobiť originál obrázku správnej orientácií. Napriek tomu, že náhľadové obrázky či originálne obrázky zobrazujúce sa v galérií či obrázky detailu produktu sú čiastočne ošetrené skriptom, ktorý sa pokúsi uvedené EXIF meta dáta načítať a obrázok správne natočiť, odporúčame fotografiu pred nahratím na stránky upraviť v editore obrázkov kde odstránite EXIF meta-dáta a správne nastavíte orientáciu obrázku. Pričom takéto obrázky sa budú správne zobrazovať vo všetkých sekciách stránok (články, moduly, produkty, náhľady, atď.).

Medzi-pamäť prehliadača

Ak sa Vám po zmene obrázku stále zobrazuje pôvodný obrázok, dôvodom je medzi-pamäť Vášho prehliadača, pričom podrobné informácie nájdete nižšie v odstavci "Medzi-pamäť prehliadača".

Medzi-pamäť prehliadača

Všetky obrázky (aj súbory CSS štýlovania, JavaSriptu, Flash, PDF a XML) zobrazované na stránkach cez náš systém sa pri prvotnej návšteve ukladajú do medzi-pamäte návštevníkovho prehliadača, aby sa pri opakovanom načítaní stránok nemuseli opätovne načítavať so servera, ale už priamo z lokálnej pamäte prehliadača. Šetria sa tak prenosové dáta a stránky sa vďaka tomu načítavajú oveľa rýchlejšie. Obrázky sú uložené v medzi-pamäti prehliadača len určitú exspiračnú dobu (max. 30 dní), kde po uplynutí doby exspirácie sa pri opakovanej návšteve stránok opätovne načítajú. Do medzi-pamäte sa ukladajú len obrázky, ktoré sa návštevníkovi zobrazili, teda len obrázky zo stránok, ktoré už navštívil.

Novým návštevníkom stránok, ktorý navštívia URL adresu, na ktorej sa nachádza zmenený obrázok a ešte na nej neboli, sa zobrazí práve nový zmenený obrázok. Naopak návštevníkovi, ktorý URL adresu s obrázkom navštívil krátko pred zmenou, sa dočasne zobrazí ešte pôvodný obrázok z jeho medzi-pamäte prehliadača.

Ak chcete aby sa zmena obrázku prejavila okamžite, je nutné zmeniť URL adresu obrázku (stačí pozmeniť názov obrázku). Následne pozmenenú URL adresu obrázku vložiť napr. do článku alebo do požadovanej položky pre vloženie obrázku. Obrázky produktov majú aj po zmene rovnakú URL adresu, ktorú nie je možné zmeniť. Ak ste tak zmenili obrázok, ktorý má stále rovnakú URL adresu (napr. obrázok produktu) a chcete jeho zmenu vidieť ihneď, je nutné sa buď na stránkach prihlásiť ako administrátor (tejto skupine sa k niektorým obrázky a súborom pridáva do URL adresy časová pečiatka poslednej zmeny obrázku) alebo obnoviť stránky klávesovou skratkou CTRL + F5, prípadne vymazať medzi-pamäť prehliadača. Podrobný návod na vymazanie medzi-pamäti prehliadača nájdete v nápovede Funktionsunfähigkeit eines Teils der Site, Funktion oder Option.

V prípade testovania, pre rýchle vymazanie medzi-pamäte prehliadača slúži napr. doplnok Clear Cache do prehliadača Chrome.

K obrázkom zobrazovaných v mnohých častiach administrácie sa do URL adresy nepridáva časová pečiatka poslednej zmeny obrázku, a tak jedinou možnosťou pre zobrazenie najnovšieho obrázku je obnova stránok klávesovou skratkou CTRL + F5 alebo spomínané vymazanie medzi-pamäte prehliadača.

Vodoznak na obrázkoch (watermark)

Vodoznak (ochranu obrázkov) nastavujete v sekcii Dateien / Dateienverwaltung kliknutím na tlačítko  . Vodoznak alebo ochrana obrázkov sa vloží len na obrázky, ktoré boli nahrané až po aktivácii vodoznaku alebo ochrany obrázkov.

Obrázky produktov