Konwerter obrazu na BASE64

Przywracanie wybranego pliku...

Adres danych Base64 łączy typ multimediów i zakodowane bajty obrazu w jednej wartości tekstowej, takiej jak data:image/png;base64,.... Wybierz obraz do 20 MiB, a konwerter utworzy tę wartość lokalnie w przeglądarce. Przed skopiowaniem zobaczysz dane pliku źródłowego i przybliżoną długość powstałego adresu.

Jak zakodować obraz w base64

  1. 1

    Wybierz obraz

    Wybierz jeden plik obrazu o rozmiarze do 20 MiB.

  2. 2

    Zakoduj lokalnie

    Przeglądarka odczyta plik i utworzy pełny adres danych Base64 bez wysyłania go na serwer.

  3. 3

    Sprawdź wynik

    Zobacz typ multimediów, dane pliku i przybliżoną długość utworzonego adresu.

  4. 4

    Skopiuj adres danych

    Skopiuj do schowka pełną wartość `data:image/...;base64,...`.

Kiedy osadzać inline, kiedy linkować

Osadzanie base64 oszczędza żądanie HTTP kosztem 33% wzrostu rozmiaru, opłacalne dla niektórych zasobów, marnotrawne dla innych.

Matematyka rozmiaru

Rozmiar oryginału Rozmiar base64 Dodatkowe bajty
1 KB 1.36 KB 360 B
10 KB 13.6 KB 3.6 KB
100 KB 136 KB 36 KB
1 MB 1.36 MB 360 KB

Przewodnik decyzyjny

Zastosowanie Inline czy zewnętrzny
Ikona poniżej 2 KB (logo SVG, sprite) Inline
Obraz kursora w CSS (cursor: url()) Inline
Mała samodzielna demonstracja HTML lub CSS Inline
Ikona dołączona do payloadu JavaScript Inline
Obraz hero, > 50 KB Zewnętrzny
Cokolwiek, co da się cache’ować osobno Zewnętrzny

Format data URI

data:[<mediatype>][;base64],<data>

Przykłady:

  • data:image/png;base64,iVBORw0KGgo..., PNG
  • data:image/svg+xml;utf8,<svg>...</svg>, SVG, często lepszy inline bez base64
  • data:image/jpeg;base64,/9j/4AAQS..., JPG

Wskazówki

  • SVG często jest lepszy jako url() z kodowaniem utf8 zamiast base64; krótszy, czytelny.
  • Kodowanie nie sprawdza ani nie oczyszcza obrazu. Osadzaj tylko zaufane pliki, zwłaszcza SVG, który może zawierać aktywną zawartość lub odwołania zewnętrzne.
  • Duże obrazy w payloadach JSON blokują parsowanie, jeśli są bardzo duże; rozważ multipart albo referencje zewnętrzne.
  • CSS background-image z base64 osadza się czysto, ale niweczy cache między stronami.

Najczęściej zadawane pytania

Base64 koduje 3 bajty wejścia jako 4 znaki, więc wynik jest zawsze ~33% większy niż wejście. Obraz 10 KB daje ciąg około 13 600 znaków. Długi jest normalny.

Konwerter przyjmuje jeden obraz do 20 MiB. To granica przetwarzania, a nie zalecany rozmiar do osadzania. Adresy danych powinny być małe, bo Base64 zwiększa rozmiar źródła o około jedną trzecią i uniemożliwia osobne buforowanie obrazu.

Nie. Kodowanie base64 działa w Twojej przeglądarce. Obraz nigdy nie opuszcza Twojego urządzenia.

Nie w tym koderze. Aby zamienić adres danych lub surowy ciąg Base64 na plik obrazu do pobrania, użyj osobnego narzędzia Base64 na obraz.

Powiązane narzędzia