Az internet kezdete óta a képek azon összetevők részét képezik, amelyek nem hiányozhatnak egyetlen weboldalról sem. Legyen szó fotókról vagy grafikákról, a látvány vonzza a látogatók figyelmét, és sok esetben nyilvánvaló lehetőséget kínál hozzáadott érték, a projektek átértékelése, miközben kiemelik a szövegekben bemutatott információkat, pontosítják a tartalmat, további adatokat kínálnak (például infografikák esetében), vagy reflektálásra ösztönző elemként működnek. Bár jelentősége egyértelmű, évek óta vannak bizonyos pontatlanságok az alkalmazott képformátumok tekintetében. Ebben az értelemben, sokféle lehetőség Nem könnyítik meg a weboldalakért felelős személyek számára, hogy megtalálják a megfelelő formátumot minden alkalomra, ami még relevánsabb szerepet kap a mobil eszközök esetében.

képformátumok

  1. Milyen típusú grafikus formátumok vannak?
  2. Képformátumok bitképekhez
    1. JPG formátum
    2. PNG formátum
    3. GIF formátum
    4. TIFF formátum
    5. PSD formátum
    6. BMP formátum
  3. Vektor képformátumok - még nem olyan népszerű az interneten
    1. EPS formátum
    2. SVG formátum
  4. A négy legnépszerűbb grafikai formátum: összehasonlító táblázat

Milyen típusú grafikus formátumok vannak?

Ma már sok képformátum létezik a 2D-s grafikákhoz és fotókhoz, ahol a megfelelő funkciók jelentősen eltérnek. Általánosságban elmondható, hogy a hagyományos bitképeket vagy raszteres grafikákat meg lehet különböztetni a ritkán használt vektorképektől. Az előbbi esetében a kép sok konkrét pontról, vagyis pixelekből áll. Minél kisebb ezeknek a pixeleknek a mérete, és minél több van, annál nagyobb felbontás hullám minőség a képfájl és ezért a fájlméret is. A fájl kiterjesztése vagy kicsinyítése mindig megfelelő minőségromlással jár, mert minden változtatással, a pixeleket a legvilágosabban a kis négyzet alakú szerkezetekként érzékelik.

Ez a tény viszont a vektorgrafika legnagyobb jellemzője, amelyet bármilyen módon minimalizálni vagy maximalizálni lehet anélkül, hogy befolyásolná azok minőségét. Ennek az az oka, hogy a vektoros képek nem egyes pixelekből állnak, hanem inkább vektorokkal vannak ábrázolva. Idején pikkelyes, az őket alkotó alakzatok, amelyek pontos adatokat tartalmaznak a méretről és a hosszúságról, automatikusan alkalmazkodnak az új teljes mérethez. Azonban minél összetettebb a képtartalom, annál kevésbé alkalmasak a vektorformátumok. Így bár a vektorokkal ellátott fotó utánozható, a számtalan aspektus, fényhatás és árnyék csak pixelekkel reprodukálhatók. A kétféle grafika különbségeiről és hasonlóságairól részletesebb információkat a vektorképek és a bitképek összehasonlító cikkében talál.

Képformátumok bitképekhez

A raszteres grafikákat gyakrabban használják, mint a vektoros képeket, annak ellenére, hogy hátrányosak a méretezéssel kapcsolatban, mivel gyorsan generálódnak és alkalmasak szinte bármilyen helyzet. Így tárolhatók a weboldalak grafikai elemei pixel formátumban, például JPG vagy PNG formátumban, ugyanúgy, mint a bonyolultabb grafikák.

A pixelábrázolás erőssége azonban a fényképes diavetítés, Kiemelkedő szerepük van a kortárs webdesignban. Ez lehetővé teszi a fényképek beolvasását és bitképként történő digitalizálását - vagy szerkesztését is. A már említett képformátumok mellett vannak más ingyenes és saját formátumok is, bár csak néhány használható általános módon.

JPG formátum

