Hogyan kell optimalizálni a képeket a webre?

*Ha fejlesztő, tervező, tulajdonos vagy SEO-specialista vagy, akkor tudod, hogy ilyen megoldás általában nem jöhet szóba. A vizuális tér, a grafika, a videó és a képek túl nagy értéket hordoznak – dinamikát adnak az oldalnak, lehetővé teszik, hogy jobban megismerjük, mit hordoz az oldal a tartalmában, legyen szó akár egy híroldalról, e-kereskedelmi oldalról, szoftverház oldaláról, kézműves, tánciskola vagy bármilyen más típusú weboldalról.

Az alábbiakban néhány pontban összefoglaljuk, hogy mit tehetünk a webes grafikák és képek optimalizálása érdekében:

Válassza ki a megfelelő fájlformátumot

A grafikák fájlformátuma nagy hatással van a minőségre és a fájlméretre. Ezért érdemes olyan formátumokat választani, amelyek jó minőséget biztosítanak a legkisebb fájlméret mellett, például WebP, JPEG 2000 vagy JPG XR.

Fájlméret csökkentése

Érdemes tehát a böngészőben, a desktop verzióban, plug-in (WordPress vagy CMS platformon alapuló weboldalak), kész szkriptek és könyvtárak segítségével képtömörítő eszközöket használni. Egyes drag and drop és WYSIWYG építők beépített tömörítési funkcióval rendelkeznek. Néhány webtárhely hasonló funkciót kínál a tárhelykezelő panelen.

Optimalizálja a képeket a gyorsabb betöltési idő érdekében

A képoptimalizálás kritikus tényező, amely befolyásolja a weboldal sebességét. A webhely betöltésének felgyorsítása érdekében olyan technikákat kell alkalmazni, mint a veszteségmentes és veszteséges tömörítés, a képek méretének módosítása feltöltés előtt, a megfelelő fájlformátum kiválasztása és a képek gyors szerveren vagy felhőben történő tárolása. A veszteségmentes tömörítés megőrzi a kép minőségét, de adatvesztés nélkül csökkenti a fájlméretet, míg a veszteséges tömörítés csökkenti a minőséget, de még kisebb fájlméretet érhet el.

Tippek a képfájl kiválasztásához

A megfelelő képfájlméret kiválasztásakor több tényezőt kell figyelembe venni, többek között a weboldalon megjelenített kép méretét, a fájlformátum típusát, a kép minőségét és az internetkapcsolat sebességét. Az optimális eredmény elérése érdekében olyan fájlméretet kell választani, amely a minőségromlás nélkül minimalizálja a méretet. A fájlformátumok kiválasztásakor mind a minőséget, mind a fájlméretet figyelembe kell venni. Az olyan fájlformátumok, mint a JPEG és a WebP jó minőségük és kis fájlméretük miatt népszerűek az interneten.

Elhelyettesíthető képoptimalizálási eszközök

A képoptimalizáláshoz különböző eszközök és források állnak rendelkezésre, köztük a TinyPNG vagy az ImageOptim a képek tömörítéséhez. Az olyan képszerkesztő szoftverek, mint az Adobe Photoshop vagy a GIMP lehetővé teszik a képek módosítását és méretezését az optimális eredmények elérése érdekében. Ezenkívül az olyan böngészőbővítmények, mint az Optimole vagy a WP Smush automatikusan optimalizálják a képeket a webhely betöltése során.

Ha a képek és grafikák optimalizálásának témakörét szeretné jobban körüljárni, használja az egyes pontok szélesebb körű leírását.

Válassza ki a megfelelő fájlformátumot – népszerű webes képformátumok JPG, PNG, SVG, GIF

.
A képek optimalizálásakor a fájlformátum az egyik legfontosabb szempont. Sokáig a legelterjedtebb webes grafikai formátumok a JPG és a PNG voltak:

JPG

JPG (Joint Photographic Group) vagy JPEG (Joint Photographic Expert Group) kifejezetten jay-peg – a digitális képek alapértelmezett formátuma. a JPG-ben alkalmazott veszteséges fájltömörítés csökkenti a fájlméretet, de minél nagyobb a tömörítés, annál rosszabb a minőség.

PNG

A PNG (Portable Network Graphics) veszteségmentes fájlformátum, ami azt jelenti, hogy megőrzi a kép összes eredeti adatát, így kiváló minőségű képeket eredményez. Támogatja az átlátszóságot, így jó választás az átlátszó hátterű képekhez vagy átfedésekhez. A PNG fájlokat gyakran használják grafikákhoz, logókhoz és más olyan képekhez, amelyek nagy részletességet és átlátszó hátteret igényelnek. A PNG fájlok fő hátránya, hogy más képformátumoknál nagyobb fájlméretet eredményezhetnek.

Tipikus gyakorlat a képek weboldalhoz való hozzáadásakor, különösen azoknál az embereknél, akik nem foglalkoznak napi szinten webfejlesztéssel, hogy nagyon nagy PNG fájlokat adnak hozzá olyan helyeken, ahol ez teljesen alkalmatlan. Ennek eredményeképpen ennek a formátumnak a használata nem hoz hasznot, hanem negatív hatással van a teljesítményre és a betöltési időre (különösen, ha például egy cikken belül több ilyen képet is hozzáadnak).

