Zastosowanie Konwerter obrazu na Data URI / Base64

Maksymalny rozmiar pliku: 20 MB
Przeciągnij tutaj swoje zdjęcie
lub kliknij, aby przeglądać
Przeglądaj zdjęcie
JPG, PNG, GIF, WebP, BMP, SVG, AVIF
Wskazówka: URI danych zawiera prefiks MIME; w przypadku samego Base64 jest to tylko surowa treść.
Link do narzędzia
Skopiowano do schowka.
Pomóż ulepszyć to narzędzie
2.38K
Czas wykorzystany
1.83K
Łączna liczba użytkowników
5+ lata
Podano
Ostatnia weryfikacja miała miejsce w 5 dni temu. Dane dotyczące wykorzystania są aktualizowane podczas okresowych audytów. (Raportowanie od 21 Feb 2022)
Zgłoś niezgodność

Przeczytaj treść

Dowiedz się, jak działa to narzędzie i kiedy należy z niego korzystać.

Konwertuj wiele plików obrazów do formatu Data Uri i base64 online i za darmo. 

Konwerter obrazu na Data URI / Base64

Konwerter obrazu na data URI / Base64 to przydatne narzędzie, które pozwala szybko i łatwo przekonwertować obraz w ciąg tekstowy, który można wykorzystać na stronie internetowej lub w innej aplikacji online. Tego typu konwerter jest przydatny, gdy musisz osadzić obraz w kodzie, ale nie chcesz korzystać z zewnętrznego serwisu hostingowego.


 

Czym jest system kodowania obrazu do Base64

Czy kiedykolwiek musiałeś przekonwertować obraz na adres URL danych lub ciąg base64?

Obraz do Base64 to system kodowania obrazów, który konwertuje dowolne obrazy w nieczytelny format tekstowy bez utraty danych. Wygenerowane teksty zakodowane w Base64 zawierają znaki plus, slash, równość, litery łacińskie i cyfry.

Kodowanie Base64 to bardzo przydatny sposób przechowywania informacji binarnych w formacie tekstowym. Jego celem jest reprezentowanie danych binarnych (takich jak obrazy, dźwięki, klipy wideo) przy użyciu znaków ASCII (litery alfabetu + cyfry).

Dlaczego Data URI / Base64?

Obraz można przekonwertować na ciąg base64 za pomocą metody zwanej data URI. Pozwala to na utworzenie adresu URL dla obrazu, który można następnie umieścić na stronie internetowej. Proces polega na przekonwertowaniu oryginalnego pliku (plików) w tablicę bajtów (zbiór bajtów). Następnie możemy zakodować tablicę bajtów do ciągu zakodowanego w base64.

Data URI dają kilka korzyści w porównaniu z plikami lokalnymi. Oszczędzają miejsce w pamięci podręcznej klienta (przeglądarki), są mniejsze niż zwykłe obrazy i pozwalają stronom serwować większe obrazy przy mniejszym zużyciu przepustowości. Ciągi base64 są też łatwiejsze do odczytania, ponieważ można je łatwo przeglądać w zwykłych edytorach tekstu.

Za pomocą data URI możesz osadzić obraz bezpośrednio w kodzie HTML, bez konieczności ładowania zewnętrznego pliku. Może to przyspieszyć czas ładowania strony i jest właściwie dość łatwe. W tym artykule pokażemy, jak w kilka sekund przekonwertować obrazy na data URI.

Jak przekonwertować obraz na zakodowany Base64 / Data URI w kilka sekund

Zastanawiałeś się kiedyś, jak sprawić, by obrazy na Twojej stronie ładowały się szybciej? Jednym ze sposobów jest użycie data URI. Po prostu przeciągnij i upuść lub prześlij obraz ręcznie ze swojego urządzenia albo wklejając adres URL obrazu z sieci, możesz przekonwertować wybrany obraz do formatu tekstowego Base64 / Data URI.

Przykład kodowania obrazu do Base64

Zakodowany Base64 wynik dla obrazu to np. data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC....

Zastosowania kodowania obrazu do Base64

Dla źródła obrazu (img src):

< img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC..." />

Dla adresu URL obrazu tła (background-image: url):

background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC...")

Jak używać Data URI / Base64

Aby użyć konwertera Data URI / Base64, po prostu skopiuj wygenerowany kod i wklej go do swojego projektu w miejscu, gdzie chcesz wyświetlić osadzony obraz. Upewnij się, że nie usuniesz żadnych podziałów linii ani spacji wewnątrz kodu, ponieważ są one niezbędne do prawidłowego formatowania wyświetlania. Może być również konieczne dostosowanie niektórych ustawień w zależności od tego, jak planujesz używać przekonwertowanych obrazów – na przykład zmiana ich wymiarów lub dodanie obramowań/odstępów wokół nich.

Komentarze (0)

W celu omówienia kwestii związanych z użytkowaniem, przypadków granicznych oraz dodatkowych wskazówek.
Dodaj komentarz
Twój komentarz zostanie opublikowany po wysłaniu.
Jeszcze nie ma żadnych komentarzy. Napisz pierwszy komentarz!
Daj nam znać!
Zgłoś problem z tym narzędziem

Opisz napotkaną trudność, abyśmy mogli zbadać sprawę i ulepszyć to narzędzie.

Co pomaga najbardziej
Prosimy o podanie danych wejściowych, oczekiwanego wyniku, rzeczywistego wyniku, nazwy przeglądarki/urządzenia oraz, jeśli to pomocne, zrzutu ekranu.
Przycisk „Zrzut ekranu” pozwala wykonać zrzut strony wyświetlanej w przeglądarce, a wygenerowany obraz jest dołączany do tego formularza.
Zrzut ekranu zajmujący całą stronę
Zrzut ekranu wykonany w przeglądarce za pomocą serwisu newisty.
Nie zrobiono jeszcze żadnego zrzutu ekranu.
Narzędzie Raport