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.
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.
Č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č.