Warum backen einige Webseiten Bilder in ihren HTML-Code?

Question

Einige Webseiten backen Bilddaten in den HTML- Code , wie diese, die sie in einen JavaScript-Code eingebrannt haben, sodass die Größe des HTML-Dokuments selbst mehrere MB erreicht. Warum entscheiden sich einige Webentwickler dafür? Was sind die Vorteile?

Answer 1

Es gibt eine ähnliche Frage zum Stapelüberlauf .

Was Sie sehen, wird als data URI schemeein Base64-codiertes Bild bezeichnet, aber einige nennen es einfach. Der Hauptvorteil kann die Seitengeschwindigkeit sein, es gibt jedoch verschiedene Gründe (siehe unten), wann dies angemessener ist.

Laut Wikipedia :

Vorteile :

• HTTP-Anforderungs- und Header-Verkehr ist für eingebettete Daten nicht erforderlich, sodass Daten-URIs weniger Bandbreite verbrauchen, wenn der Aufwand für die Codierung des Inline-Inhalts als Daten-URI geringer ist als der HTTP-Aufwand. Beispielsweise würde die erforderliche Base64-Codierung für ein Bild mit einer Länge von 600 Byte 800 Byte betragen. Wenn also eine HTTP-Anforderung mehr als 200 Byte Overhead erfordert, wäre der Daten-URI effizienter.

• Bei der Übertragung vieler kleiner Dateien (jeweils weniger als einige Kilobyte) kann dies schneller sein. TCP-Übertragungen beginnen in der Regel langsam. Wenn für jede Datei eine neue TCP-Verbindung erforderlich ist, wird die Übertragungsgeschwindigkeit eher durch die Umlaufzeit als durch die verfügbare Bandbreite begrenzt. Die Verwendung von HTTP Keep-Alive verbessert die Situation, kann den Engpass jedoch möglicherweise nicht vollständig beseitigen.

• Beim Surfen auf einer sicheren HTTPS-Website verlangen Webbrowser normalerweise, dass alle Elemente einer Webseite über sichere Verbindungen heruntergeladen werden. Andernfalls wird der Benutzer aufgrund einer Mischung aus sicheren und unsicheren Elementen über eine verringerte Sicherheit informiert. Auf schlecht konfigurierten Servern haben HTTPS-Anforderungen einen erheblichen Overhead gegenüber allgemeinen HTTP-Anforderungen. Daher kann das Einbetten von Daten in Daten-URIs in diesem Fall die Geschwindigkeit verbessern.

• Webbrowser sind normalerweise so konfiguriert, dass nur eine bestimmte Anzahl (häufig zwei) gleichzeitiger HTTP-Verbindungen zu einer Domäne hergestellt werden, sodass durch Inline-
  Daten eine Download-Verbindung für andere Inhalte freigegeben wird .

• Umgebungen mit eingeschränktem oder eingeschränktem Zugriff auf externe Ressourcen können Inhalte einbetten, wenn es nicht zulässig oder unpraktisch ist, extern darauf zu verweisen. Beispielsweise kann ein erweitertes HTML-Bearbeitungsfeld ein eingefügtes oder eingefügtes Bild akzeptieren und in einen Daten-URI konvertieren, um die Komplexität externer Ressourcen vor dem Benutzer zu verbergen. Alternativ kann ein Browser bildbasierte Daten aus der Zwischenablage in einen Daten-URI konvertieren (codieren) und in ein HTML-Bearbeitungsfeld einfügen. Mozilla Firefox 4 unterstützt diese Funktionalität.

• Es ist möglich, eine Multimedia-Seite als einzelne Datei zu verwalten. E-Mail-Nachrichtenvorlagen können Bilder (für Hintergründe oder Signaturen) enthalten,
  ohne dass das Bild als "Anhang" erscheint.

Nachteile :

• Daten-URIs werden nicht separat von ihren enthaltenen Dokumenten (z. B. CSS- oder HTML-Dateien) zwischengespeichert, sodass Daten jedes Mal heruntergeladen werden, wenn die
  enthaltenen Dokumente erneut heruntergeladen werden. Der Inhalt muss bei jeder Änderung neu codiert und eingebettet werden.

• Internet Explorer bis Version 7 (ca. 15% des Marktes ab Januar 2011) wird nicht unterstützt. Dies kann jedoch überwunden werden, indem browserspezifische Inhalte bereitgestellt werden. Internet Explorer 8 begrenzt Daten-URIs auf eine maximale Länge von 32 KB.

• Daten sind als einfacher Stream enthalten, und viele Verarbeitungsumgebungen (z. B. Webbrowser) unterstützen möglicherweise nicht die Verwendung von Containern (z. B. mehrteilig / alternativ oder Nachricht / rfc822), um eine größere Komplexität wie Metadaten, Datenkomprimierung oder Inhaltsverhandlung bereitzustellen.

• Base64-codierte Daten-URIs sind 1/3 größer als ihr binäres Äquivalent. (Dieser Overhead wird jedoch auf 2-3% reduziert, wenn der HTTP-
  Server die Antwort mit gzip komprimiert.) Daten-URIs erschweren es
  Sicherheitssoftware, Inhalte zu filtern.

Nach anderen Quellen

• Daten-URLs sind in mobilen Browsern erheblich langsamer.

Dank an Shaz für seine Antwort hier