Webes publikálásÁllapot: 2026-10
Képoptimalizálás build közben
Mely képoptimalizálásokat végezheti el egy statikus oldal buildje minden képen a sablonok módosítása nélkül, és milyen buktatók jöttek elő közben.
Kutatási kérdés: Mely képoptimalizálásokat végezheti el a build a sablonok kézi módosítása nélkül, és mire kell figyelni?
Projektigény
Képekben gazdag kis statikus oldalak mobilon lassan töltődtek be, és elmozdult az elrendezés. A sablonokban nem akartuk minden képet kézzel kiegészíteni.
Módszer és ellenőrzés
- A renderelt HTML utófeldolgozása: minden img tag a valódi fájl alapján kap attribútumokat.
- width és height a kép tényleges méretéből, ha a tag még nem tartalmazza.
- A header képei és a main első képe fetchpriority="high" értéket kap, a navigáció alatti többi kép loading="lazy"-t.
- Kisebb WebP-változatok (480, 800 és 1200 px, csak a forrásnál kisebbek, minőség 82) srcset és sizes attribútummal, de csak olyan CSS-osztályoknál, amelyek szélességét a CSS rögzíti.
- A változatok tartalom-hash alapján gyorsítótárba kerülnek, így újabb build nem kódolja újra őket; egy külön script a forrásképeket WebP-re alakítja EXIF szerinti forgatással és méretkorláttal.
- pytest a képattribútumokra, a mintaoldalak böngészőben ellenőrizve.
Eredmények
- A width és a height lefoglalja a helyet (kisebb CLS); ha a CSS width: auto és height: auto, csak a képarányt rögzítik.
- A srcset csak rögzített CSS-szélességű képnél biztonságos: width: auto mellett a böngésző a sizes értékét veszi természetes szélességnek, és a kép összezsugorodik.
- A fő kép soha nem lehet lazy; a build ezt a header és a main első képe alapján dönti el.
- Minden kép konvertálása a közös favicont is WebP-re alakította volna, ami eltörte volna az oldalankénti felülírást, ezért a közös favicon eleve WebP.
- Képgyorsítótár nélkül minden build újrakódolná a változatokat.
Döntés
A build minden képhez automatikusan hozzáadja a méretet, a prioritást és a lusta betöltést, a srcset-et pedig csak a felsorolt, rögzített szélességű osztályokhoz. A forrásképek konvertálása külön, kézi lépés.
Korlátok és nyitott kérdések
- A HTML-feldolgozás reguláris kifejezésekkel történik; ez a generátor saját sablonjaihoz elég, idegen HTML-hez nem.
- AVIF-változat nincs; a WebP minden modern böngészőben működik.
- Valós felhasználói Core Web Vitals adat nincs (kis forgalom); a Lighthouse laboradata az irányadó.