Dekoder Base64 obrazów | Dekoduj i podglądaj obrazy online

Czym jest dekoder obrazów Base64?

Dekoder obrazów Base64 to narzędzie, które przekształca zakodowany w Base64 ciąg tekstowy z powrotem w obraz. Base64 to sposób zapisywania danych binarnych, takich jak bajty pliku obrazu, za pomocą tylko 64 zwykłych znaków tekstowych (liter, cyfr, +, / oraz = do dopełniania). Przeglądarki, wiadomości e-mail i wiele interfejsów API przechowują obrazy w ten sposób, aby obraz mógł być przesyłany w zwykłym tekście zamiast jako osobny plik. Dekoder odwraca ten proces: po wklejeniu ciągu pojawia się oryginalny obraz.

Format adresu URL danych

W internecie obraz zakodowany w Base64 jest zwykle zapisywany jako adres URL danych. Schemat wygląda następująco:

Na przykład:

Każda część pełni określoną funkcję:

• data: oznacza, że jest to adres URL danych, a nie zwykły adres internetowy.
• image/png to typ MIME informujący przeglądarkę, jakiego rodzaju jest to plik.
• ;base64 wskazuje, że dane po przecinku są zakodowane w Base64.
• Wszystko po przecinku to zakodowany obraz.

Jak działa dekoder

Dekodowanie odbywa się w czterech krokach.

1. Narzędzie sprawdza, czy ciąg zaczyna się od data:. Adres URL danych określający typ multimedialny inny niż obraz, na przykład data:text/plain, jest od razu odrzucany, ponieważ nie może zostać wyświetlony jako obraz.
2. Usuwa spacje, tabulatory i podziały wiersza, ponieważ długie ciągi Base64 są czasem dzielone na wiele wierszy. Ładunek używający kodowania procentowego zamiast Base64, które również dopuszcza RFC 2397, pozostaje niezmieniony.
3. Dekoduje tekst Base64 z powrotem do surowych bajtów.
4. Sprawdza kilka pierwszych bajtów wyniku. Każdy powszechny format obrazu zaczyna się stałą sekwencją bajtów, zwaną sygnaturą lub „liczbą magiczną”. Pliki PNG zaczynają się od 89 50 4E 47, pliki JPEG od FF D8 FF i tak dalej. Dekoder porównuje te sygnatury i nadaje obrazowi rozpoznany typ.

Bajty mają pierwszeństwo przed etykietą. Jeśli adres URL danych zawiera data:image/png, ale bajty zaczynają się od FF D8 FF, dekoder tworzy adres URL ponownie jako data:image/jpeg, dzięki czemu ciąg oferowany przez przycisk „Kopiuj adres URL obrazu” nigdy nie opisuje błędnie własnej zawartości.

Jeśli ciąg nie ma prefiksu data:, dekoder traktuje go jako surowe dane Base64, dekoduje je i odczytuje sygnaturę w ten sam sposób. Jeśli bajty nie pasują do żadnej znanej sygnatury obrazu i nie wyglądają jak tekst SVG, dekoder informuje, że ciąg nie wydaje się obrazem. Nie zgaduje formatu ani nie używa domyślnego typu zastępczego.

SVG jest obsługiwany inaczej, ponieważ jest formatem tekstowym (XML), a nie binarnym, więc nie ma stałej sygnatury bajtowej. Dekoder sprawdza pierwsze 1024 bajty zdekodowanego tekstu pod kątem znacznika <svg, deklaracji XML, takiej jak <?xml version="1.0"?>, po której występuje ten znacznik, albo deklaracji typu dokumentu SVG, po której on występuje. Znacznik kolejności bajtów na samym początku, dodawany przez niektóre edytory do plików UTF-8, jest ignorowany. Ponieważ SVG nie można rozpoznać na podstawie sygnatury bajtowej, adres URL danych określający image/svg+xml zachowuje zadeklarowany typ.

Wzór na rozmiar obrazu w Base64

Base64 przekształca każde 3 bajty danych binarnych w 4 znaki tekstowe. Wzór na długość zakodowanych danych jest następujący:

Symbole ⌈ ⌉ oznaczają „zaokrąglij w górę do następnej liczby całkowitej”, ponieważ Base64 zawsze działa w grupach po 4 znaków i dopełnia niepełną grupę znakami =.

W przypadku dużych plików daje to w przybliżeniu wzrost rozmiaru o 33%, ponieważ 4 ÷ 3 ≈ 1,33. Małe pliki mogą wykazywać większy procentowy wzrost, ponieważ zaokrąglenie w górę do następnej grupy 4 znaków ma większe znaczenie, gdy początkowa ilość danych jest niewielka.

Przykład obliczeń

Powyższy przykład PNG po zdekodowaniu daje 85 bajtów danych obrazu. Z użyciem wzoru:

Ciąg Base64 ma rzeczywiście długość 116 znaków, co się zgadza. Oznacza to wzrost o 36% względem pierwotnych 85 bajtów (116 ÷ 85 ≈ 1,36), nieco większy niż 33%, ponieważ plik jest bardzo mały.

Obsługiwane formaty obrazów

Dekoder odczytuje sygnaturę bajtową zdekodowanych danych, aby rozpoznać format. Rozpoznaje następujące typy:

Jak dekodować obraz Base64

