Képek optimalizálása: 5 tipp a képek webes optimalizálásához

5 tipp a képek webes optimalizálásához

Képek optimalizálása!

Egy kép többet mond 1000 szónál. A képek fontosabbak, mint valaha az üzenete átadásában. A nem megfelelően exportált képek azonban rossz minőségűnek tűnhetnek, lassan töltődhet be a webhelye, és elveszítheti a felhasználók elkötelezettségét. Íme néhány tipp, amellyel biztosíthatja, hogy minden grafika szép és éles legyen.

1. A képek megfelelő színtérben történő mentése

A számítógépek kétféle színteret használnak a képek megjelenítésére: Az RGB és a CMYK. Az RGB (piros, zöld, kék) a digitális eszközök szabványos színtere. Alapértelmezés szerint minden kamera vagy számítógép által készített kép ebben a színprofilban kerül elmentésre. Előfordulhat azonban, hogy a képek CMYK színprofilúak, amelyet a nyomtatók használnak. Mielőtt ezeket a képeket a weben használná, egy olyan programmal, mint az Adobe Photoshop, a színeket RGB színűvé alakíthatja, hogy a képek élénkek és világosak legyenek.

RGB és CMYK színek

Egy CMYK-képet RGB-vé alakíthat át, ha megnyitja a képet az Adobe Photoshop programban. Menj a menüsorban a Kép menüpontra, majd a legördülő menüben a Mód fölé lépve válaszd ki az RGB színt. Ezáltal a képet az RGB színtérbe konvertálja, és észreveheti, hogy egyes színek élénkebbek lesznek. Ezután menj a Fájl, majd a Mentés másként menüpontra, és mentsd el a fájlt. Mindenképpen változtassa meg a fájl nevét, hogy Ön vagy valaki más tudja, hogy ez egy digitális alkalmazásokhoz készült fájl.

2. Tömörítse a fájl méretét

A képek webre történő mentésekor a gyors oldalbetöltési sebesség fenntartása érdekében javasoljuk, hogy a fájl mérete 2 MB (2048 kilobájt) alatt legyen. Ennek ellenére azt is szeretnénk, ha a képek élesek és nem pixelesek lennének. A képminőség olyan tényezőktől függ, mint a végső fájlméret és a tömörítési beállítások. A megfelelő tömörítési beállításokkal jó képminőséget és kis fájlméretet érhet el. Általában 70-80% közötti tömörítési szinttel menthet el egy fájlt anélkül, hogy pixelesedés, vagy az egyes színpontok láthatóvá válnának. Megjegyzés: A tömörítés mértéke számos tényezőtől függ, többek között az eredeti kép fájlméretétől és formátumától. A fájlméret további tömörítéséhez olyan ingyenes eszközt használhat, mint például az Imagify.

3. Használja a megfelelő fájlformátumot

Négy fő fájlformátum létezik a képek és grafikák webre történő kimentésére: JPG, PNG, GIF és SVG. Mindegyik fájlformátumnak megvannak az előnyei, hátrányai és a tervezett felhasználási esetek. A képet vagy grafikát egy adott formátumba kell menteni, attól függően, hogy raszteres vagy vektoros. A raszteres képeket pixelalapú programokkal készítik, vagy fényképezőgéppel vagy szkennerrel rögzítik. Ezek a képek véges számú pixellel rendelkeznek, és nagyobb méretezés esetén veszíthetnek a minőségükből. A JPG, PNG és GIF a raszteres képek számára legmegfelelőbb formátumok. A vektorgrafikák vektoros szoftverekkel készülnek, és minőségromlás nélkül végtelen méretben méretezhetők. Az SVG és a GIF a legmegfelelőbb a vektoros képekhez, míg a vektoros grafikát JPG vagy PNG formátumban is elmentheti, azonban elveszíti a grafika végtelen méretezésének lehetőségét.

Négy fájlformátum osztozik a raszteres és vektoros JPG grafika között: JPG fájl
A JPG vagy JPEG a képek legelterjedtebb raszteres fájlformátuma.

JPG fájl

Előnyei

A legkisebb fájlméret
A legjobb a jó minőségű fotókhoz
Kompatibilis az interneten és bármilyen eszközön

Hátrányok

A képminőség nagymértékben csökkenhet, ha túlságosan tömörítik.
A JPG-k nem támogatják az átlátszó háttereket

Mikor érdemes JPG-t használni?

A JPG a legjobb a nem mozgó fotókhoz és más, átlátszó hátteret nem igénylő fájlokhoz. Kerülje a JPG-k használatát színes háttereken.

PNG fájl

A PNG egy másik elterjedt raszteres formátum, amely sokoldalúbb, mint a JPG. A PNG több színt támogat (több mint 16 millió), és támogatja az átlátszó hátteret vagy az alfa-csatornát.

Előnyök

Átlátszó háttérrel rendelkezik a kép színes hátterekre történő rétegezéséhez.
Tömöríthető anélkül, hogy a JPG-hez hasonló minőséget veszítene.

Hátrányok

A fájlméretek általában nagyobbak, mint a JPG

Emiatt lassú oldalbetöltést eredményez

Nem támogatja az animációt

Mikor érdemes PNG-t használni?

