A weboldaladon használható képekről néhány gondolat.

Az egyik kedvenc témám, így most azt sem tudom honnan kezdjem… de úgy gondolom, hogy az lesz a legjobb, ha szinte minden témakört érintünk a képekkel kapcsolatban. Olvashatsz a képek használatának jogi szabályozásáról, “lelőhelyekről”, fájltípusokról, méretekről, felbontásról, szerkesztésről, optimalizálásról, szóval lesz téma bőven.

Mit mond a jog?

A média tartalmakon (képek, videók, hanganyagok, stb…) túl, magát a szövegezést is a szerzői jog védi az illetéktelen felhasználástól. A képeknél maradva, ez röviden annyit jelent, hogy hivatalosan csak akkor használhatsz fel az internetről letöltött képeket a saját honlapodon, ha a kép tulajdonosa ahhoz hozzájárul, vagy rendelkezel a kép licencével. Persze, ezt lehet csűrni-csavarni, de a lényeg akkor is ez marad.

Erről a témáról, egy sokkal ügyesebb összefoglalót itt olvashatsz: Képtolvajok leggyakoribb alaptalan mentségei
(ez egyben egy példa is arra, hogyan “használd fel” mások írásait, korrekt és jogilag is rendezett módon)

A riogatásból ennyi is elég, inkább nézzük meg milyen lehetőségeid vannak, ha tiszta szeretnél maradni.

Stock fotók vásárlása

Több millió minőségi kép közül válogathatsz az ismertebb stock fotós honlapokról, de ezért cserébe a zsebedbe kell nyúlnod. Én a Shutterstock.com oldalt javaslom, ha valóban igényes és változatos képeket szeretnél vásárolni (pontosabban a felhasználás jogát vásárolod meg). A “Professzionális” csomag jelenleg 199EUR, cserébe 750 db képet tölthetsz le, amire egy hónapod lesz. Igen ez sok pénz, de nagy eséllyel egy előfizetéssel le tudsz tölteni hosszú évekre elegendő mennyiségű képet, amit a weboldaladon, Facebook oldaladon és a nyomtatványaidban is felhasználhatsz.

Jelképes 10% kedvezményt kupont tőlük is kapsz, de a google keresőben előnyösebb kupont is találhatsz.

shutterstock-minta

Shutterstock tippek

Abban az esetben, ha a vásárlás mellett döntesz, szükséged lesz a regisztrációra és egy bankkártyára. A vásárlás menete viszonylag egyszerű, csak arra figyelj, hogy a csomag választásnál a Professzionális csomagban az 1 hónap opciót jelöld be. A fizetésnél használd a kuponkódot, és a vásárlás után a fiókodban feltétlenül kapcsold ki az automatikus megújítást, ha nem akarod, hogy a díjat minden hónapban levonják a számládról. Ez nem átverés, csak egy ügyes, de bosszantó valami.

Pixel

Pixel képek esetén a lehető legnagyobb méretben tölts le. Nem is értem kinek szánták a kis méreteket, hiszen ha már egyszer fizetsz érte, akkor a lehető legnagyobb ostobaság lenne a legkisebb méretet letölteni. Nagy képből kicsit könnyen, kicsiből viszont csak ronda nagyot lehet készíteni.

pixel-image

Vektor

Vektoros képek szerkesztéséhez spéci program kell, ezért ha nincs benne rutinod vagy ismerősöd, aki segít a szerkesztésben, akkor inkább kerüld a vektoros formát. Mindjárt elmagyarázom a vektoros és pixeles képek közötti különbségeket, és akkor jobban fogod érteni, hogy melyik a helyes választás.

vector-image-small

A képek két nagy csoportja, pixel és vektor

A két nagy csoport még további típusokra is bontható, de most nem bonyolódnék bele. Alap információnak annyi is elég, hogy a pixeles képek képpontokból állnak, a vektorosak pedig geometriai alakokból rajzolt képek. A vektoros képek minőségveszteség nélkül nagyíthatók, míg a pixeles képek nagyítása minden esetben ront az eredeti kép minőségén, de a látványos különbség leginkább a két kép részletességében érezhető.