SVG

SVG (Scalable Vector Graphics) egy vektoros képformátum. A raszteres képekkel ellentétben, amelyek pixelekből állnak, és fel- vagy leméretezve elmosódhatnak vagy pixelessé válhatnak, az SVG képek matematikai egyenleteken alapulnak, és minőségromlás nélkül bármilyen méretre méretezhetők. Ugyanakkor ez főként egyszerű grafikákra és alakzatokra alkalmazható.

GIF

A GIF (Graphics Interchange Format) egy másik népszerű képformátum a weben. A GIF fájlok egyik fő előnye, hogy képesek egyszerű animációkat támogatni. A GIF-fájlok azonban nem terjedtek el olyan széles körben. Hátrányuk, hogy a GIF-ek korlátozzák a felhasznált színek számát, és viszonylag nagy méretű fájlok.

Válassza ki a megfelelő fájlformátumot – next-gen képformátumok: WebP, JPEG 2000, JPEG XR, AVIF

Mint minden, ami a technológiával kapcsolatos, a grafikai formátumok is fejlődnek, és új generációs, nagy teljesítményű fotóformátumok jelennek meg, amelyek fokozatosan felváltják az eddig leggyakrabban használtakat. Az alábbiakban a használt újgenerációs formátumokkal kapcsolatos információk olvashatók.

JPEG 2000

A JPEG 2000 a JPEG formátum újabb változata, amely wavelet tömörítést használ a jobb képminőség elérése érdekében, kisebb fájlméret mellett. Támogatja a veszteséges és veszteségmentes tömörítést, valamint az átlátszóságot és a színmélységek széles skáláját. A JPEG 2000 népszerű néhány iparágban, de a webböngészők nem támogatják széles körben.

JPEG XR

JPEG XR (korábbi nevén HD Photo vagy Windows Media Photo) a Microsoft által kifejlesztett képformátum. A JPEG 2000-hez hasonló tömörítési algoritmust használ, de úgy tervezték, hogy hatékonyabb és gyorsabb legyen. A JPEG XR támogatja a színmélységek széles skáláját, valamint az átlátszóságot és a veszteségmentes tömörítést. Azonban a webböngészők sem támogatják széles körben.

AVIF

AVIF (AV1 Image File Format) egy új képformátum, amely az AV1 videokódexen alapul. Úgy tervezték, hogy kisebb és hatékonyabb legyen, mint más képformátumok, ugyanakkor megőrizze a magas képminőséget. Az AVIF támogatja a veszteséges és veszteségmentes tömörítést, valamint az átlátszóságot és a színmélységek széles skáláját. A korábban ismertetett formátumokhoz hasonlóan azonban a webböngészők még nem támogatják széles körben.

És végül, de nem utolsósorban

WebP

Nem véletlenül maradt a végére, mert a következő részben leírjuk, hogyan használjuk ezeket a formátumokat, és népszerűsége miatt a WebP az, ami a leggyakrabban fog előkerülni.

A WebP egy modern képformátum, amelyet a Google 2010-ben vezetett be. Úgy tervezték, hogy csökkentse a képek méretét a weben, miközben ugyanazt a minőséget tartja fenn, mint más népszerű képformátumok, például a PNG és a JPEG. A WebP egyik fő előnye a kiváló tömörítés, amely más formátumokhoz képest jelentősen kisebb fájlméretet eredményezhet. Ez azt jelenti, hogy a webhelyek gyorsabban betölthetik a képeket, ami javíthatja a felhasználói élményt és csökkentheti a sávszélesség költségeit. Emellett a WebP támogatja az átláthatóságot és az animációt, ami sokoldalúvá teszi a webes grafikákhoz. A WebP egyre népszerűbb, és a legtöbb modern böngésző támogatja, így ígéretes lehetőség a webdesignerek és -fejlesztők számára.

A WebP formátum növekvő népszerűsége azt jelenti, hogy egyre több böngésző támogatja, így a listánkon szereplő next-gen formátumok közül a legsokoldalúbb.

A WebP szintén az egyik legjobb minőség és a fájl súlya közötti aránnyal rendelkezik. Ez az alábbi táblázatban látható. A táblázat példákat mutat a használt formátumtól függő fájlméretekre. Ezen a ponton azonban érdemes megjegyezni, hogy:

• A GIF-et ritkán használják animáció nélküli grafikákhoz
• A fájl mérete különböző tényezőktől, például a képtartalomtól és a tömörítési szinttől függően változhat.

Mint látható, a WebP az a fájl, amelynek szinte a legkisebb a súlya. Másrészt figyeljük meg, mennyivel többet nyom egy PNG fájl. Most képzeld el, hogy 10 PNG-formátumú grafikát használsz a posztodban, és ehhez ezeket a képeket hatalmas felbontásban használod. Könnyű elképzelni, hogy mennyivel változik az oldal betöltése. Ami a felbontásokat illeti, erről bővebben a következő bekezdésekben olvashatsz, de előbb nézzük meg, hogyan változtathatod meg a képfájlformátumokat.

