Obraz → Base64

Zamień obraz na data URI w Base64 z gotowym kodem <img> i CSS albo zdekoduj data URI z powrotem na obraz — bezpośrednio w przeglądarce.

O narzędziu Obraz → Base64

Co to jest

To narzędzie koduje obraz — PNG, JPEG, WebP, GIF, AVIF, BMP, ICO lub SVG — w Base64, żeby można go było osadzić prosto w HTML, CSS lub JSON. Wynik dostaniesz jako data URI, surowy Base64 albo, dla SVG, data URI zakodowane jak URL, razem z gotowym kodem do wklejenia. Działa też w drugą stronę: wklej data URI, aby zobaczyć i zapisać obraz.

Główne funkcje

  • PNG, JPEG, WebP, GIF, AVIF, BMP, ICO i SVG; typ jest rozpoznawany z samego pliku.
  • Wynik jako data URI, surowy Base64 lub zakodowany jak URL (krótszy dla SVG).
  • Gotowy kod dla znacznika <img> i CSS, z prawdziwą szerokością i wysokością.
  • Malutki rozmyty placeholder (LQIP) dla obrazów ładowanych z opóźnieniem.
  • Dekodowanie: wklej Base64 lub data URI, aby odzyskać obraz.

Jak używać

  1. Upuść obraz na obszar, kliknij go, aby wybrać plik, lub kliknij „Przykład”.
  2. Wybierz format wyniku.
  3. W razie potrzeby włącz mikro-placeholder (LQIP).
  4. Skopiuj wynik lub gotowy kod; aby zdekodować, wklej data URI w pole tekstowe.

Kiedy się przydaje

  • Osadzić małą ikonę w pliku CSS bez dodatkowego żądania.
  • Umieścić obraz w e-mailu HTML lub stronie w jednym pliku.
  • Sprawdzić, jaki obraz zawiera długie data URI w kodzie.

Prywatność i ograniczenia

Twoje dane

Twój obraz jest przetwarzany w przeglądarce i nie trafia na serwer — witryna otrzymuje tylko anonimowe zdarzenie „otwarto narzędzie”, bez treści. Wynik wysłany do innego narzędzia zostaje na tym urządzeniu przez 24 godziny w „Ostatniej aktywności”.

Ograniczenia

  • Base64 powiększa obraz mniej więcej o jedną trzecią, więc nadaje się do małych obrazów, a nie zdjęć.
  • Osadzonego obrazu przeglądarka nie może zapisać w pamięci podręcznej osobno.

Najczęstsze pytania

Kiedy data URI to dobry pomysł?

Przy małych ikonach, logo i placeholderach, gdzie oszczędzone osobne żądanie znaczy więcej niż rozmiar. Dla dużych zdjęć lepszy jest zwykły plik: jest mniejszy, a przeglądarka może go zapisać w pamięci podręcznej.

Czym jest placeholder LQIP?

Bardzo mała, rozmyta wersja obrazu — kilkaset bajtów — wyświetlana, dopóki ładuje się prawdziwy obraz, żeby strona nie skakała.

Dlaczego dla SVG lepsze jest kodowanie URL?

SVG to tekst, więc można go zapisać w data URI prawie bez zmian. Kodowanie URL zostawia go czytelnym i zwykle krótszym niż Base64.