A képek minden weboldal alapvető részét képezik. De a velük való együttműködés során figyelembe kell venni a minőség és a letöltési méret közötti szükséges egyensúlyt. A jó minőségű képekkel rendelkező webhely sok sávszélességet fog elfogyasztani, és lassan jelenik meg a böngészőkben, ami büntetheti a viselkedést: a felhasználók elhagyják a webhelyet, ha túl sokáig tart a megjelenítés.
Az interneten használt képformátumok
Ezért ismerni kell a weboldalon használható különféle képformátumokat, és tudni, hogy mikor válasszuk az egyiket vagy a másikat. A leggyakrabban használt formátumok három: JPG vagy JPEG, GIF Y PNG. Mindhárom a bitkép kép, vagyis egy képet úgy reprezentálnak, hogy az egyes pixelek színét és átlátszóságát kódolják, szemben a vektor formátumokkal (például SVG), amelyek vonalak, pontok és sokszögek tárolásával hozzák létre a képet.
A bitképformátumok nagy előnye, hogy lehetővé teszik az információk nagy tömörítését, ami könnyű fájlokat eredményez. Nagyítás közben azonban a kép torzulhat vagy elmosódhat, és megjelenítheti a képpontokat. Ezért gondot és tudást igénylő feladat annak ismerete, hogyan lehet optimalizálni a képeket úgy, hogy azok jó minőségűek és kis bájtúak legyenek.
A bittérképes kép nem más, mint a rács két pixelmérettel (magasság és szélesség). Például egy 200 x 200 képpontos képnek összesen 40 000 képpontja van, amelyek mindegyikének RGBA értéke lesz (piros, zöld, kék, alfa-csatorna vagy átlátszóság), és ezek az információk összesen 4 bájtot foglalnak el (32 bit) minden pixelre. Tehát egy 200 x 200 kép optimalizálás és tömörítés nélkül 160 000 bájt = 156 Kbyte méretű lesz. Könnyen beláthatja, hogy ez a méret túl nagy a webes szabványokhoz egy kis képen. Ezért képformátumokat használnak, amelyek tömörítik az információkat.
Ezután leírjuk a három képformátumot, majd sorozatot adunk arról, hogy mikor kell használni mindegyiket. Végül meglátjuk, hogyan optimalizálhatjuk a képeket olyan képszerkesztő szoftver segítségével, mint a Adobe photoshop vagy ZSINÓR.
JPG vagy JPEG (közös fényképészeti szakértői csoport)
A képek általában kiterjesztéssel rendelkeznek .jpg vagy .jpeg és manapság a leggyakrabban használt formátum. Veszteséges vagy veszteséges tömörítési algoritmus (amely nem teszi lehetővé az eredeti rekonstruálását a tömörített fájlból), amely azon a tényen alapul, hogy az emberi szem jobban megfogja a fényerő változását, mint a színváltozás, és hogy ezeket a változásokat jobban érzékeli homogén színű területek, mint a képen lévő objektumok szélein. Az alapjául szolgáló matematikai algoritmus eltávolít minden olyan információt, amely nem nélkülözhetetlen az emberi szem számára.
JPG Elvileg minden egyes pixelnek 24 bitet szán az információ tárolására, amellyel több mint 16 millió különböző színnel dolgozhat. De a megértés alkalmazásakor számos paramétert választhatunk az átalakítás vezérléséhez, mint például a kompresszió mértéke, százalékkal jelezve. Általános szabály, hogy 80% -a kiváló minőségű kép, 50% -a közepes és 10% -a alacsony minőségű. Az interneten általában 70 és 80% közötti értékekkel dolgozunk.
Ezenkívül a JPG lehetővé teszi képek mentését progresszív mód, más szóval, a kép több fázisban töltődik be, ami érdekes lehet lassú kapcsolatok esetén, bár valamivel nagyobb fájlokat állít elő. Az is lehetséges lágyítsa a képet a túl pixeles élek elkerülése érdekében, bár ez általában a teljes kép elmosódását okozza.
A JPG formátum Több ezer vagy millió színű képpel való munkához ajánlott: fényképek, színátmenetes képek. De nem alkalmas szöveges, egyszerű formájú vagy nagy egyszínű blokkokat tartalmazó képekhez, mert zajjal teli éleket generál. Ezenkívül egy JPEG-kép nem támogatja az átlátszóságot.
GIF (grafikus csereformátum)
Ez volt az első képformátum, amelyet az interneten használtak, mivel pontosan a számítógépes hálózatokon megosztandó képek tömörítésének módszerére gondolták. A képek kiterjesztéssel rendelkeznek .gif.
A JPEG-től eltérően a GIF a veszteségmentes tömörítési formátum, vagyis lehetővé teszi az eredeti rekonstrukcióját, mivel elmenti az egyes pixelek szín- és átlátszóságát, és nem torzítja a képet. Ez azonban csak 8 bittel működik minden egyes képpontnál, ami lehetővé teszi, hogy legyen csak 256 különböző színű. Ezzel a színkorlátozással szembesülve a GIF dithering módszerek sorozatát használja a GIF által elérhető korlátozott színpalettán belül nem létező színek szimulálására.
De a GIF rendelkezik olyan funkcióval, amely egyedivé teszi ezt a három képformátumot: lehet animálni. A GIF-nek több képe vagy képkocka lehet, amelyeket különböző időszakokban festenek, és szimulálnak egy videót. Ezért a weben jelenleg növekszik a használata. Lehetőség van előadásra is képek átlátszó háttérrel bár kissé korlátozott megvalósításban, mivel csak két értéke lehet: minden képpont átlátszó vagy átlátszatlan, mindegyikhez nem adhat meg átlátszósági értéket.
Képszerkesztővel GIF készítésekor két további funkció is választható. Bár elhangzott, hogy alapértelmezés szerint a GIF 256 színt használ, változtatni lehet ezen a színpalettán és határozza meg, hogy csak 32, 16 vagy 8 színt használ, még kisebb képméreteket elérve. Hozhat létre a Összekötött GIF amely lehetővé teszi a lassú eszközök számára, hogy a képernyőn fokozatosan épülő képet töltsenek be anélkül, hogy soronkénti festésre várnának.
A GIF ideális korlátozott színű képek, például ikonok, gombok, szövegek képeihez, és mindenekelőtt egyszerű grafikus animációk készítéséhez.
PNG (hordozható hálózati grafika)
A PNG formátum 1996-ban jelent meg a GIF alternatívájaként, amikor ez a formátum nem volt szabadon licencelt. Képeinek kiterjesztése van .png és lehetővé teszi az információk nagyobb kontrasztmélységgel, jobb minőséggel történő tárolását.
A. Algoritmusát használja veszteségmentes tömörítés amelyet kifejezetten weboldalakon való felhasználásra terveztek, és ezért számos érdekes tulajdonsággal rendelkezik ebben az összefüggésben: a színmélységek széles skáláját tartalmazza, kifinomult átlátszósági rendszerrel rendelkezik, optimális váltás és automatikus korrekciók a monitor gamma szerint, sőt kis szöveges leírásokat tárolhat a webes keresők által feltérképezhető képről.
A PNG különféle színmélységeket támogat o csatornák: szürkeárnyalatos (1 csatornás), szürkeárnyalatos átlátszósággal (2 csatorna), piros, zöld és kék csatornákkal (RGB) vagy valódi színnel (3 csatorna) és valódi színnel, átlátszósággal (4 csatorna). Attól függően, hogy hány csatornát használnak, a felhasználható színek száma vagy átlátszósági foka lesz. A PNG-8 o Az indexelt PNG csak 256 színt használ. A PNG-24 ugyanannyi színt használ, mint a JPEG.
A PNG által használt tömörítés lehetővé teszi egy milliónyi színű paletta használatát a nagy felbontás megőrzése mellett, így a képek kiváló minőségűek, bár nagyobb fájlmérettel rendelkeznek, mint a JPG által generáltak.
Másrészt a PNG az a legmegfelelőbb formátum, ha minőségi átlátszó képekre van szükség amelyben eldöntheti, hogy melyik képpontok átlátszóak és milyen mértékben. A képernyőképeken is széles körben használják, és jobb a szöveges képek bemutatására, mint a JPG. Természetesen ez a logók vagy az oldal hátterének preferált formátuma az átláthatóság kezelésének képessége miatt.
Milyen formátumot válasszon minden esetben?
Amikor képet kell készítenie az internetről, javasoljuk, hogy kérdésként hajtsa végre a következő folyamatot:
1. Szükség van-e animációra?
Ha igen, akkor a megválasztandó formátum, vita nélkül, csak a GIF teszi lehetővé (bár vannak olyan PNG-megvalósítások is, amelyek ezt is megteszik, például APNG vagy MNG, de a webböngészők nem támogatják őket annyira . De ne felejtsük el a színkorlátjait (csak 256-nál) és az átlátszóságát (az egész kép az vagy nem). A méret mindenesetre mindig kicsi.
2. Pontosan és a legjobb felbontásban kell megőriznie a kép részleteit?
Ha a válasz igen, a PNG formátumot kell választani, mivel annak tömörítési algoritmusa veszteségmentes. A következő döntés ebben az esetben a legmegfelelőbb színpaletta kiválasztása, mivel attól függ, hogy a fájlméret nagyobb vagy kevesebb. Ha 256-nál kevesebb színre van szükség, akkor PNG-8-at kell választani. Ha egy fényképről van szó, akkor a PNG-24-et fogják használni, tudva, hogy a PNG fájlok mindig, más dolgok egyenlőek, nagyobbak lesznek, mint a JPG.
3. Bármely más esetben a legmegfelelőbb választás a JPEG formátum, bár a különböző tömörítési lehetőségeket ki kell kísérletezni annak érdekében, hogy érezhetően minőségromlás nélkül érjük el a megfelelő méretet.
A képek mérete
A képformátumok segítenek optimalizálni a képeket azzal, hogy megpróbálják minimalizálni a képpontjai által tárolt színinformációkat: minél kevesebb bitre van szükség, annál világosabb lesz a kép.
De a kép kilobájtos súlyának csökkentésének másik módja az szabályozhatja a méretét. Mindig győződjön meg arról, hogy az internetre feltöltött kép nem nagyobb, mint a látásának szánt hely. A kép átméretezése csökkenti a kép pixeleinek számát, és csökkenti a böngészőbe való rajzolásához szükséges bájtok számát is. Szemléltetésképpen: ha 250x250 pixeles képed van, és a megjelenítésre szánt hely csak 200x200, a végső megtakarítás 2500 képpont, azaz 10 KB-mal kevesebb tömörítetlen kép esetén.
A kép átméretezése nem azonos a kép webes módosításával vagy méretezésével HTML kód segítségével. Ily módon megfelelően néz ki az interneten, de a kép nagyobb, mint szükséges.
Ezért még a kép optimalizálása előtt az a feladat, hogy csökkentse azt annak a weboldalnak a megfelelő szélességére és magasságára, ahova azt elhelyezni kívánja.
Optimalizálás Photoshop és GIMP használatával
A képszerkesztők kedvelik Photoshop vagy a szabad szoftver alternatívája ZSINÓR lehetővé teszi a képoptimalizálás minden aspektusának ellenőrzését.
Mindkettő változtathatja a kép méretét, és biztosíthatja azt is, hogy a kép ne torzuljon ebben a műveletben, rögzítve a magasság és a szélesség közötti képarányt. GIMP a Kép> Kép méretezése menüben; a Photoshopban a Kép> Képméret alatt.
Ha e két eszköz bármelyikével létrehoz egy képet, natív formátumokkal dolgozik, ugyanúgy, ahogyan rétegek, effektek stb. Is hozzáadhatók. Vannak PSD a Photoshopban és a XCF a GIMP-ben. De az ilyen típusú képek nem használhatók az interneten, és ezeket át kell alakítani a korábban ismertetett formátumok egyikébe: JPG, GIF vagy PNG.
Ezen a ponton kell eldönteni, hogy melyik formátumot használja, és az átalakítás mely paramétereit akarja ellenőrizni vagy kísérletezni. Ha használja ZSINÓR, Menjen a Fájl> Exportálás menübe, és válassza ki a három formátum bármelyikét. Ban ben Adobe photoshop Ez a Fájl> Mentés másként menüben található. A választott formátumtól függően ezek a lehetőségek jelennek meg:
- GIF, ha átlapolt GIF-t szeretne, vagy ha a PSD vagy az XCF többrétegű, akkor animált GIF-et szeretne létrehozni, amely milliszekundumokban adja meg a késést.
- JPG. Az első dolog a tömörítési minőség kiválasztása. Ezen kívül van néhány speciális opció: ha progresszív képet szeretne létrehozni, mennyi simítással, sőt másokkal, módosítson egyes tömörítési paramétereket almintákkal vagy a matematikai algoritmus különböző változataival.
- PNG. Ebben az esetben megadhatja a tömörítési szintet, ha információkat ment a háttérszínről, a gammáról, vagy ha átlapolt képet szeretne létrehozni.