Základy práce s obrázkami pre webblogy Tlačiť E-mail
Za úspešným webom

Logo IrfanViewObrázky sú neraz nevyhnutnou súčasťou obsahu článkov. Na internete majú často úlohu len upútať, ale neraz sú nutné pre sprevádzanie textového obsahu. V tomto článku si vysvetlíme stratégie prístupu ako aj technické riešenia tejto problematiky. Na ukážku sa oboznámime s free-softom IrfanView.

Na začiatok si povedzme, že používanie obrázkov, fotiek na internete má iné zásady ako napr. pri novinách alebo graficky kvalitných magazínoch. Je dôležité si uvedomiť dve veci: svet internetu je plný kontrastu a monitor nemá takú vykresľovaciu schopnosť ako napr. atramentová tlačiareň. Z toho vyplývajú dve zásadné veci:

  1. Obrázky využité na internete by mali byť aj farebne aj kompozične silno kontrastné a ostré.
  2. Obsah obrázkov by mal byť kompozične jednoduchý, zameraný najlepšie na jednu vec danú silno do popredia.

Na obrázkoch vidíme rozdiel v zaujatí. Na upravenom obrázku boli použité techniky ako kompozičné orezanie, zvýšený kontrast a pridaná farebná sýtosť.

Tieto 2 body sú základom filozofického prístupu. Ako to technicky realizovať, si ukážeme v druhej časti článku.

Technický prístup realizácie úprav obrázkov

Obrázok použitý na internete by mal byť do počtu bajtov čo najmenší, ale pri zachovaní dobrej kvality. Z toho nám vyplýva správny použitý formát obrázku: najčastejšie je to formát jpg, ktorý má stratovú kompresiu, ale tá strata pri vysokej kvalite, spravidla nad 80 % ponúkanej škály kvality je voľným okom neviditeľná. Druhým najčastejším formátom je gif, ktorý obsahuje ale len 256 farieb a tak je využiteľný len pri obrázkoch s nízkym počtom farieb. Jeho výhodou je transparentnosť. Ostatné formáty môžeme pre skromnosť článku vynechať.

Základné operácie s obrázkami, ktoré by mal každý laický tvorca webu zvládnuť, sú:

  • zmena veľkosti, spravidla zmenšenie (Resize)
  • orezanie (Crop)
  • zmena expozície – jasu a kontrastu (Exposure alebo Lithness and Contrast)
  • zvýraznenie farebnej sýtosti (Saturation)
  • posun farebného odtieňa (Hue)

Tieto základné operácie zvládne väčšina grafických programov, pričom mnohé z nich sú aj free-softy pre Windows. Photoshop (platený a zbytočne mnohofunkciový), ACDSee (platený a jeden z najideálnejších), IrfanView (zdarma, tiež jeden z ideálnych), GIMP (free variant Photoshopu)... mnohé softy dodávané s kúpou fotoaparátu alebo tlačiarne. Stačí, aby ste tieto funkcie v nich našli a naučili sa ich využívať.

Práca s IrfanView

Program IrfanView sa stal veľmi populárnym. Jeho hlavné výhody sú, že je zdarma, je jednoduchý a tiež, že zaberá strašne málo pamäte, takže ako prehliadač obrázkov v momente reaguje. Umožňuje všetky najdôležitejšie vyššie spomenuté úpravy a všetky sú volateľné pomocou klávesových skratiek. Dokáže oveľa viac, stačí len hľadať a spoznávať. Stiahnuť aktuálnu verziu si môžete z domovskej stránky IrfanView.

Orezanie prebieha tak, že myšou označíte obdĺžnik na obrázku z toho, čo chcete orezať a stlačíte klávesovú skratku Ctrl + Y alebo pôjdete do Edit » Crop selection.

Zmenu veľkosti vyvoláte klávesovou skratkou Ctrl + R, alebo Image » Resize/Resample image. Môžete meniť veľkosť buď cez zadanie jednotiek alebo percent.

Posledné dôležité kroky sú šikovne v IrfanView zahrnuté pod jednou kartou, vyvolateľnou skratkou Shift + G alebo Images » Enhance colors... Tu môžete meniť nastavenie kontrastu (Contrast) a jasu (Brightness) a tiež farebnú sýtosť (Saturation). Pre lepšie premietnutie nastavení môžete stlačiť „Apply to original“.

Potom ostáva už len zmenený súbor uložiť. Môžete to urobiť buď prepísaním originálu Ctrl + S (File » Save), kedy ale prídete o pôvodný obrázok. Alebo bezpečnejšie uložením nového zmeneného súboru klávesovou skratkou S (Files » Save as). IrfanView sa vás spýta, v akom formáte chcete zmeny uložiť, zvolíte jpg, pokiaľ ste editovali jpg, bmp, tif a pod. alebo zvolíte gif či png, ak ste editovali gif či png súbor a potrebujete zachovať jeho transparentnosť.

Obrázok pre váš článok máte na svete. Stačí ho len nahrať na server a zapracovať do textu.

Staršie internetové prehliadače rozbíjajú rastrové vykreslenie

Je celkom bežné, že obrázok zobrazený na stránke má v skutočnosti iné rozmery. Pri dnešných rýchlostiach internetu je zanedbateľnou nevýhodou, že sa dlhšie načítava. Naopak, výhodu to má, pokiaľ je predpoklad, že daný článok bude aj vytlačený na papier. Vtedy je lepšie, ak je originálny obrázok väčší.

ženská tvár

Je dobré si uvedomiť, že pri nastavení zmeny veľkosti dochádza u starších internetových prehliadačoch (napr. Internet Explorer 6) „k rozbitiu rastra obrázka“. Vyššie môžeme pozorovať, že obrázok vpravo je čitateľnejší a krajší. V nasimulovanej situácii cez IE 6 nemal menenú veľkosť. Bol zachovaný v originálnom rozmere 210 x 166 px. Na rozdiel od obrázka vľavo, ktorý mal originálnu veľkosť 420 px, ale zmenšenú na 214 px. Rozdiel vidno najmä na vlasoch prechádzajúcich cez šatku. Pozrime si tiež zväčšeninu nižšie pre lepšie porovnanie.

Dnes je ale už minimum užívateľov so starými prehliadačmi a tak tento technický aspekt sa stáva irelevantný.