Jak używać
- Przeciągnij plik WebP na pole upuszczania, kliknij, aby go wybrać, lub wklej obraz. Działają też pliki PNG i JPEG.
- Aby utworzyć WebP z innego formatu, wybierz WebP w polu „Konwertuj na” i ustaw „Jakość”.
- Opcjonalnie ustaw „Maks. szerokość”, a następnie porównaj rozmiar oryginalny z rozmiarem po zakodowaniu.
- Skopiuj lub pobierz data URI, czysty Base64, znacznik HTML img, CSS background-image lub Markdown.
Czym jest WebP?
WebP to format obrazów udostępniony przez Google w 2010 roku. Łączy w sobie kompresję stratną opartą na kodeku wideo VP8, osobny tryb bezstratny, kanał alfa i animację. Typ MIME to image/webp, a ponieważ plik jest kontenerem RIFF, wynik Base64 zaczyna się od UklGR. Według Google bezstratne pliki WebP są o około 26% mniejsze od PNG, a stratne o 25–34% mniejsze od JPEG przy porównywalnej jakości.
Dlaczego WebP pasuje do data URI
Base64 powiększa każdy plik o tę samą jedną trzecią, więc najmniejszy plik źródłowy daje najkrótszy ciąg. Dlatego WebP sprawdza się tu znakomicie: przezroczysta ikona PNG przekonwertowana na WebP zachowuje przezroczystość i zwykle się zmniejsza, a zdjęcie JPEG staje się mniejsze przy podobnej jakości wizualnej. Przy bardzo wysokich ustawieniach jakości plik może być większy niż zoptymalizowany oryginał, dlatego przed skopiowaniem sprawdź rozmiar po zakodowaniu.
Animowane pliki WebP zakodowane bez zmian zachowują wszystkie klatki. Konwersja lub zmiana rozmiaru renderuje ponownie tylko jedną klatkę.
Obsługa w przeglądarkach i programach pocztowych
Wszystkie aktualne popularne przeglądarki wyświetlają WebP: Chrome, Edge, Firefox, Opera i Safari od wersji 14. Brak obsługi dotyczy tylko bardzo starych przeglądarek, takich jak Internet Explorer. Z pocztą e-mail jest inaczej: kilka desktopowych klientów poczty, w tym Outlook dla Windows, nie wyświetla WebP, dlatego w szablonach wiadomości e-mail używaj PNG lub JPEG.
Tworzenie data URI z WebP w JavaScript
// Odczyt pliku wybranego przez użytkownika
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Ponowne zakodowanie canvas jako WebP z jakością 80%
const uri = canvas.toDataURL('image/webp', 0.8);Jeśli przeglądarka nie potrafi kodować WebP, toDataURL bez żadnego ostrzeżenia zwraca PNG, dlatego sprawdź, czy wynik zaczyna się od data:image/webp.
Najczęściej zadawane pytania
Czy można tu przekonwertować PNG lub JPEG na WebP w Base64?
Tak. Wczytaj obraz, wybierz WebP w polu „Konwertuj na” i ustaw jakość. Konwersja korzysta z kodera wbudowanego w przeglądarkę, a wynik jest kodowany jako data:image/webp.
Czy Base64 zachowuje animację WebP?
Tak, pod warunkiem że nie wybrano konwersji ani nie ustawiono maksymalnej szerokości. Ciąg Base64 zawiera wtedy dokładnie ten sam plik ze wszystkimi klatkami.
Czy wszystkie przeglądarki wyświetlają obrazy data:image/webp?
Wyświetlają je aktualne wersje przeglądarek Chrome, Edge, Firefox, Opera i Safari. Internet Explorer i Safari w wersjach starszych niż 14 ich nie obsługują.