Rada, aké veľké a ťažké fotky je vhodné publikovať na webe.
Základná vedomosť, ktorú si treba osvojiť je: Obrázok má celkovú váhu v MB, ktorú ovplyvňujú dva parametre:
- veľkosť (rozmer) v pixeloch
- kvalita kompresie
Publikujeme zásadne vo formátoch JPG alebo PNG. Sú to stratové formáty. Obrázky sú v nich zabalené a komprimované podobne ako keď komprimujeme textové súbory do formátu zip alebo rar. Avšak pri kompresii sú nenávratne zahadzované (preto stratová) zbytočné informácie. Napríklad v prípade fotiek sú to okom nerozlíšiteľné blýzke odtiene. Podobne stratový kompresný formát je aj MP3 pre hudbu u ktorého sa zahadzujú blízke tóny, ktoré aj tak nerozlíšime sluchom.
Veľkosť pokojne môže byť aj v stovkách pixelov na šírku. Ja bežne používam 650px. Je to ovplyvnené celkovým dizajnom stránky, kedy tento blog je stavaný na šírku cca 800px.
Kvalitu kompresie nastavujem na 85% u fotiek. A znesiteľné je až 65%. Ale treba to skúšať a používať čo vám vyhovuje. Pri 85% kompresii (teda pri „zhoršení“ kvality len o 15%) a zachovaní pôvodných rozmerov sa pôvodná „váha“ obrázku zníži o cca polovicu. Kdesi som u profíkov čítal, že je lepšie použiť viacnásobnú kompresiu o malé kroky ako raz o jeden veľký. Ale neskúšal som to.
Pôvodná fotka mala rozmer 4352x2904px a celkovú váhu 1,6MB.
Upravená fotka v oboch parametroch, teda aj v rozmere aj v kompresii a pripravená na publikáciu má rozmer 650x434px cca 41kB (cca 0,052MB).
Cieľ je dosiahnutý. Fotka je ešte ako tak veľká, dosť kvalitná a načítanie stránky sa radikálne zvýši. Ja viem, dnes už máme rýchle pripojenia. No predstavte si, že spravím galériu s 20 fotkami a každá má alebo 2MB alebo 50kB.
Toto je dobra vec pre WordPress:
https://wordpress.org/plugins/ewww-image-optimizer/screenshots/
skomprimuje uz existujuce fotky bezstratovo (alebo aj stratovo, ak to zapnes).
Toto je dobra vec pre WordPress:
https://wordpress.org/plugins/ewww-image-optimizer/screenshots/
skomprimuje uz existujuce fotky bezstratovo (alebo aj stratovo, ak to zapnes).
Obrázky na webe sú zaujímavé aj v tom, že sa dajú používať v kvalite 0% (objavil som to až nedávno). Ide o to, že sa použije nejaké vysoké rozlíšenie, ktoré sa potom nastaví na malú veľkosť.
napr. 1,6MB obrázok sa zmenší na 140kb pri kvalite 0%. Ale keď ho na webe človek zobrazí v rozlíšení napr. 800x600px, tak v podstate nebude vôbec vidno, že je kvalita 0%. Ukážka: http://www.imageoptimization.info/Compressive
V konečnom dôsledku tak na mobiloch môžu obrázky vyzerať lepšie, keďže taký mobil má vysoké rozlíšenie na malej ploche. A zároveň sa tým ušetrí viac kb.
Ináč PNG je samozrejme označované za bezstratový formát. Ja tam strata len keď sa použije menej farieb. PNG-24 vs PNG-8.
Obrázky na webe sú zaujímavé aj v tom, že sa dajú používať v kvalite 0% (objavil som to až nedávno). Ide o to, že sa použije nejaké vysoké rozlíšenie, ktoré sa potom nastaví na malú veľkosť.
napr. 1,6MB obrázok sa zmenší na 140kb pri kvalite 0%. Ale keď ho na webe človek zobrazí v rozlíšení napr. 800x600px, tak v podstate nebude vôbec vidno, že je kvalita 0%. Ukážka: http://www.imageoptimization.info/Compressive
V konečnom dôsledku tak na mobiloch môžu obrázky vyzerať lepšie, keďže taký mobil má vysoké rozlíšenie na malej ploche. A zároveň sa tým ušetrí viac kb.
Ináč PNG je samozrejme označované za bezstratový formát. Ja tam strata len keď sa použije menej farieb. PNG-24 vs PNG-8.
Dakujem velmi pekne za radu. Vyskusala som vase rady ale vysledok bol opat rovnako zly 🙁 Fotka ma 43kB a rozmer 650x439px
( https://www.facebook.com/photo.php?fbid=10202710327757575&set=p.10202710327757575&type=1&theater )…Na blogu mi výrazne stmavnú farby čo vôbec nezodpovedá skutočnosti. Kde robím chybu? Ale keď túto istú fotku pridám na FB tak je ako z photoshopu…Uz som rozmyslala ci to nemoze byt fakt tym blogom (chcem vsak upresnit ze ide o blogger ktory je zdarma k disp. cez gmail)
Dakujem velmi pekne za radu. Vyskusala som vase rady ale vysledok bol opat rovnako zly 🙁 Fotka ma 43kB a rozmer 650x439px
( https://www.facebook.com/photo.php?fbid=10202710327757575&set=p.10202710327757575&type=1&theater )…Na blogu mi výrazne stmavnú farby čo vôbec nezodpovedá skutočnosti. Kde robím chybu? Ale keď túto istú fotku pridám na FB tak je ako z photoshopu…Uz som rozmyslala ci to nemoze byt fakt tym blogom (chcem vsak upresnit ze ide o blogger ktory je zdarma k disp. cez gmail)