Hogyan optimalizáld a képeket a weboldalhoz (minőségvesztés nélkül)

Ahhoz, hogy egy képet látható minőségvesztés nélkül optimalizálj a weboldalhoz, három dolgot kell tenned: átméretezed azt a tényleges szélességre, amekkorában az oldalon megjelenik (ritkán van szükséged 1600px-nél szélesebbre), elmented WebP formátumban, és tömöríted kb. 80%-os minőségre. A gyakorlatban egy telefonról származó, 4 MB-os fotó 150–250 KB-ra csökken — több mint 15-szörös méretcsökkenés — úgy, hogy a szemmel semmilyen különbség nem érzékelhető. A sorrend számít: először méretezz, utána tömöríts.

Miért számít a sebesség (és miért a képek a fő bűnösök)

A legtöbb oldalon, amit látunk, a képek messze a legnehezebb betöltendő elemek — nehezebbek, mint az összes szöveg, kód és betűtípus együttvéve. Egy oldal 6–8 optimalizálatlan telefonfotóval akár 15–25 MB-ot is nyomhat. Egy gyenge jelű telefonon ez több másodpercnyi üres képernyőt jelent, és a látogató távozik, mielőtt bármit is látna.

A Google ezt a Core Web Vitals mutatókon keresztül méri — különösen az LCP-n (mennyi idő alatt jelenik meg az oldal tetején lévő legnagyobb kép). Nem ígérünk neked "1. helyet a Google-ben", de egy gyors oldal valódi rangsorolási jelzés, és ami még fontosabb, az oldalon tartja az embereket. A sebesség nem díszítőelem; ez az első dolog, amit egy ügyfél érez.

1. lépés: Méretezd át a tényleges szélességre

A leggyakoribb hiba: egy 4000×3000px-es fotót olyan helyre tenni, ahol az valójában 600px szélességben jelenik meg. A böngésző megjelenítéskor lekicsinyíti, de a teljes fájlt akkor is letölti. Értelmetlen.

Egyszerű szélességi szabályok:

Modern (retina) képernyőkhöz nyugodtan exportálhatsz a megjelenítési méret dupláján — egy 600px-en megjelenő fotót 1200px-en exportálsz. Ennyi, ne többet.

2. lépés: Válaszd a WebP formátumot

A WebP a szabványos formátum 2026-ban: minden nagyobb böngésző támogatja (a Tinify által közölt kompatibilitási adatok szerint a felhasználók több mint 94%-a), és a fájlok 25–35%-kal kisebbek, mint egy azonos vizuális minőségű JPEG esetén. Fotókhoz és a legtöbb képhez egy vállalkozás weboldalán a WebP a helyes, egyszerű választás.

Létezik az AVIF is, egy újabb formátum, amely még jobban tömörít (a fájlok 20–40%-kal kisebbek, mint WebP esetén). Kiváló nagy képekhez, de sokkal lassabban kódol, és kézzel nehezebb kezelni. Javaslatunk: maradj a WebP-nél, ha kézzel szerkeszted a fotóidat. Az AVIF akkor van értelme, ha az oldal automatikusan generálja a formátumokat.

Egy hasznos szabály: JPEG/WebP a fotókhoz, PNG/SVG a logókhoz, ikonokhoz és szöveget tartalmazó grafikákhoz. Az SVG vektoros — bármilyen méretben éles marad, és csak néhány KB-ot nyom.

3. lépés: Tömörítsd (itt történik a varázslat)

A "veszteséges" tömörítés eldobja azokat a részleteket, amelyeket a szem nem vesz észre. 80%-os minőségnél a különbség az eredetihez képest gyakorlatilag láthatatlan, de a fájl drasztikusan zsugorodik. 60% alatt csúnya torzítások (artifact-ok) jelennek meg, főleg tiszta égen vagy bőrön.

Ingyenes eszközök, amelyeket használunk és ajánlunk:

• Squoosh.app (Google) — nyisd meg a böngészőben, csúsztasd a minőségcsúszkát, és élőben lásd a különbséget. Ingyenes, fiók nélkül.
• TinyPNG / TinyJPG — húzd be a fotókat, töltsd le őket tömörítve. Gyors kisebb mennyiségekhez.
• ImageOptim (Mac) — telepítsd, és húzd rá a fotókat.

Gyors ellenőrzőlista feltöltés előtt

• [ ] A szélesség nem több, mint kb. 2×-a a megjelenítési méretnek
• [ ] WebP formátum (vagy JPEG, ha tartalék megoldásra van szükség)
• [ ] Minőség ~80%, szemmel ellenőrizve
• [ ] Minden fájl 250 KB alatt (ideálisan 150 KB alatt)
• [ ] Beszédes fájlnév: `haircut-cluj.webp`, nem `IMG_4821.jpg`
• [ ] Alt szöveg kitöltve — jó az akadálymentesítés és a helyi SEO szempontjából

Őszinte kompromisszumok

A kézi optimalizálás időbe kerül. 10 fotónál ez egy 15 perces munka; egy 300 termékes boltnál viszont nem az. Ott vagy automatikus folyamatra van szükség (az oldal a feltöltéskor generálja a WebP-t), vagy lazy loadingra (az alább lévő képek csak görgetéskor töltődnek be). Sok modern platform ezt eleve tudja — de nem mind, és ritkán van jól beállítva.

Van egy másik valódi kompromisszum is: ha túltolod a tömörítést, hogy megspórolj néhány KB-ot, tönkreteszed a képet. Egy gyors oldal csúnya fotókkal nem ad el. Az egyensúly — nem a szélsőség — a cél.

Az MPO Web Studio-nál (egy kolozsvári, Kolozsváron dolgozó csapat, akik 100%-ban távolról dolgoznak, Románia-szerte) olyan oldalakat szállítunk, ahol a képek már optimalizálva vannak, a formátumok pedig automatikusan generálódnak, így az oldal gyors anélkül, hogy neked minden fotóhoz hozzá kellene nyúlnod. Ha szeretnéd látni, hogyan nézne ki a rendesen elkészített oldalad, készítünk neked egy ingyenes demót — írj nekünk WhatsAppon a wa.me/40750257140 címen, és elkezdjük.