Konwerter PNG do WebP
PNG jest bezstratny, ale ciężki w sieci. WebP obsługuje przezroczystość i często daje znacznie mniejsze pliki dla logo, ikon i ilustracji. Konwertuj zasoby PNG lokalnie przed wdrożeniem na produkcję.
Jak konwertować PNG na WebP
1. Prześlij PNG (z alpha lub bez).
2. Wybierz ustawienia WebP stratne lub bezstratne, jeśli są dostępne.
3. Porównaj rozmiar wyniku z oryginalnym PNG.
4. Pobierz plik WebP.
Przykłady
Logo na stronie marketingowej
Logo PNG 120 KB może stać się WebP 40 KB z identyczną przezroczystością — szybsze ładowanie nagłówka.
Arkusz sprite gry
Sprite’y z płaskimi kolorami agresywnie kompresują się w bezstratnym WebP w porównaniu z PNG.
Grafika do sklepu z aplikacjami
Zamień duże PNG w pakowanych zasobach, gdzie runtime obsługuje WebP.
Kiedy PNG do WebP pomaga
• Gdy potrzebujesz alpha w sieci przy mniejszej liczbie bajtów.
• Gdy migrujesz frontendy oparte na PNG na nowoczesne formaty.
• Gdy Lighthouse flaguje zbyt duże zasoby PNG.
Kiedy zostawić PNG
• Gdy środowiska docelowe akceptują tylko PNG (część e-maili i pipeline’ów PDF).
• Gdy projektanci potrzebują uniwersalnej bezstratnej wymiany do edycji.
• Gdy wsparcie Safari na starym iOS jest twardym wymogiem bez fallbacków.
PNG vs WebP dla zasobów UI
Projektanci z przyzwyczajenia eksportują PNG. W produkcyjnej sieci WebP z przezroczystością często halvuje transfer. Automatyzuj konwersję w CI lub użyj tego narzędzia dla ad-hoc zasobów.
Strategie fallback
Użyj picture/source: najpierw WebP, potem PNG. Albo wykrywaj wsparcie po stronie serwera przez nagłówki Accept. Nie serwuj WebP klientom, którzy go nie dekodują.
Workflow edycji
Trzymaj master PNG w repozytoriach designu. Generuj WebP tylko do artefaktów deploy — łatwiej wrócić do edycji z bezstratnego PNG.
Najczęstsze pytania
Czy przezroczystość jest zachowana?
Tak — WebP obsługuje kanał alpha podobnie jak PNG.
WebP bezstratny czy stratny?
Grafika z płaskimi kolorami często pasuje do bezstratnego WebP. Zdjęcia osadzone w PNG mogą używać stratnego WebP dla mniejszego rozmiaru.
Czy kolory się przesuną?
Tryb bezstratny powinien dokładnie odpowiadać PNG. Tryb stratny może pokazać lekkie różnice w gradientach.
Czy mogę użyć WebP w CSS background-image?
Tak we wszystkich nowoczesnych przeglądarkach. Dodaj fallback PNG tylko jeśli analityka pokazuje ruch legacy.
Lokalne przetwarzanie?
Tak — pliki nie opuszczają przeglądarki.
Lepsze niż SVG?
Dla prostych logo SVG często jest najmniejsze i skaluje się nieskończenie. WebP pasuje do grafiki rastrowej i zdjęć z alpha.