Was ist die optimale Größe für ein minimalistisches transparentes Daten-URI-Bild?

Minimalistischer Daten-URI für transparente Bilder

Stellen Sie sich vor, ein 1x1 transparentes Bild neben einem Hintergrundbild in CSS zu verwenden. Dies ermöglicht die Verwendung von Sprites und bietet gleichzeitig alternativen Text für bestimmte Symbole.

Um die Leistung zu optimieren, sollten Sie die Verwendung von Daten-URIs für Bilder in Betracht ziehen. Was ist jedoch die optimale Größe, um mit diesem Ansatz ein transparentes Bild zu erstellen?

Die prägnante Antwort

Durch umfangreiche Experimente mit transparenten GIFs zeigten bestimmte Bilder Instabilität und verursachten Probleme Fehler in CSS. Beispielsweise kann der Versuch, einem transparenten GIF ein Hintergrundbild in möglichst kleinen Abmessungen hinzuzufügen, dessen Funktionalität beeinträchtigen. Seltsamerweise können bestimmte GIFs, wie das folgende, CSS-Hintergründe in einigen Browsern blockieren.

Kürzer, aber instabil (74 Bytes)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Stabil, aber etwas länger (78 Bytes)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Eine zusätzliche Überlegung ist das Weglassen von „image/gif“ als häufig in Kommentaren vorkommender Vorschlag zu unterlassen. Dieses Versäumnis kann zu Fehlfunktionen in mehreren Browsern führen.

Das obige ist der detaillierte Inhalt vonWas ist die optimale Größe für ein minimalistisches transparentes Daten-URI-Bild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!