PNG do WebP
PNG je bezztrátový, ale pro web objemný. WebP podporuje průhlednost a často poskytuje mnohem menší soubory pro loga, ikony a ilustrace. Před nasazením do produkce převeďte aktiva PNG lokálně.
Jak převést PNG na WebP
1. Nahrajte svůj PNG (s nebo bez alfa).
2. Vyberte ztrátové nebo bezztrátové nastavení WebP, pokud je nabízeno.
3. Porovnejte výstupní velikost s původním PNG.
4. Stáhněte si soubor WebP.
Příklady
Logo na marketingovém webu
Logo PNG o velikosti 120 KB se může stát 40 KB WebP se stejnou průhledností — rychlejší načítání záhlaví.
Herní sprite list
Sprite s plochými barvami se agresivně komprimuje v bezztrátovém režimu WebP ve srovnání s PNG.
Grafika obchodu s aplikacemi
Nahraďte velké snímky obrazovky PNG v přiložených aktivech, kde běhové prostředí podporuje WebP.
Když PNG na WebP pomáhá
• Když potřebujete alfa průhlednost na webu s menšími bajty.
• Při migraci frontendů náročných na PNG na moderní formáty.
• Když Lighthouse označí nadrozměrné položky PNG.
Kdy ponechat PNG
• Když cílová prostředí přijímají pouze PNG (některé kanály e-mailů a PDF).
• Když návrháři potřebují univerzální bezztrátovou výměnu úprav.
• Když je podpora Safari-on-old-iOS náročným požadavkem bez výpadků.
PNG vs WebP pro aktiva uživatelského rozhraní
Návrháři exportují PNG ze zvyku. U produkčního webu WebP s průhledností často snižuje přenosovou velikost na polovinu. Automatizujte konverzi v CI nebo použijte tento nástroj pro ad-hoc aktiva.
Záložní strategie
Použijte sady obrázků/zdrojů: nejprve WebP, jako druhé PNG. Nebo zjistěte podporu na straně serveru pomocí hlaviček Accept. Neposkytujte WebP klientům, kteří jej nemohou dekódovat.
Pracovní postup úprav
Udržujte předlohy PNG v úložištích návrhů. Generujte WebP pouze pro nasazení artefaktů — vracení úprav je snazší z bezztrátových zdrojů PNG.
Časté dotazy
Je zachována průhlednost?
Ano — WebP podporuje alfa kanál podobný PNG.
Bezztrátové nebo ztrátové WebP?
Grafika s plochými barvami často vyhovuje bezztrátovému WebP. Fotografie vložené v PNG mohou používat ztrátové WebP pro menší velikost.
Budou se barvy měnit?
Bezeztrátový režim by měl přesně odpovídat formátu PNG. Ztrátový režim může vykazovat nepatrné rozdíly v přechodech.
Mohu použít WebP v obrázku pozadí CSS?
Ano ve všech moderních prohlížečích. Poskytujte záložní PNG pouze v případě, že analýzy ukazují starší provoz.
Lokální zpracování?
Ano — soubory nikdy neopustí váš prohlížeč.
Lepší než SVG?
U jednoduchých log je SVG často nejmenší a nekonečně se mění. WebP vyhovuje rastrovým kresbám a fotografiím s alfa.