A JPG vagy JPEG formátum valójában a szabály (ISO/IEC 10918-1), amely 1992-ben jelent meg, és amely a képek tömörítésének különböző eljárásait írja le. Mivel a szabvány nem tartalmaz rendelkezéseket a képek mentésének módjáról, további formátumot igényel, így a szabványt JpegFile Interchange Format (JFIF) minden böngészőhöz. Más kevésbé használt alternatívák Állóképcsere fájlformátum (SPIFF) és grafikus formátum JPEG hálózati grafika (JNG).

A JPG tömörítési formátum úgy módosítja a képpontok szokásos felépítését, hogy minden 8 x 8 képpont egy blokkba csoportosul, amelyet minden lépésben halmazként számolnak át. Ebben a folyamatban van például a az RGB színtér átalakítása színvilággáYCbCr és az ún aluláteresztő szűrő, ahol magasabb frekvenciákat szűrnek a fájlméret csökkentése érdekében. A választott tömörítés mértékétől függően a folyamat minőségromláshoz kapcsolódik, mivel a képen lévő összes információ nem tartható fenn. A W3Techs statisztikái szerint a weboldalak körülbelül háromnegyede használja a JPG formátumot, ami a tömörítéssel társított fájlméret hatékonyságának tulajdonítható.

Javasolt alkalmazás: fotótárolás és kiadás.

PNG formátum

A web egyik legnépszerűbb formátuma a PNG (Hordozható hálózati grafika), a világháló-konzorcium (W3C) által elismert univerzális képformátum, amely először 1996-ban jelent meg az interneten. A GIF (Graphic Interchange Format) modern, szabadalommentes alternatívájaként a PNG formátum kiemelkedik a tömörítse a képeket veszteség nélkül és max. 24 bit/pixel színmélységet (16,7 millió szín) kínálni egy 32 bites alfa csatornával. A GIF-től eltérően a PNG formátum nem generál animációkat.

A PNG mind az átlátszóságot, mind a félig átlátszóságot támogatja (az integrált alfa-csatornának köszönhetően), amelyek minden képtípusra alkalmazhatók, és az átlapolás miatt, amely lehetővé teszi a képfájlok gyorsabb összetételét a feltöltés során. A szín- vagy fényerő-korrekciós mechanizmusok biztosítják, hogy a PNG formátumú képfájlok nagyjából azonosak legyenek a különböző rendszereken. Az olyan eszközökkel, mint a pngcrush, fel lehet használni a grafika PNG formátumban történő tömörítését. A veszteségmentes tömörítési folyamat miatt a fájlok viszonylag nagyobbak, ezért a formátum nem annyira alkalmas fényképek megjelenítésére, mint például a JPG. A PNG formátum lehetőséget nyújt a színtér csökkentésére (1-ről 32 bitre pixelenként).

Javasolt alkalmazás: kis képek és grafikák (logók, ikonok, sávok stb.), átlátszó grafikák, veszteségmentes fotók tárolása és közzététele.

GIF formátum

A CompuServe online portál létrehozta a Grafikus csereformátum, GIF, 1987-ben az akkor fekete-fehér X BitMap (XBM) formátum színes alternatívájaként. Az akkori más megoldásoktól eltérően, mint a PCX vagy a MacPaint, a GIF fájlok kevesebb tárhelyet igényeltek a hatékony tömörítés LZW (adattömörítés a Lempel-Ziv-Welch algoritmussal), ezért a formátum nagy népszerűségnek örvendett az Internet kezdeteiben. A JPG és a PNG kép- és grafikus formátumban átvette a vezetést, bár a GIF89a (1989) verzió óta a formátum csoportosulhat több kép egyetlen fájlban, ami a kis animációk készítésének kedvenc formátumává tette.

Az összes GIF-színinformáció egy táblázatba, a színpalettába kerül. Ez a táblázat tartalmazza akár 256 szín (8 bit), tehát ez a képformátum nem alkalmas fényképek megtekintésére. Mindegyik adat átlátszónak is definiálható, bár a modernebb PNG formátumtól eltérően a félig átlátszó nem lehetséges, ezért pixel jelenik meg vagy sem.

