PNG-ből WebP
A PNG veszteségmentes, de terjedelmes az interneten. A WebP támogatja az átláthatóságot, és gyakran sokkal kisebb fájlokat szállít logókhoz, ikonokhoz és illusztrációkhoz. A PNG-eszközök helyi konvertálása az éles üzembe helyezés előtt.
PNG konvertálása WebP-vé
1. Töltse fel PNG-jét (alfával vagy anélkül).
2. Válassz veszteséges vagy veszteségmentes WebP beállításokat, ha felajánlja.
3. Hasonlítsd össze a kimeneti méretet az eredeti PNG-vel.
4. Töltsd le a WebP fájlt.
Példák
Logó a marketing oldalon
A 120 KB-os PNG logó 40 KB-os WebP-vé válhat azonos átlátszósággal — gyorsabb fejlécbetöltés.
Játék sprite lap
A lapos színű sprite-ok agresszíven tömörítenek a PNG-hez képest veszteségmentesen.
App Store grafika
Cserélje le a nagy PNG képernyőképeket a csomagban lévő eszközökben, ahol a futási környezet támogatja a WebP-t.
Mikor használd ezt az eszközt
• Amikor alfa-átlátszóságra van szüksége az interneten kisebb bájtokkal.
• A nehéz PNG-t használó frontendek modern formátumokba való migrálásakor.
• Amikor a Lighthouse megjelöli a túlméretezett PNG-eszközöket.
PNG vs WebP a felhasználói felület eszközeihez
A tervezők megszokásból exportálják a PNG-t. Az éles web esetében az átlátszósággal rendelkező WebP gyakran felére csökkenti az átvitel méretét. Automatizálja a konvertálást a CI-ben, vagy használd ezt az eszközt ad-hoc eszközökhöz.
Gyakori kérdések
Az átláthatóság megmarad?
Igen — A WebP a PNG-hez hasonló alfa-csatornát támogat.
Veszteségmentes vagy veszteséges WebP?
A lapos színekkel ellátott grafika gyakran megfelel a veszteségmentes WebP-nek. A PNG-be ágyazott fotók veszteséges WebP-t használhatnak kisebb méretben.
Eltolódnak a színek?
A veszteségmentes módnak pontosan meg kell egyeznie a PNG-vel. A veszteséges mód enyhe eltéréseket mutathat a színátmenetekben.
Használhatom a WebP-t CSS-háttérképben?
Igen minden modern böngészőben. Csak akkor adjon meg tartalék PNG-t, ha az elemzések régi forgalmat mutatnak.
Helyi feldolgozás?
Igen — a fájlok soha nem hagyják el a böngészőt.