Aké technické parametre má mať fotka určená na blog?

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:

  1. veľkosť (rozmer) v pixeloch
  2. 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.

Zdieľajte obsah s priateľmi:

3 komentáre pri “Aké technické parametre má mať fotka určená na blog?

  1. 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.

  2. 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)

Komentáre sú uzavreté.