Konwerter obrazów do Base64 + SVG do Data URI | We.Inc
Zamień obrazy PNG, JPG, WebP, GIF lub SVG na data URI w Base64 w swojej przeglądarce. Skopiuj jako znacznik img, tło CSS lub JSON, uzyskaj mniejszą wersję SVG zakodowaną w URL i sprawdź, czy osadzanie się opłaca.
Base64 zamienia bajty obrazu na tekst, dzięki czemu może on trafić do HTML lub CSS jako data URI, na przykład src="data:image/png;base64,...". Tekst jest o około jedną trzecią większy niż plik. Upuść obraz poniżej, by otrzymać data URI, gotowe fragmenty img i CSS oraz radę, czy warto go osadzić.
Kiedy osadzanie pomaga, a kiedy szkodzi
Obraz
Osadzić?
Dlaczego
Ikona poniżej 4 kB
Zwykle tak
Oszczędza jedno żądanie niewielkim kosztem
Logo lub ikona SVG
Tak, zakodowane w URL
Mniejsze niż Base64 i nadal czytelne
Obraz w pierwszym widoku, od 4 do 20 kB
Czasami
Tylko jeśli pojawia się na jednej stronie
Zdjęcie lub cokolwiek powyżej 20 kB
Nie
Powiększa każde ładowanie i nie może być cache'owane osobno
Upuść jeden obraz lub kilka. Każdy otrzyma data URI w Base64, a pliki SVG także wersję zakodowaną w URL, która zwykle jest mniejsza. Skopiuj dowolną z nich jako znacznik img, tło CSS lub wartość JSON. Pliki nigdy nie opuszczają Twojego urządzenia.
Upuść obrazy na pole lub kliknij, by je wybrać. Działają PNG, JPG, WebP, GIF, AVIF, ICO i SVG.
Przeglądarka odczytuje każdy plik lokalnie i go koduje. Nic nie jest wysyłane.
Porównaj oryginalny rozmiar z rozmiarem po zakodowaniu i przeczytaj werdykt, czy warto osadzać.
Skopiuj potrzebny format: surowy data URI, znacznik img, CSS background-image lub JSON.
Najpierw skompresuj, potem zakoduj. Zakodowanie zdjęcia o rozmiarze 300 kB daje około 400 kB tekstu, czyli więcej niż plik, od którego zaczynasz.
W przypadku SVG forma zakodowana w URL całkowicie pomija Base64. Zwykle jest mniejsza, a znaczniki nadal da się czytać i edytować.
Data URI w CSS pobierają się razem z arkuszem stylów, co blokuje renderowanie. Ogranicz je do małych ikon potrzebnych na każdej stronie.
Pamiętaj o tekście alternatywnym. Osadzony obraz nadal potrzebuje opisu dla czytników ekranu albo alt="", jeśli jest dekoracyjny.
Najczęściej zadawane pytania
Dlaczego wersja Base64 jest większa niż mój obraz?
Base64 używa czterech znaków tekstu na każde trzy bajty, więc wynik jest o około 33% większy, do tego dochodzi kilka bajtów dopełnienia i prefiks data:. Kompresja Gzip lub Brotli na stronie odzyskuje część tej różnicy, ale rzadko całą.
Czy używać Base64 dla SVG?
Zwykle nie. SVG to już tekst, więc może trafić do data URI po zakodowaniu zaledwie kilku znaków. Taka wersja jest zazwyczaj mniejsza niż Base64 i pozostaje czytelna. Używaj Base64 tylko wtedy, gdy narzędzie, do którego wklejasz, odrzuca formę zakodowaną w URL.
Czy data URI działają w emailach?
Obsługa jest wybiórcza. Kilka dużych klientów poczty blokuje lub usuwa obrazy w data URI, więc w newsletterach umieść obraz na serwerze i podlinkuj go albo dołącz go z content ID.
Czy data URI mają limit rozmiaru?
Obecne przeglądarki akceptują bardzo długie data URI w znacznikach img i w CSS, daleko powyżej rozmiaru jakiegokolwiek rozsądnego obrazu. Praktycznym limitem jest wydajność: duże osadzone obrazy spowalniają plik, który je zawiera. Niektóre starsze narzędzia i klienty poczty rzeczywiście je ucinają.
Jak zbudowany jest data URI
Data URI składa się z trzech części: schematu data:, typu nośnika, np. image/png, i treści. W przypadku obrazów binarnych treść jest w Base64, a po typie występuje ;base64. W formatach tekstowych, takich jak SVG, treścią mogą być same znaczniki z kilkoma znakami zakodowanymi procentowo.
Przeglądarki traktują data URI jak każde inne źródło obrazu. Jest on dekodowany w pamięci, więc nie ma dodatkowego żądania, ale nie ma też osobnego wpisu w cache: obraz jest pobierany ponownie za każdym razem, gdy pobierana jest zawierająca go strona lub arkusz stylów.
Lepsze rozwiązania dla większości obrazów
Dla wszystkiego, co jest większe niż ikona, zwykły plik serwowany przez HTTP/2 lub HTTP/3 jest niemal zawsze szybszy. Wiele żądań dzieli jedno połączenie, obraz jest cache'owany osobno, a przeglądarka może go ładować leniwie lub we właściwym rozmiarze dzięki srcset.
Osadzanie nadal ma sens w przypadku drobnych ikon w pojedynczym komponencie, placeholderów wyświetlanych podczas ładowania prawdziwego obrazu oraz samodzielnych plików HTML, takich jak raporty czy dema offline.
Wystarczająco mały, by go osadzić. Oszczędza żądanie i niewiele dodaje do pliku, który go zawiera.
Na granicy. Osadź go tylko wtedy, gdy pojawia się w pierwszym widoku na jednej stronie; w innym przypadku zwykły plik lepiej się cache'uje.
Data URI
JSON
nieznany typ
, {w} na {h} px
Plik {file}, po zakodowaniu {encoded} ({pct}% pliku)
Kodowanie SVG
SVG zakodowane w URL ({size})
Base64 ({size})
Format kopiowania
... ({n} znaków; użyj Kopiuj, by uzyskać pełny tekst)
Wynik dla {name}
Kopiuj
{name} nie jest obrazem, więc został pominięty.
Koduj obrazy
Upuść obrazy tutaj lub kliknij, by wybrać. Pozostają na Twoim urządzeniu.