Blog o vývoji softvéru na mieru

Prečítajte si praktický návod ako jednoducho upraviť obrázky skôr ako ich umiestnite na webové stránky.

Ako upraviť rozmery obrázkov

V predchádzajúcom článku Ako správne používať obrázky na webových stránkach sme si povedali základné pravidlá pre použitie obrázkov na webových stránkach.

Teraz vám prinášame praktický návod.

Povedzme, že vytvárate katalóg produktov a chcete mať všetky obrázky s rovnakými rozmermi, aby katalóg na webových stránkach vyzeral celistvo.

Zvoľme povedzme rozmer 800 x 600 px. Označenie px predstavuje jednotku s názvom pixel. S týmto označením sa stretnete najčastejšie pri príprave obrázkov pre web.

V každej inštalácii Windows máte program s názvom Skicár, ktorý vám bude stačiť na základné úpravy obrázkov. Takže vyhľadajte program Skicár a spustite ho.

Prostredie programu Skicár je zobrazené na nasledovnom obrázku.

Kliknite na voľbu Súbor a zobrazí sa vám menu, v ktorom potom vyberte voľbu Otvoriť.

Následne si nájdite vo vašom počítači obrázok, ktorý chcete upraviť a otvorte ho.

Obrázok v našom príklade má rozmery 1920 x 1279 px, čo nám Skicár ukáže vo svojej spodnej časti  ako to znázorňuje nasledovný obrázok.

Pre zmenu veľkosti kliknite na voľbu Zmeniť veľkosť v hornej časti programu ako vidieť na obrázku vyššie.  

Vyberte si, že chcete zmeniť veľkosť pre Pixely. Povedali sme si, že chceme výsledný obrázok s rozmermi 800 x 600 px. Ako vidieť, ak zadáme šírku 800 px, tak výslednú  výšku nám program ukazuje, že bude 532 px, ale my chceme výšku 600 px.

Preto zadáme výšku 600 px a výsledná šírka bude 900 px. To nám však nevadí, pretože to vyriešime v ďalšom kroku orezaním obrázka.

Potvrdíme teda zmenu rozmerov obrázka 900 x 600 px. Týmto spôsobom môžeme obrázky nielen zmenšovať, ale aj zväčšovať.

Ako orezať obrázok

Ako vidíte obrázok už má nové rozmery 900 x 600 px. Teraz ho orežeme na šírku 800 px. 

Kliknite ľavým tlačidlom myši na pravý okraj obrázka na značku, ktorú vidieť na obrázku vyššie. Stále držte ľavé tlačidlo stlačené a posúvajte sa s myšou doľava.

V dolnej časti obrazovky uvidíte ako sa šírka obrázka zmenšuje. Pokračujte až kým nedosiahnete požadovanú šírku, v našom prípade 800 px.

Niekedy sa môže stať, že myš je príliš citlivá a obrázok orežete príliš. Môžete sa vrátiť o krok späť kliknutím na šípku vľavo hore ako sme vám naznačili na nasledovnom obrázku a skúste potom obrázok orezať znovu.

Podobne ako šírku, môžete meniť aj výšku obrázka. Značku na uchopenie myšou nájdete na spodnom okraji obrázka. Stačí keď sa posuniete úplne dole.

Upravený obrázok uložíte späť do počítača kliknutím na ikonu diskety vľavo hore alebo kliknutím na voľbu Súbor a následne výberom voľby Uložiť.

Formát a veľkosť obrázka

Súbory obrázkov môžu byť rôzneho typu. Najčastejšie sa môžete stretnúť s obrázkami typu BMP, PNG, JPG, prípadne animovanými obrázkami GIF.

Obrázky BMP pre web vôbec nepoužívajte, pretože ich veľkosť pri rovnakom obsahu obrázku je najväčšia, takže pre rýchle načítanie webových stránok je to ten najhorší formát.

Obrázky typu PNG majú tú výhodu, že môžu byť čiastočne aj priesvitné, takže môžu byť na webe cez ne viditeľné aj prvky, ktoré sú na webe pod nimi.

Obrázky typu JPG sú výhodné v tom, že pre rovnaký obsah obrázka majú z formátov BMP, PNG a JPG najmenšiu veľkosť. Ak teda nepotrebujete priehľadný obrázok, snažte sa používať typ obrázka JPG.

Ak je váš obrázok iného typu ako JPG, vôbec to nevadí. Pokojne môžete vychádzať aj z obrázka PNG, či BMP. Program Skicár vám umožní pôvodný typ obrázka zmeniť.

Pri ukladaní obrázka vyberte voľbu Uložiť ako

Pri ukladaní vyberte typ obrázka JPEG a váš nový obrázok je na svete.

Voľbu Uložiť ako môžete použiť taktiež aj na zmenu mena obrázka a zachovať si tak pôvodný neupravený obrázok a s novým menom uložiť upravený obrázok.

Tak s chuťou do toho, nech máte krásny web!