Pixel képek

A pixeles képek további csoportokra bonthatók, és ezek közül a két legfontosabb amit talán érdemes ismerned, a jpg és png. A jpg képekkel találkozhatsz a legtöbbet, ilyen képek például a digitális fényképezővel vagy telefonnal készített pixeles képek, amelyek meghatározott számú függőleges és vízszintes képpontokból állnak. A két oldal képpontjainak szorzata adja eredményük a felbontást, ami a kamerák szerintem nem a legfontosabb tulajdonsága is egyben: 3 MP, 5 MP, 20 MP….

A két típus közötti számos különbség közül én most az átlátszó réteget emelném ki, ami a png fájlok egyik előnyös tulajdonsága, és amivel a jpg tulajdonságának hiányosságát küszöbölhetjük ki. A png formátum lehetőséget biztosít arra, hogy a képünk bizonyos részletei átlátszóak legyenek, amire a jpg alkalmatlan. Talán most még nem értékeled nagyra, de az átlátszóság egy igen hasznos tulajdonság. Tájképek esetében persze nincs jelentősége az átlátszóságnak, mivel szinte minden képpont hasznos információt tartalmaz és a képen nincs szükség átlátszó területekre, de például a céges logód esetében ez már nem egészen van így. A logókkal szemléltethető leginkább a png előnye, amit a képen is láthatsz. A logón kívül eső terület átlátszó, így az bármilyen háttérre helyezve (a képen szürke) tökéletes látványt biztosít, ellenben a jpg típusú logó nem mutat jól, pontosabban nagyon ronda a színes háttéren.

Sokan készítenek házilag “látványos” powerpoint bemutatókat, amiben sokan követik el azt a hibát, hogy színes hátterű alapon dolgoznak és azokra raknak hátterezett (körbevágott) termékeket, logókat stb., de azokat jpg formátumban, aminek az lesz asz eredménye, hogy a színes háttérben fehér szögletes képeken jelenik meg a kívánt tartalom, ami azért elég szerencsétlen megoldás. Sokan gondolják, hogy mindegy az, jó lesz az úgy is, de igényesebb anyagokat készíteni nem egy lehetetlen feladat. A hátterezésről, termékfotóról is írok még bővebben.

Nem könnyű elmagyarázni és így megérteni sem, hogy mi az eddig tárgyalt átlátszóság haszna, mivel sok esetben az egyéni ízlés határait súrolja a téma, és abban az esetben, ha nem szeretnél a jpg és png témakörbe jobban belebonyolódni, akkor legalább a céges arculati elemeiddel legyél tisztában. Legyen a birtokodban a céges logód eredeti vektoros formában: ai, eps, cdr, típusok egyikében legalább, és feltétlenül legyen meg eredeti méretű  és kb. 50 mm magas png formában is.

png-tipus

Vektoros képek

Átlagos felhasználóként nem igazán fogsz vektoros képeket használni vagy szerkeszteni, de érdemes tudnod róla, hogy ettől ez a fájltípus még létezik. Ahogy azt a Shutterstock használatánál említettem, hogy kerüld a vektoros képek letöltését, nem feltétlenül igaz. A vektoros képeknek azon túl, hogy veszteségmentesen módosítható a mérete, van még egy számunkra hasznos előnye is, ami pont a kép felépítéséből adódik. Mivel a vektoros képek geometria alakzatokból és görbékből épülnek fel, így azok alkotóelemei külön módosíthatók méretében, formájában és színeiben egyaránt, de ezek a módosítások csak a vektoros képeket is kezelni képes szoftverrel valósíthatók meg. Számodra ez annyit jelent, hogy a vektoros képeket ne csak mint egy végleges kompozíciót nézd, hanem próbáld meg fejben elemeire bontani a képen látható minden egyes elemet, mivel minden egyes eleme külön is használható és módosítható. Mutatom mire gondolok…

