Konwerter obrazu na Base64
Zamień obraz na tekst Base64, który wkleisz do kodu.
Tekst Base64 jest o około 37% większy niż oryginalny plik. To dobry wybór dla małych ikon, nie dla pełnych zdjęć.
Działa w przeglądarce. Twoje pliki nigdy nie opuszczają urządzenia.
- Wynik jako URL danych, CSS i HTML
- Działa z każdym typem obrazu
- Nic nie jest wysyłane
Jak przekonwertować obraz na Base64
- Przeciągnij obraz tutaj albo dotknij Wybierz pliki.
- Skopiuj URL danych, czysty Base64 albo gotowy fragment CSS lub HTML.
- Wklej go do swojego kodu.
Jak działa kodowanie
Base64 zamienia każde 3 bajty obrazu na 4 znaki tekstu, używając 64 znaków od A do Z, od a do z, od 0 do 9, plus znaków plus i ukośnik, standardowego alfabetu z RFC 4648.
URL danych to ten tekst z krótkim przedrostkiem, na przykład data:image/png;base64, dzięki czemu przeglądarka albo aplikacja wie, z czym ma do czynienia, bez osobnego pliku.
| Oryginalny plik | Tekst Base64 (około 37% większy) |
|---|---|
| Ikona 5 KB | Około 6,9 KB |
| Logo 20 KB | Około 27 KB |
| Zdjęcie 100 KB | Około 137 KB |
Ten narzut to powód, dla którego URL danych sprawdza się najlepiej przy małych grafikach, a nie pełnych zdjęciach.
Gdzie używa się URL danych
- W CSS, wewnątrz background-image, dzięki czemu mała ikona wczytuje się razem z arkuszem stylów zamiast osobnym zapytaniem.
- W HTML, wewnątrz atrybutu img src albo w osadzonym kodzie SVG.
- W odpowiedziach API JSON i polach baz danych, które przechowują obraz jako tekst.
- W HTML maili, bo niektóre programy pocztowe blokują linkowane obrazy, ale zezwalają na dane osadzone.
Kiedy zostać przy zwykłym pliku
URL danych nie jest buforowany osobno od strony, która go zawiera, więc zdjęcie użyte na dziesięciu stronach pobiera się dziesięć razy zamiast raz. Dla wszystkiego większego niż mała ikona, zwykły plik obrazu z buforowaniem przeglądarki wczytuje się szybciej.
Obraz na Base64: najczęstsze pytania
Czym jest URL danych Base64?
To bajty obrazu zapisane jako tekst, dzięki czemu możesz wkleić obraz prosto do HTML, CSS albo JSON bez osobnego pliku.
Czy Base64 powiększa plik?
Tak, o około 37 procent, bo kodowanie zamienia każde 3 bajty obrazu na 4 znaki tekstu.
Kiedy używać URL danych zamiast pliku?
Do małych ikon i prostych grafik, gdy oszczędność jednego zapytania sieciowego liczy się bardziej niż rozmiar strony. Do zdjęć zostaw zwykły plik obrazu.
Czy mój obraz jest gdzieś wysyłany?
Nie. Kodowanie odbywa się w Twojej przeglądarce, więc obraz nigdy nie opuszcza Twojego urządzenia.
Czy konwersja na Base64 zmienia jakość obrazu?
Nie. Dane pikseli zostają nietknięte, tylko zapisane jako tekst, więc dekodowanie z powrotem daje dokładnie te same bajty.
Czy jest maksymalny rozmiar dla URL danych?
Przeglądarki nie narzucają sztywnego limitu, ale długi URL danych nie buforuje się osobno i spowalnia wczytywanie strony, dlatego zostaw go małym ikonom i grafikom.
Czy każda przeglądarka obsługuje URL danych?
Tak. URL danych działają w każdej większej przeglądarce od czasu Internet Explorera 8, łącznie ze wszystkimi aktualnymi przeglądarkami mobilnymi.
Czy mogę użyć tego do favicona?
Mały favicon można osadzić jako URL danych w nagłówku HTML, ale zwykły plik favicon.ico plus rozmiary PNG wciąż jest częstszym rozwiązaniem.