TanodTools
PL

Obraz na Base64

Zamień obraz na data URL w Base64, który wkleisz prosto do HTML, CSS, Markdown lub JSON.

Twoje pliki nigdy nie opuszczają Twojego urządzenia

Upuść obraz tutaj

PNG, JPEG, WebP, GIF, BMP, AVIF lub SVG. Możesz też przeciągnąć obraz w dowolne miejsce na tej stronie.

Otwierane na tym urządzeniu. Nic nie jest przesyłane.

Jeden obraz naraz, do 10 MB. PNG, JPEG, WebP, GIF, BMP, AVIF i SVG.

Jak zamienić obraz na Base64

  1. Wybierz obraz albo przeciągnij go na stronę.
  2. Wybierz potrzebną postać: data URL, czysty Base64, CSS, znacznik img HTML lub Markdown.
  3. Kliknij Kopiuj albo pobierz tekst jako plik.

Osadzanie obrazów jako tekstu

HTML, CSS, JSON, Markdown i treść e-maili to tekst, a obrazy są binarne. Base64 łączy te dwa światy, zapisując bajty obrazu za pomocą 64 bezpiecznych znaków, dzięki czemu cały obraz może znaleźć się w regule arkusza stylów, znaczniku img lub pliku konfiguracyjnym bez osobnego pobierania.

To narzędzie odczytuje plik w Twojej przeglądarce, sprawdza jego prawdziwy typ po pierwszych bajtach i buduje wybrany fragment kodu wokół zakodowanego tekstu. Sam obraz nie jest zmieniany: zdekodowanie Base64 zwraca dokładnie oryginalny plik.

Wskazówki

  • Najpierw zmniejsz obraz narzędziem Kompresuj obraz lub Zmień rozmiar obrazu; każdy zaoszczędzony bajt to o jedną trzecią więcej oszczędności w Base64.
  • W przypadku prostych ikon SVG jest często mniejszy niż jakikolwiek PNG, nawet w postaci Base64.
  • Aby zdekodować Base64 z powrotem do pliku albo zakodować dowolny inny plik, użyj narzędzia Koduj i dekoduj Base64.

Najczęstsze pytania

Czym jest data URL?

To sposób umieszczenia bajtów pliku wewnątrz linku. Zaczyna się od data:, typu pliku, na przykład image/png, i ;base64,, a dalej następuje tekst Base64. Przeglądarki wyświetlają go dokładnie tak, jakby obraz został załadowany z osobnego pliku.

Dlaczego Base64 jest większy niż obraz?

Base64 zapisuje każde 3 bajty jako 4 znaki tekstu, więc tekst jest o około 33% większy od pliku. Serwery WWW kompresujące tekst odzyskują część tej różnicy, ale obraz osadzony w treści i tak jest większy niż ten sam obraz serwowany osobno.

Kiedy osadzać obraz?

W przypadku małych elementów: ikon, drobnych teł i obrazów zastępczych poniżej kilku kilobajtów albo gdy wymagany jest jeden samodzielny plik HTML lub e-mail. Duże obrazy lepiej trzymać jako osobne pliki, ponieważ data URL nie może być buforowany osobno i jest pobierany ponownie z każdą stroną lub arkuszem stylów, który go zawiera. Narzędzie ostrzega powyżej 100 KB.

Jak określany jest typ pliku?

Na podstawie bajtów w pliku, a nie jego nazwy, więc plik PNG zapisany z rozszerzeniem .jpg nadal dostaje image/png. Pliki SVG są rozpoznawane po tekście i oznaczane jako image/svg+xml.

Czy mój obraz jest przesyłany?

Nie. Obraz jest odczytywany i kodowany w Twojej przeglądarce, na Twoim urządzeniu.