Ajánlott alkalmazás- Animációk, clip artok vagy logók készítése, ahol a kisebb színmélység nem jelent problémát.

TIFF formátum

A TIFF (Tagged Image File Format) egy grafikus formátum, amelyet a nyomtatott adatok és nagy felbontású képek továbbítására használnak. 1986-ban a Microsoft fejlesztette ki az Aldus-szal együttműködve, amely ma az Adobe tulajdonában van, és optimalizálták a szkennelt képek színelválasztásának és színprofiljainak (ICC-profilok) integrálására. A TIFF is támogatja a CMYK színes modell és minden színcsatornához 16 bit színmélységet tesz lehetővé (a teljes mélység 48 bit). 1992 óta lehet veszteségmentes formátum tömörítése a fent említett LZW algoritmus segítségével, amelyet a GIF-ben is használnak.

Jellemzőinek köszönhetően a TIFF közös szabványként képviselteti magát olyan képek esetében, amelyekben a minőség fontosabb szerepet játszik, mint a fájlméret. Ezért használja fel szerkesztőségek és a nyomtatott sajtó, valamint a monokróm grafikus fájl, amilyen a műszaki rajzokkal lehet. Tárolására és bemutatására földrajzi információk rácsok (térképek, légi felvételek stb.) alapján létrehozták a GeoTIFF formátumot, amely további címkékkel van ellátva.

Ajánlott alkalmazás- Minőségi, nagy felbontású képek továbbítása nyomtatáshoz

PSD formátum

Az Adobe többek között a saját fejlesztésű PSD (Photoshop Document) formátumot kínálja a grafikai projektek tárolására Photoshop. Ez kiemelkedik a rétegekkel, csatornákkal vagy vektorokkal kapcsolatos információk biztosításának tényéről, amely lehetővé teszi azok későbbi szerkesztését. Így szerkesztheti a hozzáadott, duplikált, elrejtett, áthelyezett vagy törölt rétegeket, valamint az egyes elemeket. Menthetők ugyanabba a PSD fájlba mind a rétegek, mind a megfelelő veszteségmentes képadatok. Ez a képformátum különösen praktikus a nagy felismerési értékű grafikáknál, például logóknál vagy szalaghirdetéseknél, amelyeket gyorsan és szükség szerint hozzá kell igazítani az egyes platformokhoz és képernyőméretekhez.

A PSD formátumú képeket korlátozások nélkül csak az Adobe Photoshop alkalmazással lehet megnyitni, így a Windows alkalmazások és a macOS közötti csere tökéletesen működik. Ily módon ezt a grafikai formátumot valamilyen módon a-nak nevezhetjük bármilyen rendszeren működő formátum. A PSD elsősorban tárolási formátumként működik a szerkesztési folyamat során. Az interneten történő szerkesztéshez a megfelelő fájlt konvertálni kell PNG formátum vagy JPG-re mielőtt feltöltené a szerverre, A képadatok veszteségmentes tárolása minden szinten lehetővé teszi hatékonyan módosítsa őket, de nagy mennyiségű adatot is hordoz. A PSD grafika konvertálásához csak olyan webeszköz szükséges, mint a Zamzar.

Ajánlott alkalmazás: a gyakran használt grafikák, elrendezési minták ideiglenes tárolása és újraközölése

BMP formátum

BMP (Windows Bitmap) a Microsoft és az IBM operációs rendszerek számára fejlesztették ki, és 1990-ben adták ki Windows 3.0-val, a bitképek tárolási formátumaként, legfeljebb 24 bit/pixel színmélységgel. A tömörítetlen képformátum minden pixelhez színértéket rendel, ezért a fájlok általában nagyon nagyok, ezért a formátum nem alkalmas weblapok használatára.

Ajánlott alkalmazás: fényképek/grafikák offline tárolása

Vektor képformátumok - még nem olyan népszerű az interneten