A PNG a legjobb az éles élekkel rendelkező grafikákhoz, szöveges grafikákhoz, logókhoz, ikonokhoz és egyéb mintákhoz. Használjon PNG-t olyan grafikákhoz, amelyeket nem fehér háttérre kell helyezni, például teljesen fehér logókhoz fekete háttéren. Használjon SVG-t, ha számít a gyors oldalbetöltés.

Animált GIF

A GIF egy olyan raszteres formátum, amely lehetővé teszi az animált képek megjelenítését. A képek egymás után következnek egymáson, hogy mozgást hozzanak létre.

Előnyök

Képes animált képek és üzenetek létrehozására
Támogatja az átlátszó háttereket

Hátrányok

A képminőség és a fájlméret a színek számához van kötve. A több színű kép élesebb képet, de nagyobb fájlméretet eredményez. A kép kevesebb színe szemcsésebb képet, de kisebb fájlméretet eredményez.
Korlátozottan 256 színű képet használhat.

Mikor használjon GIF-et?

A GIF-ek lehetővé teszik a rugalmasságot, hogy több képet és érdekes átmeneteket jelenítsen meg ugyanabban a grafikában. Kerülje azonban a bonyolult, sokszínű fotók és grafikák használatát, ha kis fájlméretre van szüksége.

SVG fájl, animált SVG

Az SVG egy vektoros formátum, amely éles grafikákat és manipulálható objektumokat tesz lehetővé a weben. Az SVG létrehozható és szerkeszthető olyan vektoros programokban, mint az Adobe Illustrator, a Sketch és az Inkscape.

Előnyök

Kis fájlméret
Végtelen méretezés (vektor) minőségromlás nélkül
Rugalmasság a fejlesztők számára (megváltoztathatók a beállítások, beleértve a színt és a méretet is)
Szerkeszthető vektoros programban, például az Adobe Illustratorban.
Támogatott a Microsoft Office termékekben a grafikákhoz
Animálható

Hátrányok

A képminőség és a fájlméret a színek számához kötött. A több színű kép élesebb képet, de nagyobb fájlméretet eredményez. A kép kevesebb színe szemcsésebb képet, de kisebb fájlméretet eredményez.
A 256 színből álló kép használata korlátozott.

Mikor érdemes SVG-t használni?

Az SVG használható logókhoz, ikonokhoz, grafikákhoz és egyéb, a weben használt illusztrációkhoz. A grafikák a minőség romlása nélkül nyújthatók és tömöríthetők, és nagy pixelsűrűségű kijelzőkkel rendelkező mobileszközökön is jól mutatnak.

4. Több méret exportálása a nagy pixelsűrűségű kijelzőkhöz

Mivel a mobileszközök váltak a felhasználók által a digitális tartalmak megtekintésének kedvelt eszközévé, nagyobb felbontású képernyőkkel rendelkeznek, mint a tipikus asztali számítógépek. Ezek a HiDPI, Retina vagy nagy sűrűségű kijelzők több mint 200 képpont per hüvelyk (PPI) felbontásúak. A webes és a legtöbb asztali számítógép szabványa 72 PPI. Ha egy felhasználó egy 72 PPI-s képet néz meg a mobileszközén, szemben a számítógépével, az nem fog olyan élesen kinézni, mint egy több pixellel kimentett kép.72 PPI és HiDPI objektum összehasonlításaAz olyan programok, mint az Adobe Photoshop és Illustrator kétféleképpen menthetik ki a képeket és grafikákat, hogy azok megfeleljenek a mobil és asztali böngészőknek.

Képét @2x és @3x méretarányokkal is exportálhatja. Ez azt jelenti, hogy a program automatikusan létrehozza a képed egy olyan változatát, amely 2x (200%) vagy 3x (300%) az eredeti mérethez képest. A felhasználó mobil webböngészője automatikusan a 2x vagy 3x-os képet jeleníti meg az eredeti mérettel megegyező helyen.
A képet nagyobb felbontásban is exportálhatja. Az Adobe Photoshop vagy Illustrator programban például 96 vagy 150 PPI felbontásban mentheti el a képet. Megjegyzés: A fájl mérete nagyobb lesz, mivel a program több pixelt ad a képhez.

5. Kisebb képek 115%-os felnagyítása

Ha van egy kisebb raszteres képed, amelyet nagyobbra kell átméretezned, az Adobe Photoshop programban 115%-kal fokozatosan felnagyíthatod. Ez csökkenti a kép fizikai méretének növelésével járó pixelesedés mértékét. Ehhez nyissa meg a képet a Photoshopban. A menüsorban lépjen a Kép menüpontra, és válassza a Képméret menüpontot. A párbeszédpanelen a Szélesség és a Magasság alatt állítsa át az egységeket százalékra, majd írja be mindkét mezőbe a 115%-ot. Győződjön meg róla, hogy a Resample (Újramintavétel) jelölőnégyzet be van jelölve, és a Bicubic Smoother (Bicubic Smoother (nagyítás)) be van jelölve.

Az éles és fókuszált képek az oldalon tartják a felhasználókat

Ha ezeket a tippeket alkalmazza, biztosíthatja, hogy a képek és grafikák a megfelelő formátumba kerüljenek exportálásra, és megőrizzék a megjelenített üzenet minőségét. Nemcsak szervezetének megjelenése lesz professzionálisabb és intuitívabb, hanem kreatív partnerei is örülnek, ha a megfelelő eszközökkel látja el őket.