Osadzanie obrazu powoduje umieszczenie jego bajtów w HTML, CSS lub innym dokumencie. Może sprawić, że mały artefakt będzie samowystarczalny, ale także połączy obraz z dostarczaniem i buforowaniem dokumentu. Podejmij decyzję na podstawie całego przepływu pracy, zamiast zakładać, że mniejsza liczba adresów URL zawsze oznacza szybszą stronę.
Zbuduj odpowiednie opakowanie
Obraz PNG Dane URI zaczynają się od data:image/png;base64,, po którym następuje Base64 reprezentacja oryginalnego pliku. Potrzeby JPEG image/jpeg; WebP potrzeb image/webp. Zmiana nazwy typu MIME nie powoduje konwersji bajtów. Jeśli odbiorca wymaga JPEG, ponownie zakoduj obraz przed zbudowaniem jego danych URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">Powyższy symbol zastępczy nie jest obrazem roboczym; zastąp go pełnym wyjściem kodera. Jeśli dane wyjściowe zawierają już data: prefiks, nie dodawaj kolejnego. Zachowaj równowagę w cudzysłowie i unikaj łamania wierszy wprowadzanego przez edytory tekstu sformatowanego.
Oblicz rzeczywisty rozmiar
Zakodowana część wymaga czterech znaków na każde trzy bajty wejściowe, zaokrąglonych do pełnych grup. Prefiks Dane URI dodaje nieco więcej. W przypadku pliku o długości 30 000 bajtów sam ładunek wynosi 40 000 znaków. Kompresja HTML może zmienić rozmiar przesyłanego obrazu, ale przeglądarka nadal musi przeanalizować dokument i zdekodować obraz. Zmierz rzeczywistą stronę, a nie tylko plik źródłowy.
Oddzielnie wyświetlany obraz można przechowywać w pamięci podręcznej i ponownie wykorzystywać niezależnie na stronach. Osadzony obraz jest powiązany z każdym dokumentem, który go zawiera. Dlatego duże, powtarzające się ilustracje nie nadają się do automatycznego wstawiania. Małe, jednorazowe ikony w samodzielnym raporcie mogą być rozsądnym kompromisem.
Sprawdź miejsce docelowe
Polityka bezpieczeństwa treści może ograniczać data: obrazy. Klienci poczty e-mail mogą usuwać lub odrzucać osadzone treści. Plik, który wyświetli się w Twojej przeglądarce, nie jest dowodem na to, że aplikacja odbiorcy go wyświetli. Przetestuj dokładnie ten klient eksportu, klienta poczty e-mail lub system końcowy, który chcesz obsługiwać.
W przypadku tymczasowych lokalnych podglądów obiekt BLOB URL często pozwala uniknąć tworzenia dużego ciągu Base64. Unieważnij URL, gdy jego widok zostanie usunięty. W przypadku eksportowanego samodzielnego pliku HTML odpowiednie mogą być dane URI. W obu przypadkach zachowaj tekst alternatywny i wymiary. Zagadnienia dotyczące składni i przeglądarki są omówione w MDN: adresy URL danych.