Jak przekonwertować obraz na Base64 data URI do CSS?

Upuść lub wklej obraz (Ctrl+V), potem otwórz kartę CSS i kliknij Copy. Otrzymasz regułę background-image: url(...) z osadzonym data URI. Karty HTML, Markdown, Raw Base64 i JSON działają tak samo.

Dlaczego wynik Base64 jest o około jedną trzecią większy niż mój obraz?

Base64 zamienia każde 3 bajty na 4 znaki tekstu, więc tekst jest o około 33% większy niż plik. Dlatego data URI nadają się do małych ikon i logo, a nie do dużych zdjęć.

Jak skrócić ciąg Base64?

Najpierw otwórz Shrink i ustaw Max width lub Format (WebP, JPEG albo PNG), a dla WebP lub JPEG obniż Quality. Plików SVG i GIF nie da się w ten sposób zmniejszyć; SVG ma osobną kartę SVG (URL-encoded).

Czy mogę zamienić ciąg Base64 z powrotem na obraz?

Tak. Przełącz Direction na Base64 to Image i wklej data URI lub sam Base64. Narzędzie rozpoznaje PNG, JPEG, GIF, WebP, SVG, BMP, ICO i AVIF, a potem oferuje pobranie. Nieprawidłowe dane wejściowe powodują błąd.

Dlaczego Copy nie działa albo podgląd wygląda na ucięty przy dużym obrazie?

Podgląd pokazuje tylko pierwsze 2000 znaków, ale Copy i Download dają pełną wartość. Bardzo długie ciągi mogą przekroczyć limit schowka przeglądarki, więc użyj Download albo najpierw zmniejsz obraz.

Czy naprawdę jest za darmo?

Tak. Każde narzędzie jest darmowe, bez konta i karty kredytowej. Praca odbywa się na Twoim urządzeniu, a nie na naszych serwerach, co pozwala utrzymać ją za darmo.

Czy moje pliki są wysyłane?

Nie. Twoje pliki są otwierane i przetwarzane w przeglądarce i nie są wysyłane do LibraTool. Niektóre narzędzia najpierw pobierają do przeglądarki silnik przetwarzania lub model AI; to pobranie nie zawiera żadnych Twoich danych.

Czy działa na urządzeniach mobilnych?

Tak. Działa w aktualnych przeglądarkach mobilnych na iOS i Androidzie, bez instalowania czegokolwiek. Bardzo duże pliki mogą być przetwarzane wolno lub wyczerpać pamięć telefonu, więc użyj do nich komputera.

🖼️

Obraz do Base64 za darmo

Konwertuj obraz do URI danych Base64 do osadzonego użycia w CSS, HTML lub Markdown. Kopiuj gotowe fragmenty kodu. Kodowane w Twojej przeglądarce; nigdy nie przesyłane.

Rozmiar pliku zależy od Twojego urządzeniaPliki pozostają prywatneLogowanie nie jest wymaganeZa darmo na zawsze

Działa offline po wczytaniu

Upuść plik tutaj lub kliknij, aby przeglądać

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · przetwarzane na Twoim urządzeniu

lub naciśnij Ctrl+V, aby wkleić ze schowka

Przeglądaj pliki

Wskazówka: możesz także wkleić obraz ze schowka (Ctrl+V).

Twoje pliki nigdy nie opuszczają urządzenia. Całe przetwarzanie odbywa się lokalnie w przeglądarce.

Konwertuj obraz na Base64 data URI, który możesz wkleić bezpośrednio do CSS, HTML lub Markdown — bez osobnego pliku. Kodowanie odbywa się w przeglądarce; obraz nie jest przesyłany.

Typowe zastosowania

Osadź Obraz w CSSOsadź małą ikonę lub tło jako URI danych w arkuszu stylów.
Osadź Obraz w HTMLOsadź logo lub ikonę bezpośrednio w samodzielnym HTML.
Konwertuj SVG Lub Ikonę Na Base64Zamień małą ikonę na URI danych do osadzenia.
Osadź Obraz w MarkdownOsadź mały obraz w pliku Markdown z URI danych.
Uzyskaj Obraz Data URIGeneruj surowy URI danych: możesz go używać wszędzie.

Jak to działa

Data URI osadza obraz bezpośrednio w kodzie jako tekst, dzięki czemu ładuje się bez oddzielnego żądania pliku — przydatne dla małych ikon i samodzielnych dokumentów HTML. Koduje go w przeglądarce.

1
Upuszczasz obraz
Jest czytany lokalnie za pomocą API FileReader — nigdy nie wysyłany.
2
Jest kodowany w Base64
Bajty obrazu stają się URI danych (data:image/...;base64,…) prosto w przeglądarce.
3
Wybierasz fragment
Skopiuj surowy URI danych lub gotowe fragmenty CSS (background-image), HTML (<img>) lub Markdown.
4
Wklej do swojego kodu
Obraz podróżuje teraz wbudowany w CSS/HTML — żaden dodatkowy plik do hostingu.

Obraz jest kodowany całkowicie na urządzeniu. Uwaga: Base64 jest ~33% większy niż oryginał, więc URI danych są najlepsze dla małych obrazów.

Powiązane narzędzia

🖼️

Steganografia obrazu (ukryj tekst w obrazie)

Ukryj tajną wiadomość tekstową w PNG za pomocą steganografii najmniej znaczącego bitu, z opcjonalnym szyfrowaniem hasłem AES-256-GCM. Wyodrębnij ją później tym samym narzędziem. Wszystko działa w Twojej przeglądarce.

WypróbujPliki pozostają lokalnie

🔢

Koder i dekoder Base64

Koduj tekst lub pliki do Base64 lub dekoduj ciągi Base64 z powrotem do zwykłego tekstu. Natychmiastowe, prywatne i bezpłatne.

Wypróbuj

🔗

Koder i dekoder URL

Koduj i dekoduj adresy URL oraz ciągi zapytań. Obsługa encodeURIComponent, decodeURIComponent i analizy ciągów zapytań.