Egy másik, részletesebb példát a WebP tömörítési tanulmány című cikkben találsz.

Melyik next-gen képformátumot válasszam?

Tehát lehet-e választani egy és csak egy next-gen képformátumot (Egy gyűrű, mely mindet uralja, Egy gyűrű, mely megtalálja, Egy gyűrű, mely elhozza LOTR… :D). Ha jobban belegondolunk, akkor a WebP tűnik a legoptimálisabb megoldásnak, de nem lesz univerzális abszolút minden esetre (offline képek megtekintéséhez kevésbé hasznos), így érdemes a saját céljainkra dönteni.

How to change image file formats

A képek tömörítésének néhány módja van:

• A grafikákat egy adott formátumban exportálhatja a népszerű grafikai programokban, például a GIMP vagy az Adobe Photoshop

.

• Elérheti népszerű webes eszközökkel, mint például a Convertio vagy a Zamzar

.

A fenti megoldások nagyszerűek, ha egyből több grafikát szeretnél feltölteni, vagy szerkeszteni. Mi van azonban, ha mondjuk 10 576 darab van belőlük?

Ne aggódj, szerencsére nem kell kézzel csinálnod????.

• Használhat kész parancssori eszközöket/könyvtárakat, például cwebp

.

• Néhány tárhelyszolgáltató konverziós eszközöket is biztosít a paneljeiben. Például a WP Engine és a Cloudways használja a cwebp

.

• Ha webhelye CMS WordPress alapú, akkor ezt olyan bővítményekkel teheti meg, mint az Imagify, Webp Converter, Smush, és sok más

.

Mire figyeljünk, amikor megváltoztatjuk a képfájlok formátumát?

?
Túlságosan csodálatos lenne, ha a konverziónak csak előnyei lennének, és nem lennének kockázatai. Íme, mit kell figyelembe vennie, amikor ezeket az optimalizálásokat végzi:

• Ne feledje, hogy még mindig nem minden böngésző és nem minden kliens képes támogatni a webp-t, ezért mindenképpen használja a srcset nevű HTML taget. Ha egy adott böngésző nem támogatja a WebP formátumot, akkor egy alternatív formátum lesz kiszolgálva
• Gondolja át, hogy pontosan mire kívánja használni a webhelyén rendelkezésre álló grafikákat. Ha például azt szeretné, hogy a felhasználók letöltsék és felhasználják a dokumentumaikban, akkor az AVIF vagy WebP formátum használata nem lesz optimális, mert a végfelhasználó részéről újratömörítést kényszerít ki

Hogyan kell átméretezni a képeket az optimális megjelenítéshez?

A képek átméretezése az optimális megjelenítéshez egy másik fontos szempont a weboldalak képoptimalizálásánál. A túl nagyméretű képek jelentősen lelassíthatják a webhely teljesítményét (ahogyan a fenti táblázatban látható), és rossz felhasználói élményhez vezethetnek. Másrészt a túl kicsi képek elmosódottnak és pixelesnek tűnhetnek, ami szintén negatívan befolyásolhatja a felhasználói élményt, különösen akkor, ha az adott képen belül van valami szükséges, és ezen információ nélkül egy művelet következő lépése lehetetlen. Ezért elengedhetetlen a képek megfelelő átméretezése, hogy a weboldal látogatói számára optimális megjelenítést biztosítson.

A fájlok átméretezésének módjai hasonlóak a formátum megváltoztatásáról leírtakhoz, csak a konkrét megoldások, amelyek közül választhatunk, különböznek, bár néhány eszköz univerzális lesz. Például a WPMUDEV Smush plug-in gondoskodik helyettünk a méretváltoztatásról és a formázásról. Az átméretezésnél hagyatkozhatunk az automatizálásra, vagy beállíthatunk olyan paramétereket, mint például a minimális méret, amelyre a fájlok csökkenthetők. Hasonlóképpen találunk webes eszközöket is, mint például a ResizePixel.

Használhatunk népszerű parancssori eszközt is. Az egyik ilyen a ImageMagick.

Mire figyeljünk a képek nagyításakor?

• Először is elemezze, hogy globálisan az egész webhelyre vagy a webhelyen belüli egyes részekre vonatkozóan módosítja-e a méreteket. Ezután figyeljen arra, hogy az átméretezés nem teszi-e olvashatatlanná a tartalmat, mivel egy túl kicsi vagy túl nagy kép összeomlasztja az elrendezést.
• A képek átméretezésekor feltétlenül szem előtt kell tartani a képarányt. A képarány a kép szélességének és magasságának aránya. A képek átméretezése a képarány megtartása nélkül torz és megnyúlt képekhez vezethet. Ezért a képek átméretezése során elengedhetetlen a képarány megtartása az optimális megtekintés érdekében.
• A fájlformátum optimalizáláshoz hasonlóan használhat reszponzív képeket, srcset taget és ezen felül olyan paramétereket, mint a forrásmédia vagy a méretek.