Melyik a legjobb képformátum egy webhelyhez?

A „legjobb formátum” kérdés nem helyes addig, amíg nem tudod, milyen képről van szó. Egy webhelyen több, egymástól nagyon eltérő képfajta jelenik meg, és mindegyiknek egyértelműen megvan a legjobb formátuma:

• Fényképekhez (termékek, emberek, helyek): veszteséges formátum. Az AVIF adja a legkisebb fájlt, a WebP a biztonságos, modern alapértelmezés, a JPG pedig az a tartalék, amelyet minden böngésző meg tud jeleníteni.
• Logókhoz, ikonokhoz és illusztrációkhoz: SVG. Vektorgrafikus formátum, ezért minden képernyőn és bármilyen méretben éles marad, a fájl pedig általában apró. Csak akkor használj helyette képpontalapú formátumot, ha egy platform nem fogadja el az SVG formátumot.
• Képernyőképekhez, felületi grafikákhoz és minden átlátszóságot igénylő képhez: PNG vagy veszteségmentes WebP. A veszteségmentes formátumok éppen az egyszínű területeket és az éles széleket tömörítik jól.
• Rövid animációkhoz: animált WebP vagy AVIF a GIF helyett, amely kis színpalettára korlátozódik, és jóval nagyobb fájlokat eredményez.
• Webhelyikonhoz: ICO fájl, lehetőleg SVG vagy PNG változattal együtt; lásd: webhelyikon készítése képből.

A klasszikus hiba egy PNG formátumban mentett fénykép. A PNG minden képpontot veszteségmentesen tárol, ami tökéletes egy logóhoz, de katasztrofális egy fotóhoz: a fájl egy JPG méretének többszörösére duzzad, látható javulás nélkül.

Fotóknál a választás azon múlik, mennyire támaszkodhatsz az újabb böngészőkre:

• AVIF tömörít a leghatékonyabban: tipikus webes minőségnél körülbelül 50%-kal kisebb a JPEG-nél és 20–30%-kal kisebb a WebP-nél, szükség esetén HDR és széles színtér támogatásával. A Chrome, Firefox és Safari egyaránt megjeleníti (a Safari a 16.4 verzió óta, 2023 óta). Hátránya a lassú kódolás, különösen nagy képeknél, valamint az asztali szoftverekben és régebbi eszközökön elérhető korlátozott támogatás.
• WebP a gyakorlatias alapértelmezés: azonos vizuális minőség mellett 25–35%-kal kisebb a JPEG-nél, támogatja az átlátszóságot, és 2020 óta minden széles körben használt böngésző kezeli. Egyes asztali alkalmazások és régebbi eszközök továbbra sem tudják megnyitni, ami a tervezőnek átadott fájlnál fontos, nem pedig annál, amelyet a látogatóknak szolgálsz ki.
• JPG az általánosan használható tartalék. A három közül ez a legkevésbé hatékony, de egy körülbelül 75–82 minőségre mentett JPG a képernyőn általában megkülönböztethetetlen az eredetitől, és az interneten minden meg tudja jeleníteni.

A legerősebb megoldás AVIF formátumot szolgál ki az azt kezelő böngészőknek, WebP formátumot a többinek, és megtart egy JPG változatot minden régebbi rendszerhez. Ha inkább csak egyet választanál, a WebP JPG tartalékkal gyakorlatilag mindenkit lefed. A közvetlen összehasonlításokat lásd itt: WebP és AVIF összehasonlítása, valamint WebP és JPG összehasonlítása; fotók helyett grafikákhoz pedig lásd: PNG és JPG összehasonlítása.

Ha már ismered a célformátumot, a konvertálás gyors, és a kép soha nem hagyja el az eszközödet. Az EditItAll képkonvertáló teljes egészében a böngésződben fut:

1. Nyisd meg a konvertálót, és húzd bele a képeidet: egyetlen fájlt vagy akár egy teljes mappa tartalmát. A kötegek feldolgozása együtt történik.
2. Válaszd ki a kimeneti formátumot: fényképekhez WebP vagy AVIF, átlátszóságot igénylő grafikákhoz PNG. A gyakori feladatok közvetlenül is elérhetők: JPG konvertálása WebP formátumba, PNG konvertálása WebP formátumba, JPG konvertálása AVIF formátumba és PNG konvertálása AVIF formátumba.
3. Állítsd be a minőséget. Nincs célméretmező, mert a méret eredmény. Minden fájlnál látható az előtte és utána mért méret, így addig mozgathatod a csúszkát, amíg a szám és a kép is megfelelő nem lesz.
4. Töltsd le az eredményeket külön-külön vagy egyetlen ZIP fájlként.

Semmi nem töltődik fel; az oldal betöltése után megszakíthatod az internetkapcsolatot, és folytathatod a konvertálást. Az EXIF és GPS metaadatokat minden exportált képből eltávolítja, így egy termékfotó nem teszi közzé, hol készült. Ingyenes, nem igényel fiókot, és nincs vízjel. Már megfelelő a formátum, és csak kisebb fájlra van szükséged? Lépj közvetlenül a képtömörítőhöz. Ha pedig egy platform ragaszkodik egy vektoros logó képpontalapú változatához, az SVG konvertálása PNG formátumba a választott méretben készíti el.

Érdemes jól megválasztani a formátumot, de három szokás több bájtot takarít meg, mint amennyit a JPG formátumról AVIF formátumra váltás valaha is képes:

• Méretezd át a tényleges megjelenítési méretre. Egy fényképezőgéppel készült fotó sokszor szélesebb az oldalon elfoglalt helynél, és az összes felesleges képpont letöltődik, majd kárba vész. Az EditItAll képeszközei éppen ezért kínálnak opcionális korlátot a legnagyobb mérethez.
• Egyszer tömöríts, az eredetiből. Minden veszteséges mentés egy kicsivel több részletet dob el. Őrizd meg az eredetit, abból exportáld a webes példányt, és ne mentsd újra láncban a JPG fájlt WebP, majd AVIF formátumban.
• A modern formátumokat tartalékkal szolgáld ki. Először AVIF vagy WebP formátumot kínálj, a régebbi böngészők számára pedig engedélyezd a visszaváltást JPG vagy PNG formátumra, így egyetlen látogató sem lát majd hibás képet.

Ha egy sebességjelentés azt javasolja, hogy „hatékonyan kódold a képeket” vagy „következő generációs formátumokban szolgáld ki a képeket”, pontosan erre a döntésre utal: a képek hatékony kódolására vonatkozó figyelmeztetés javítása végigvezet a folyamaton, a JPEG tömörítése webes használatra pedig részletesen bemutatja a minőségcsúszkát. További formátumismertetőket a képkonvertálási témakörben találsz.