Miért a képek a „fekete lyukak” a sebességben?
Mert nagyok, sokan vannak, és gyakran nem a megfelelő méretben vagy formátumban kerülnek ki. Ha ezt rendbe tesszük, látványosat javul a Core Web Vitals (LCP/CLS/INP) – és a konverzió is.
Hogyan dolgozunk? – röviden a folyamat
- Audit: feltérképezzük a képtípusokat (hős, galéria, ikon, háttér, logó).
- Szerepek & méretek: definiáljuk, hol mekkora képre van szükség (képernyőszélesség + DPR).
- Automata átalakítás: WebP/AVIF + több méret (srcset), minőség és élesítés.
- Betöltési stratégia: hős kép előtöltése, a többi lazy‑load.
- Színtér/EXIF: sRGB konverzió, felesleges meta törlése, helyes orientáció.
- CDN: edge‑cache, képgenerálás igény szerint.
Formátumok: mikor mit?
| Formátum | Előny | Megjegyzés |
|---|---|---|
| WebP | Jó minőség kis méret mellett | Általános választás fotókhoz |
| AVIF | Még jobb tömörítés, éles részletek | Nagy CPU‑igény lassabb eszközön; fallback kell |
| SVG | Végtelen felbontás ikonokhoz/logóhoz | Biztonság: ellenőrizd a fájl tartalmát |
Reszponzív képek: srcset/sizes, art direction
A cél: minden eszköz pont akkora képet kapjon, amekkorára szüksége van – se többet, se kevesebbet.
Art direction: mobilon más vágás működik? Készítünk külön mobil‑kompozíciót, és a <picture> forrásokkal cseréljük.
Lazy‑load: mikor jó és mikor nem
- Hős kép: ne legyen lazy, kapjon
fetchpriority="high"‑ot. - Lentebb lévő képek:
loading="lazy"+decoding="async". - CLS védelem: mindig adj meg
width/heightértéket vagy CSSaspect-ratio‑t.
Minőség, tömörítés, élesítés
Nem „egy gomb”: más beállítás kell egy portréhoz és egy texturált ételfotóhoz. Minőség‑érzékeny tömörítést használunk, és finom élesítést adunk a kimeneten. A cél: szemre azonos, fájlban fele‑harmada.
Színek és meta: miért fakulnak egyes képek?
- sRGB konverzió
- ICC profilok kezelése (ha kell, beágyazva)
- EXIF törlés (méret, helyadatok), orientáció normalizálás
Háttérképek, ikonok, logók
- Háttér:
image-set()a DPR‑hez, éscontain/coverjózan használata. - Ikonok: inline
SVG– egy csapásra éles és stílusozható. - Logó: külön „dark/light” változat, vektoros forrásból.
Műhelytitok: a mi kép‑pipeline‑unk (egyszerűsítve)
- Felhasználási lista: melyik komponens milyen méreteket kér.
- Automatikus generálás: 1:1, 4:3, 16:9; 480/768/1280/1920 px; AVIF/WebP/JPEG fallback.
- Minőségprofilok: hős (q=60–70), galéria (q=55–65), mini (q=50–60).
- LQIP/Blur‑up: 20–40 px‑es előkép, szépen „élesedve”.
- CDN: edge‑variánsok és cache‑szabályok.
- QA: Lighthouse + valós CWV, vizuális ellenőrzés (szín, zaj, élesség).
Gyakori hibák (és gyors gyógymódjuk)
- „Egy méret mindenkinek” – nincs srcset → Adj több méretet és sizes‑t.
- Hős kép lazy‑ben → fetchpriority high.
- Ugráló elrendezés → width/height vagy aspect‑ratio.
- Fakó színek → sRGB/ICC helyes kezelés.
- Túléles/tömörített → profilfüggő minőség + enyhe élesítés.