A vektoros képek különösen alkalmasak weboldalakon történő alkalmazásra, mivel nem igényelnek akkora tárhelyet, mint a bitképek. Ennek formátumai nem a pixel színének százalékos arányát írják le az egyes képeken, hanem a színt tárgyakatamelyből a kép áll. Itt szerepelnek a kerek és görbe felületek, a szöveg, az egyenes és hajlított vonalak stb., Valamint azok elhelyezkedése, méretei, színei és egyéb jellemzői. A veszteség nélküli méretezés fent említett aspektusával kombinálva a adaptív és akadálymentes web elemek megvalósítása gyerekjátékká válik. Ezenkívül a vektoros formátumú fájlokban bármikor változtathatók, bár a bonyolultsági szint a képfájlok progresszív nehézségével jelentősen megnő. További előny a bitképekkel szemben az, hogy animációkat készíthet JavaScript-sel.

EPS formátum

Az Aldus és az Altsys szoftvergyártókkal együttműködve az Adobe kifejlesztette és közzétette az EPS vektor képformátumot (Kapszulázott PostScript). Ennek a formátumnak a neve összefügg azzal a ténnyel, hogy a fájlokat a PostScript oldalleíró nyelven menti, ami lehetővé teszi összetett oldalak szerkesztését lézernyomtatókban és megvilágítási egységekben. Ebből a célból a PostScript leírja a a nyomtatott oldal elemei, például vonalak, körök, képek stb.., és információkat szolgáltat a helyzetéről. Az EPS a képekre is kiterjeszti ezeket az információkat, pontos adatokkal a kimeneti méretre, az ún határoló doboz. Opcionálisan az EPS fájlok alacsonyabb felbontású előnézetet tartalmaznak, amely helyőrzőként szolgálhat. Az Adobe képformátum az egyes objektumokat a későbbi kimeneti eszközöktől függetlenül írja le, lehetővé téve a különböző kimeneti adathordozók cseréjét.

Az EPS-t főleg nyomtatott médiában használták, de felváltotta az utód PDF formátumban (Portable Document Format), amely a kisebb fájlméret miatt alkalmasabb e-mailek küldésére. Webes projektekhez egyaránt alkalmas a történelmi EPS és a modern PDF, amelyet inkább szöveges dokumentumok cseréjére vagy bemutatására használnak.

Ajánlott alkalmazás- Összetettebb nyomatok leírása (a formátum elavult)

SVG formátum

Míg sok más vektoros képformátum, például az Al (Adobe Illustrator Artwork) formátum nem alkalmas a webes környezetre, az SVG (Méretezhető vektorgrafika), amelyet a W3C ajánlott, megerősíti a vektoros képfájlok lenyűgöző előnyeit. A kétdimenziós vektoros képek leírásának specifikációja, amely a XML nyelv, komoly alternatívává válik a hagyományos raszteres grafikáknak, mivel sok böngésző támogatja a HTML5-öt, különösen a mobil és adaptív weboldalak esetében. Ebben az értelemben az SVG fájlok felajánlják a veszteség nélküli méretezhetőség és gyakran nagyon alacsony az adatmennyiség, ezek az előnyök:

  • Minden prezentációs attribútum lehet, például színek, betűtípusok stb manipulálni a CSS-szel.
  • A szkriptek a felületen keresztül férhetnek hozzá a tartalomhoz NAP (Dokumentum objektum modell).
  • A gépek tudnak olvasni svg grafika.
  • A megfelelő kód külön fájlként vagy közvetlenül a dokumentumban jelölhető és adaptálható HTML.
  • Lehet ösztönözni különböző módon (SMIL, JavaScript, CSS).

Az SVG formátum kiváló választás, különösen a tartalmat tartalmazó grafikák esetében szimbólumok (pl. logók), vagy amelyeknek reagálniuk kell a weboldalon található felhasználói kérésekre (dinamikus diagramok). Ez a vektor képformátum ideális is műszaki grafika. A fent említett W3Techs statisztikák azt mutatják, hogy az SVG-t a legtöbb webes projektben nem használják, ellentétben a raszteres grafikával. Az SVG vektoros képintegráció működésével kapcsolatos részletes információkért keresse fel útmutatónkat.

Ajánlott alkalmazás: technikai vagy interaktív grafika (logók, gombok, ikonok stb.)