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

Generator kolorów triadycznych

Wybierz kolor bazowy i otrzymaj jego dwóch triadycznych partnerów, obróconych dokładnie o 120° i 240° na kole barw, z kodami HEX do skopiowania jednym kliknięciem.

Kreator mozaiki LEGO

Zamień zdjęcie w plan mozaiki 16 × 16, 32 × 32, 48 × 48 lub 64 × 64. Zobacz przybliżone kolory, policz płytki 1×1 i pobierz ponumerowaną instrukcję układania.

Generator papieru nutowego

Utwórz papier nutowy do druku: puste pięciolinie, klucz wiolinowy lub basowy, system fortepianowy albo tabulatura gitarowa. Wybierz liczbę, odstęp, A4 lub Letter i marginesy, pobierz PDF lub SVG.

Zmień rozmiar PNG

Zmieniaj rozmiar obrazów PNG bezpośrednio w przeglądarce. Ustaw nową szerokość i wysokość w pikselach, zablokuj proporcje i zachowaj przezroczyste tło. Nic nie jest wysyłane.

Generator napisów graffiti

Twórz napisy graffiti w stylu tag, bubble, block, stencil, neon i wild. Dobierz kolory i wyeksportuj PNG lub SVG bezpośrednio w przeglądarce.

Czytnik kodów kreskowych

Odczytaj z obrazu wartość i rodzaj kodu EAN-13, UPC-A lub Code 128. W przypadku EAN i UPC sprawdzisz także cyfrę kontrolną.

Narzędzie jest dostępne w innych językach