A példámon egy klasszikus vektoros képet látsz a shutterstock gyűjteményből. A retro tárgyak közül kiemeltem a varrógépet, és további elemeire bontottam. Láthatod, hogy szinte minden egyes alkotóeleme külön egységként is kezelhető, nagyítható minőség romlás nélkül, színezhető, forgatható, sokszorozható stb..

A vektoros képek letöltését tehát nem azért nem javasoltam, mert az egy haszontalan formátum, sokkal inkább azért, mert a képen látható módosításokhoz speciális programra lesz szükséged és rengeteg időre. Ezek hiányában fölöslegesen pazarolnád a 750 darabos letöltési limited, de persze nyugodtan töltsd le azt ami tetszik, amiből bizonyos részletekre szükséged lenne, mert akár egy grafikai stúdió is tud segíteni a módosításban.

A netreveled.hu honlap fejrészében lévő logó is több vektoros fájlból kiemelt elemek összessége, amit png formátumba mentettem el egy képszerkesztő programból.

vektoros

Képek használata a honlapokon

A honlapon megjeleníthető képek jogi hátterét, alapvető típusait és a stock fotókat már átbeszéltük, most pedig nézzük meg, hogy a honlapodon hogyan használd képeket. Számtalan leírást találsz a neten erről a témáról, és most, hogy nagy eséllyel a saját honlapodat készíted, érdemes bővebben is tájékozódnod, mert nem mindegy mit és hogyan csinálsz.

Képméretek, optimalizálás

Aranyszabály, hogy a weboldalon optimalizált, azaz a lehető legkisebb fájlméretű! képeket jeleníts meg, így ha nem érted ezt a mondatot és nem olvasod tovább, akkor szinte biztos, hogy rossz képeket fogsz feltölteni. A képeknek pixelben meghatározott szélessége és magassága van, és ahogy már írtam, ennek a szorzata adja azt a mértékegységet, amiről tévesen azt hisszük, hogy a csilliárd megapixeles kamera a tuti választás. Ebbe most nem megyek bele, maradjunk a méreteknél. A modern fényképezők, de még az évekkel korábbiak is “hatalmas” méretű képeket készítenek, ami a weboldalakhoz túl nagy. Ellenben a nyomtatáshoz és további grafikai munkákhoz kifejezetten hasznos a nagy felbontás, ezért ha csak teheted mindig a lehető legnagyobb méretű beállítást válaszd a fényképezőn. Ezekből a nagy méretű képekből jóval kisebbekre lesz szükséged a weboldaladon, ezért egy alap képkezelő programot, vagy egy online képszerkesztőt tudnod kellene majd használni.

A számítógépeden tárolt képek tulajdonságait magad is leellenőrizheted, ha a képen jobb egérgombot megnyomva a felugró ablakban a Tulajdonságokat választod, majd átváltasz a Részletek fülre.

Tehát van egy csilliárd megapixeles fényképeződ, amivel mondjuk lefotózod a termékeidet a webáruházadhoz. A fotóid méretének, felbontásának és tömörítettségének beállításával tudod optimalizálni a képeidet, amihez az egy hasznos szoftver lehet az XNview. A programot innen tudod letölteni: http://www.xnview.com/en/xnview/, a használatát pedig itt találod: XNview használati útmutató
A képekkel átméretezését és optimalizálást az XNview program bemutatásában részletezem, itt pedig folytatom az általánosságokkal.

  • a képeidből mindig tarts egy eredeti másolatot akár a gépeden, akár egy külső tárolón, és az eredeti képeid másolatával dolgozz, azokat méretezd át,
  • az interneten használt képek fájlneve is kiemelt jelentőségű, ezért az átméretezett képeket nevezd át olyan ékezet, szóköz és speciális karakter nélküli nevekre, ami lehetőleg az adott honlap tartalmának a kulcsszavát is tartalmazza,
  • fájlnevekben a szóköz helyett a kötőjelet (-) használd és ne az aláhúzást (_)
  • soha ne legyen a fájlnév utolsó karaktere pont (.), ami a képeken túl minden más fájlnévre is igaz. Sokan dátumokkal nevezik el a fájlokat, többek közt a képeket is, ami hibát okozhat
optimalizalas