Hosszú másodperceket eltölteni a monitor előtt arra várva, hogy betöltődjön egy weboldal biztosan nem tartozik a kedvenc időtöltéseink közé. A probléma fő okozókja a lassú internetkapcsolaton túl, a weboldalak betöltési sebessége.
A Think with Google tesztelő eszközét használva, a weboldalakat az alábbi kategóriákba sorolják a betöltési sebességük szerint:
- - 0-1 másodperc – jó weboldal
- - 1 másodperc-2,5 másodperc - javításra szorul
- - 2,5 másodperc vagy az fölött – gyenge weboldal
Általánosságban a weboldalak méretének dúrván a 60%-át képek és a 10%-át videók teszik ki. Éppen ezért fontos a képek és az egyéb média tartalmak optimális használata egy weboldalon. A képek betöltési sebességét elsősorban a képek formátuma és azok mérete befolyásolja.
|
Tartalomtípusok egy weboldalon |
TARTALOMJEGYZÉK:
Elterjedt képformátumok
Az ismertebb böngészők által támogatott képfájl formátumok: APNG, AVIF, GIF, JPEG, PNG, SVG és a WebP.
APNG vs. GIF: mindkét formátumot leginkább az animált képekhez használjuk. Kettőjük közül az APNG jelent meg később, ennek ellenére, az Internet Explorert leszámítva, hasonló támogatottságot élvez a nagyobb böngészőkben. Az APNG jobban kezeli a színeket, jobb minőségű élményt nyújt és a fájl mérete is kisebb a GIF méretéhez képest.
AVIF: az AOM - Alliance for Open Media által fejlesztett képformátum, az egyik legfiatalabb a használt formátumok közül, éppen ezért még a legalacsonyabb a támogatottsága. A legjobb tömörítést kínálja a többi formátumhoz képest, támogatja a nagyobb színmélységet, animált képkockákat, átláthatóságot stb.
JPEG: jelenleg ez a legelterjedtebb képformátum a weben. Tömörítése a legnagyobb veszteséggel jár a többi formátumhoz képest.
PNG: grafikák, kevesebb színösszetételű egyszerűbb képek és átlátszó hátterű képek esetén használjuk.
SVG: ez egy vektoros képformátum. Ideális a weboldalak egyszerűbb elemeihez, logókhoz, ikonokhoz, diagramokhoz stb., azokhoz a képekhez, amelyeket pontosan meg kell rajzolni különböző kijelzők méreteihez.
WebP: a Google által fejlesztett képformátum, jól használható minden képtípushoz. Jobb tömörítést kínál, mint a PNG vagy a JPEG, de rosszabbat, mint az AVIF, támogatja a nagyobb színmélységet, az animált képkockákat, az átláthatóságot stb., és már feltölthető a Wordpress médiatárjába is.
HEIC: az Apple támogatásával fejlesztett, jól tömöríthető de egy kevésbé elterjedt képformátum.
Bár a WebP egyre elterjedtebb, és bár a HEIC is jó tömörítést kínál, mégis a szakmai oldalak szerint az AVIF a jövő üdvöskéje.
Raszteres és vektoros képek
A raszteres képek elnevezés alatt a képpont alapú képeket értjük. A monitoron megjelenített képpont neve a pixel. A különbség a nyomtatásban és a monitoron megjelenített képpont között a színösszetételük. Míg a nyomtatásban a 4 alapszínt, a CMYK használják, a kék (cyan), a bíbor (magenta), a sárga (yellow) és a fekete (key vagy black), addig a pixeles képek színösszetétele az RGB, azaz a piros (red), a zöld (green) és a kék (blue).
A raszteres képek hátránya a vektoros képekkel szemben, hogy mivel minden képpontja külön információt tartalmaz, így fájlmérete lényegesen nagyobb.
A vektoros képek jelentősége abban rejlik, hogy szabadon skálázható, vagyis a végtelenségig nagyítható minőségromlás nélkül. A vektorgrafika kis fájlmérete és méretezhetősége egyedülállóan alkalmassá teszi a digitális nyomtatásban a névjegykártyáktól az óriásplakátokig. Vektoros fájlformátumok például az SVG, az EPS és a PDF.
Vizuális szemszögből nézve, ha egy megjelenítendő képhez skálázható formák és szilárd színek szükségesek, a vektoros grafika a legjobb választás, de ha a projekt összetett színkeverékeket igényel, akkor a képpont alapú képek a megfelelő formátum. Egy korábbi bejegyzésemben arról olvashatsz, hogy mitől ennyire vonzóak a képek a weboldalon.
Az újabb képformátumok használatának technikai megoldásai
A weboldalunkhoz kétféleképpen adhatunk képeket, a HTML oldal <img> elemeként, vagy a CSS fájlban background-image elemként.
Mind a két esetben használhatunk vektoros és raszteres képeket is.
HTML OLDALON
1. Egyszerűen beillesztve: img elemeként.
<img src="beispiel.jpg" alt="alternative text" width="500" height="600" >
2. Picture elemként: ha megadjuk a kép forrását.
<picture>
<source srcset="beispiel.png" type="image/png" media="(min-width: 768px)">
<img src="/beispiel.jpg" alt="beispiel alternative text">
</picture>
3. Figure elemként: ha feliratot adunk a képhez.
<figure>
<img src="/beispiel.jpg" alt="beispiel alternative text">
<figcaption>text</figcaption>
</figure>
4. Figure elembe ágyazott picture elem: ha forrást és feliratot is használunk.
<figure>
<picture>
<source srcset="beispiel.png" type="image/png" media="(min-width: 768px)">
<img src="/beispiel.jpg" alt="beispiel alternative text">
</picture>
<figcaption>text</figcaption>
</figure>
CSS FÁJLBAN, MINT BACKGROUND-IMAGE
body {
background-image: url("beispiel.gif");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Abban az esetben, amikor a HTML oldalon <img> elemet adunk hozzá, az adott kép a tartalom részét képezi, kiegészíti a szöveget, informál, a CSS fájlban háttérként megjelenített képnek főként dekorációs szerepe van.
A jelenleg még nem általánosan elfogadott képformátumok, mint az AVIF vagy a WebP, használata esetén még egy alapértelmezett, úgynevezett fallback fájlra is szükségük van. Ez lehet JPEG vagy PNG. Ennek célja, hogy azok a böngészők, amelyek nem támogatják még az adott képformátumot, az alapértelmezett JPEG vagy PNG fájlt fogják betölteni a böngészés során.
Ennek a megoldása háromféleképpen történhet:
1. A HTML <picture> elem <source> azaz forrásaként megadva a használni kívánt formátumokat.
Az alábbi példában, amennyiben az adott böngésző nem támogatja elsőként az AVIF majd a WebP formátumokat, úgy az alapértelmezett PNG fájl fog betöltődni. Forrásként megadott több fájlformátum esetében a megadott sorrend alapján a legelső megjeleníthető fájl fog megjelenni a böngészés során.
<picture>
<source srcset="beispiel.avif" type="image/avif">
<source srcset="beispiel.webp" type="image/webp">
<img src="/beispiel.png" loading="lazy" alt="beispiel alternative text">
</picture>
2. Bonyolultabb fejlesztői technikák segítségével a JPEG és PNG fájlok átkonvertálhatóak az új fájlformátumokba.
3. Bővítmények használatával. Számtalan ilyen bővítményt javasolnak az avif.io weboldalán is.
A WebP fájlformátummal ellentétben az AVIF és az SVG képek jelenleg még nem tölthetők fel a Wordpress médiatárjába. Használatuk közvetlenül az FTP-n keresztül oldható meg, vagy scriptek, valamint bővítmények segítségével.
Forrás: Mozilla