1. Skopiuj ciąg Base64, z prefiksem data:image/... lub bez niego, z kodu HTML, CSS, odpowiedzi interfejsu API albo wiadomości e-mail.
2. Wklej go do pola wejściowego.
3. Obraz dekoduje się automatycznie chwilę po zakończeniu wpisywania albo po naciśnięciu przycisku dekodowania.
4. Zdekodowany obraz pojawia się w obszarze podglądu. Jego adres URL danych można skopiować przyciskiem „Kopiuj adres URL obrazu”, a sam obraz zapisać, klikając go prawym przyciskiem myszy w podglądzie i wybierając opcję zapisania obrazu, ponieważ jest renderowany w przeglądarce jako zwykły element obrazu.

Typowe zastosowania obrazów Base64

• Osadzanie w kodzie HTML, CSS lub JavaScript: umieszczenie danych obrazu bezpośrednio w kodzie eliminuje potrzebę wysyłania osobnego żądania dotyczącego pliku.
• Szablony wiadomości e-mail: niektóre klienty poczty domyślnie blokują obrazy połączone z zewnętrznymi adresami, ale osadzony obraz Base64 nadal się wyświetla.
• Jednoplikowe narzędzia HTML: cała strona, wraz z obrazami, może być dostarczona jako jeden samodzielny plik.
• Odpowiedzi interfejsów API: obraz może być przesyłany wewnątrz danych JSON zamiast wymagać własnego punktu końcowego.
• Tła i ikony CSS: małe ikony są czasem zapisywane bezpośrednio w arkuszu stylów jako adres URL danych.

Kompromisy związane z obrazami Base64

Kodowanie Base64 jest wygodne, ale nie jest pozbawione kosztów:

• Zakodowany tekst jest w przybliżeniu o jedną trzecią większy od oryginalnego pliku.
• Przeglądarki nie mogą buforować osadzonego obrazu tak jak pliku połączonego z dokumentem, więc pobierają go ponownie przy każdym pobraniu otaczającej strony lub arkusza stylów.
• Przeglądarka musi zdekodować tekst Base64, zanim wyświetli obraz, co wymaga niewielkiej dodatkowej ilości obliczeń.
• Ze względu na zwiększenie rozmiaru i utratę buforowania osadzanie Base64 nadaje się do małych obrazów, takich jak ikony i proste logotypy. Większe fotografie zwykle lepiej udostępniać jako zwykłe pliki obrazów.

Najczęściej zadawane pytania

Czym jest dekoder obrazów Base64?

To narzędzie przekształca zakodowany w Base64 ciąg tekstowy z powrotem w obraz możliwy do wyświetlenia, taki jak plik PNG, JPEG, GIF, WebP, BMP lub SVG.

Jak dekodować obraz Base64?

Wklej ciąg Base64, z prefiksem data:image/... lub bez niego, do dekodera. Odczyta on ciąg, zdekoduje go i wyświetli wynikowy obraz.

Czy ciąg Base64 można zdekodować bez prefiksu adresu URL danych?

Tak. Dekoder traktuje go jako surowe dane Base64, dekoduje bajty i odczytuje kilka pierwszych bajtów, aby rozpoznać format na podstawie sygnatury, na przykład PNG, JPEG, GIF, WebP, BMP lub ICO. SVG jest rozpoznawany przez wyszukanie znacznika <svg w zdekodowanym tekście. Jeśli żadna z tych sygnatur nie pasuje, dekoder informuje, że ciąg nie wydaje się obrazem, zamiast zgadywać format.

Dlaczego mój obraz Base64 nie dekoduje się?

Większość przypadków wynika z jednej z trzech przyczyn. Ciąg może zawierać znaki spoza standardowego alfabetu Base64, którym są A–Z, a–z, 0–9, +, / i =; wariant base64url używany w niektórych tokenach internetowych wykorzystuje zamiast tego - i _ i nie jest akceptowany. Ciąg mógł zostać ucięty w połowie, przez co jego długość jest o jeden większa od wielokrotności czterech — żadna poprawna wartość Base64 nie ma takiej długości. Bajty mogą też po prostu nie należeć do żadnego obsługiwanego formatu obrazu. Sam brak dopełnienia = nie stanowi problemu, a spacje i podziały wiersza są usuwane przed dekodowaniem.

Czy kodowanie Base64 jest formą zabezpieczenia lub szyfrowania?

Nie. Base64 to tylko sposób przedstawiania bajtów jako tekstu; niczego nie ukrywa. Każdy może w kilka sekund zdekodować ciąg Base64 za pomocą bezpłatnego narzędzia, dlatego nigdy nie należy używać go do ochrony prywatnych obrazów ani innych danych.

O ile ciąg Base64 jest większy od oryginalnego obrazu?

W przypadku większych plików jest większy o około jedną trzecią, ponieważ każde 3 bajty oryginalnych danych stają się 4 znakami tekstu. Obraz o rozmiarze 100 KB po zakodowaniu zajmuje około 133 KB. Małe obrazy mogą wykazywać nieco większy procentowy wzrost z powodu zaokrągleń.

Historia

Base64 wywodzi się ze schematów kodowania opracowanych w latach 1970 i 1980 do przesyłania danych binarnych przez systemy pocztowe obsługujące wyłącznie zwykły tekst. Zostało sformalizowane dla poczty elektronicznej w RFC 989 (1987), a następnie w RFC 1421. Osadzanie obrazów na stronach internetowych stało się możliwe po zdefiniowaniu schematu adresów URL data: w RFC 2397 (1998), a technika ta zyskała popularność w połowie lat 2000, gdy programiści szukali sposobów na ograniczenie liczby osobnych żądań HTTP, szczególnie przy wolnych połączeniach mobilnych.

Piśmiennictwo

1. RFC 4648: Kodowanie danych Base16, Base32 i Base64
2. RFC 2397: Schemat adresów URL „data”
3. MDN Web Docs: adresy URL danych
4. Standard WHATWG dotyczący rozpoznawania typu MIME