Konwerter SVG na WebP
Zamień plik wektorowy na WebP o dokładnie takiej szerokości w pikselach, jakiej wymaga układ strony. Przydaje się, gdy CMS nie przyjmuje plików SVG, podgląd w mediach społecznościowych wymaga bitmapy albo ilustracja ma tyle ścieżek, że przeglądarka rysuje ją powoli.
Konwerter obrazów
lub upuść Pliki JPG, JPEG, JPE … tutaj ·
Maks. 95 MB na plik· Do 20 plików· Usuwane po 30 min
Pliki są przetwarzane na naszych serwerach i usuwane po 30 min.
85 zachowuje zdjęcia wizualnie identyczne z oryginałem. Obniż tylko wtedy, gdy potrzebujesz mniejszego pliku.
JPG, BMP i EPS nie obsługują przezroczystości. Przezroczyste piksele zostaną wypełnione tym kolorem.
Kolor szesnastkowy użyty za przezroczystymi pikselami, np. #FFFFFF.
Ten format przechowuje pojedynczy obraz. Wybierz wyjście GIF lub WebP, jeśli chcesz zachować animację.
Ikona wielorozmiarowa zawiera kilka rozdzielczości w jednym pliku; przeglądarki i systemy operacyjne wybierają potrzebną.
Zachowaj oryginalne wymiary albo podaj jeden bok, a proporcje zostaną zachowane.
Piksele dla wybranego wyżej boku.
Procent oryginalnych wymiarów.
sRGB jest właściwy dla ekranów i internetu. Zachowaj oryginał w procesach drukarskich; skala szarości odrzuca kolor.
Tylko metadane, 0 zachowuje oryginalną wartość. Drukarki i niektóre portale odczytują tę liczbę; nie zmienia ona wymiarów w pikselach.
Jak korzystać z narzędzia
- 1
Prześlij plik SVG
Dodaj maksymalnie 20 plików .svg wyeksportowanych z Figmy, Illustratora, Inkscape'a lub biblioteki wykresów, do 95 MB każdy.
- 2
Ustaw szerokość wyjściową
Zmień rozmiar obrazu wynikowego domyślnie ma szerokość 1200 px; ustaw dwukrotność szerokości, jaką obraz zajmie na stronie. Jakość to 90, a dla płaskich logo i ikon zaznacz Bezstratna w sekcji Ustawienia zaawansowane.
- 3
Konwertuj do WebP
Kliknij Konwertuj na WebP i pobierz pliki lub jeden plik ZIP. Przezroczyste obszary pozostają przezroczyste.
Jak przekonwertować SVG na WebP w określonym rozmiarze?
Prześlij plik SVG, ustaw w polu Zmień rozmiar obrazu wynikowego potrzebną szerokość w pikselach (domyślnie 1200 px) i kliknij Konwertuj na WebP. Wektor jest rysowany od nowa w tej szerokości, więc nic nie jest powiększane ani rozmywane.
Kiedy warto zamienić SVG na WebP
SVG stał się zaleceniem W3C w 2001 roku i jest właściwym formatem dla większości logo i ikon: kilka kilobajtów tekstu, który pozostaje ostry przy każdym powiększeniu. Kłopoty zaczynają się, gdy plik opuszcza Twój własny kod. WordPress i wiele hostowanych kreatorów sklepów odrzuca SVG, podglądy linków na Facebooku, LinkedInie i X są pobierane jako bitmapy, a narzędzia projektowe eksportują ilustracje z osadzonymi efektami rastrowymi, przez które plik wektorowy zamienia się w kilka megabajtów kodu.
WebP, opublikowany przez Google w 2010 roku i w końcu obsługiwany przez Safari od wersji 14 w 2020 roku, to bitmapa stworzona do tego zadania: mniejsza niż PNG przy tym samym wyglądzie, z prawdziwym kanałem alfa. Renderowanie SVG od razu do WebP w docelowym rozmiarze pozwala pominąć zwykły objazd przez duży eksport PNG. Jeśli potrzebujesz też odwrotnego kierunku, na stronie WebP na SVG wyjaśniamy, dlaczego wymaga on wektoryzacji, a nie konwersji.
Rozmiary SVG na WebP dla typowych miejsc na stronie
1200 × 630 px
Podgląd linku Open Graph
Obraz widoczny po udostępnieniu strony
1920 × 1080 px
Ilustracja hero na całą szerokość
Pokrywa większość ekranów komputerów w skali 1×
1600 × 900 px
Obraz w kolumnie bloga w 2×
Dla kolumny treści o szerokości 800 px
400 × 100 px
Logo w nagłówku w 2×
Dla miejsca na logo 200 × 50 px
SVG
Scalable Vector Graphics
SVG to format wektorowy oparty na XML, ustandaryzowany przez W3C w 2001 roku. Zamiast pikseli opisuje kształty, ścieżki i tekst, dzięki czemu pozostaje ostry w każdym rozmiarze i zwykle jest malutki w przypadku logo i ikon. Obsługuje przezroczystość, style CSS, skrypty i animacje, a każda przeglądarka renderuje go natywnie. SVG nie nadaje się do zdjęć, a złożone ilustracje mogą się wolno renderować. Otwierają i edytują go Illustrator, Inkscape, Figma i przeglądarki.
- Kompresja
- –
- Przezroczystość
- Tak
- Animacja
- Tak
- Rok powstania
- 2001 · W3C
WEBP
Obraz WebP
WebP to format obrazu wydany przez Google w 2010 roku, aby strony internetowe wczytywały się szybciej. Obsługuje w jednym formacie kompresję stratną i bezstratną, przezroczystość alfa oraz animację. Stratne pliki WebP są zwykle o 25–35% mniejsze niż JPEG o podobnej jakości wizualnej, a bezstratny WebP jest zwykle mniejszy niż PNG. Obsługują go wszystkie aktualne przeglądarki, ale część starszego oprogramowania desktopowego, usług drukarskich i formularzy przesyłania plików nadal go odrzuca. Windows, macOS i większość nowoczesnych edytorów grafiki otwiera pliki WebP.
- Kompresja
- Stratna lub bezstratna
- Przezroczystość
- Tak
- Animacja
- Tak
- Rok powstania
- 2010 · Google
SVG konwertuje się na WebP, aby uzyskać lekką bitmapę o stałym rozmiarze tam, gdzie pliki wektorowe nie są przyjmowane lub są rysowane powoli, np. w CMS, podglądzie w mediach społecznościowych czy na obciążonej stronie docelowej; WebP na SVG to wektoryzacja, a nie zmiana formatu.
Jak SVG jest rasteryzowany i co sprawdzić
Konwerter odczytuje własną szerokość, wysokość i viewBox pliku SVG, a następnie rysuje każdą ścieżkę w ustawionej szerokości; wysokość wynika z proporcji. Ponieważ rysowanie odbywa się w docelowym rozmiarze, cienkie linie i mały tekst są wygładzane raz, we właściwej skali. Późniejsze powiększanie małego PNG nigdy nie wygląda tak czysto.
Zwykłą niespodzianką są czcionki. Jeśli SVG wskazuje krój, który nie jest osadzony ani zamieniony na krzywe, użyta zostanie czcionka zastępcza i zmienią się długości linii. Przed eksportem zamień tekst na krzywe w programie graficznym. Zewnętrzne obrazy podlinkowane w SVG przez adres URL nie są pobierane, więc osadź je lub najpierw spłaszcz grafikę.
Konwerter SVG na WebP: co robić, a czego unikać
| Zrób | Nie rób |
|---|---|
| Renderuj w 2× szerokości CSS, w jakiej obraz jest wyświetlany | Nie konwertuj prostych ikon inline, które jako SVG są mniejsze |
| Używaj Bezstratna dla płaskich logo z małą liczbą kolorów | Nie renderuj w 4000 px dla miejsca 600 px |
| Zachowaj główny plik SVG na przyszłe rozmiary | Nie wysyłaj WebP w newsletterach e-mailowych |
| Dodaj do WebP atrybuty width i height, aby uniknąć przesunięć układu | Nie oczekuj żywego tekstu: WebP to piksele, a nie zaznaczalny tekst |
Pytania o konwersję SVG na WebP
Jaką szerokość w pikselach wybrać przy konwersji SVG na WebP?
Weź szerokość, w jakiej obraz jest wyświetlany w pikselach CSS, i podwój ją, aby był ostry na ekranach telefonów i laptopów o dużej gęstości pikseli. Ilustrację w kolumnie 800 px należy wyrenderować w 1600 px. Skala 3× rzadko się opłaca w sieci, bo plik rośnie, a widoczna poprawa jest niewielka.
Czy WebP jest lepszy od SVG na stronę internetową?
Nie w przypadku prostych logo, ikon i diagramów: czysty SVG jest malutki i ostry w każdym rozmiarze, więc zachowaj go. WebP wygrywa przy złożonych ilustracjach z gradientami, filtrami lub tysiącami ścieżek oraz tam, gdzie akceptowane są tylko bitmapy, np. w podglądach w mediach społecznościowych lub w CMS bez obsługi SVG.
Czy WebP zachowa przezroczyste tło mojego pliku SVG?
Tak. WebP ma pełny kanał alfa zarówno w trybie stratnym, jak i bezstratnym, więc obszary bez wypełnienia w SVG pozostają przezroczyste. Krawędzie kształtów są wygładzane względem przezroczystości, co dobrze wygląda na każdym kolorze tła.
Stratny czy bezstratny WebP dla grafiki wektorowej?
Bezstratna sprawdza się przy płaskich logo, ikonach i wykresach z kilkoma jednolitymi kolorami; kompresują się bardzo dobrze i zachowują idealnie czyste krawędzie. Stratna z jakością 85–90 pasuje do ilustracji z gradientami, cieniami lub teksturami, gdzie pliki bezstratne stają się ciężkie. Wypróbuj oba tryby na jednym pliku i zachowaj mniejszy wynik, który wygląda czysto.
Dlaczego nie mogę przesłać pliku SVG do WordPressa?
WordPress nie dopuszcza SVG do przesyłania, ponieważ SVG może zawierać skrypty. WebP akceptuje od wersji 5.8 z 2021 roku, więc po konwersji otrzymasz plik, który biblioteka mediów przyjmie bez wtyczki zabezpieczającej. Witryny potrzebujące prawdziwej grafiki wektorowej mogą nadal dodać obsługę SVG przez wtyczkę czyszczącą kod.
Czy mogę użyć pliku WebP w newsletterze e-mail?
Lepiej nie. Kilka klientów poczty, w tym Outlook na Windows, nie wyświetla WebP, a Gmail nie renderuje też SVG. W e-mailach użyj grafiki wyrenderowanej przez SVG na PNG.
