Softonic

Koder obrazów Base64

Krok 1 / 3 Upuść tutaj obraz

Przetwarzanie...

Osadzenie małego obrazu jako Base64 data URI może zaoszczędzić jedno żądanie HTTP i przenosi zasób razem z HTML lub CSS. Koder przyjmuje obsługiwane pliki PNG, JPEG, GIF, WebP i SVG do 5 MiB. Po zdekodowaniu żaden bok obrazu rastrowego nie może przekraczać 16 384 pikseli, a cały obraz nie może mieć więcej niż 33 554 432 piksele. Koder sprawdza dekodowanie rastrów w przeglądarce oraz wyłącznie strukturę UTF-8 plików SVG, po czym tworzy Base64, CSS, HTML lub JSON. Sprawdź zgodność w systemie docelowym, a niezaufany SVG traktuj jako aktywną treść również po zakodowaniu.

Jak zakodować obraz

  1. 1

    Upuść obraz

    Wybierz plik PNG, JPG, GIF, WebP lub SVG o rozmiarze do 5 MiB. Żaden bok obrazu rastrowego nie może przekraczać 16 384 pikseli, a cały obraz nie może mieć więcej niż 33 554 432 piksele; zakodowany tekst musi pozostać poniżej 7 MiB.

  2. 2

    Kodowanie działa w przeglądarce

    Bajty obrazu są odczytywane, kodowane Base64 i poprzedzane poprawnym nagłówkiem URI `data:`.

  3. 3

    Wybierz format wyjścia

    Surowy Base64, reguła CSS `background-image`, tag HTML `<img>` albo string bezpieczny dla JSON.

  4. 4

    Skopiuj wynik

    Wklej dopiero po sprawdzeniu obsługi data URI, limitów rozmiaru i bezpieczeństwa treści w systemie docelowym.

Kiedy warto osadzać obrazy inline

Dobrzy kandydaci do inline:

  • Ikony poniżej 2 KB, oszczędza żądanie HTTP przy pomijalnym narzucie.
  • Szablony e-mail - Obsługa identyfikatorów URI danych różni się między klientami poczty. Przetestuj docelowe programy i w razie potrzeby użyj obrazów CID lub hostowanych.
  • Placeholdery hero (LQIP), niskiej jakości rozmyta wersja inline, pełny obraz ładowany później.
  • SVG użyte raz, data URI z poprawnym kodowaniem procentowym może być krótszy niż Base64. Znaki zastrzeżone muszą być zakodowane, a niezaufany SVG nadal jest aktywną treścią.

Źli kandydaci:

  • Duże obrazy, powiększenie o 33% dla obrazu 500 KB to 166 KB odpadu.
  • Obrazy używane na wielu stronach, inline wyłącza pamięć podręczną przeglądarki między trasami.
  • Krytyczny CSS, osadzanie ciężkich obrazów rozdmuchuje ścieżkę krytyczną renderowania.

Oczekiwane rozmiary

Rozmiar obrazu Rozmiar ciągu Base64
500 bajtów ~680 znaków
2 KB ~2.7 KB
20 KB ~27 KB
200 KB ~270 KB

Format data URI

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
  • schemat data:
  • typ MIME
  • wskaźnik ;base64,
  • zakodowane bajty

SVG to szczególny przypadek

SVG jest tekstem, lecz porównanie rozmiaru z Base64 zależy od zawartości i liczby znaków wymagających kodowania procentowego. W wariancie bez Base64 użyj data:image/svg+xml, i poprawnie zakoduj znaki zastrzeżone. Spotykany parametr ;utf8 nie jest standardowy i nie zastępuje kodowania procentowego. Narzędzie nie wyświetla podglądu SVG i sprawdza tylko jego strukturę UTF-8, więc niezaufany SVG pozostaje aktywną treścią, a Base64 go nie oczyszcza.

Najczęściej zadawane pytania

Base64 zwiększa rozmiar danych binarnych o około jedną trzecią przed uwzględnieniem otoczki data URI i kompresji przesyłania. Nie ma stałego progu rozmiaru, który zawsze wygrywa. Porównaj liczbę żądań, pamięć podręczną, kompresję i ponowne użycie, a następnie zmierz działanie swojej witryny.

Data URI nie zapewnia automatycznej korzyści SEO. Wyszukiwarki analizują otaczający HTML, natomiast tło CSS nie ma tekstowej alternatywy takiej jak atrybut alt. Dla obrazów przekazujących znaczenie użyj <img> z odpowiednim tekstem alternatywnym, a wydajność oceń osobno.

Nie. Koder czyta plik lokalnie przez FileReader API i tworzy ciąg Base64 w przeglądarce. Nic nie opuszcza twojej maszyny.

Tak, użyj narzędzia Base64 to Image, aby zamienić URI data:image/... z powrotem w plik do pobrania.

Powiązane narzędzia

Zmiana rozmiaru obrazu

Zmieniaj rozmiar obrazów do dokładnych wymiarów w pikselach lub procentach, zachowując proporcje. Dobre do pracy partiami, bez przesyłania plików.

Narzędzie do zmiany rozmiaru obrazów do social media

Zmień rozmiar jednego obrazu do wbudowanych presetów dla Instagramu, Facebooka, X, LinkedIn, YouTube, Pinteresta i TikToka. Sprawdź każdy PNG i pobierz potrzebne formaty.

Masowa zmiana rozmiaru obrazów

Przeciągnij kilka obrazów, dopasuj je lub rozciągnij do rozmiaru docelowego i wyeksportuj JPG, PNG albo WebP w jednym ZIP-ie. Przetwarzanie zostaje w przeglądarce.

Wektoryzator PNG do SVG

Przekształcaj obrazy rastrowe PNG w ścieżki SVG bezpośrednio w przeglądarce. Najlepsze do logo, ikon i rysunków liniowych. Steruj progiem, liczbą kolorów i wygładzaniem.

Komprimuj plik GIF

Zmniejsz animowany plik GIF w przeglądarce: obniż wymiary, zachowaj mniej klatek i dopasuj jakość kodowania. Zobacz podgląd pętli przed pobraniem.

Kompresor obrazów

Kompresuj obrazy JPG, PNG i WebP, aby zmniejszyć rozmiar pliku przy zachowaniu jakości wizualnej. Wszystko działa w przeglądarce, bez przesyłania plików.