19.03.2024English
  • Startseite
  • Produkte
  • Leistungen
  • Support
  • Aktuelles
  • Denapp
  • Kunden
  • Produkte
  • Denapp Bankdata Service
  • Bestellen
  • Beschreibung
  • Preisliste
  • Dokumentation
  • Bankdata Client C# (.NET 2.0) Beispielprojekt
  • Leistungen
  • Softwareentwicklung
  • Web-Lösungen
  • Support
  • Online Bankdaten
  • Bankverbindung in SEPA konvertieren
  • IBAN berechnen
  • SEPA Bankverbindung prüfen
  • IBAN prüfen
  • Deutsche Bankverbindung prüfen
  • Bankdaten suchen
  • Online MEdi
  • Kostenträgerverzeichnis durchsuchen
  • Hilfsmittelverzeichnis durchsuchen
  • Tools
  • Denapp HtmlShrink
  • Denapp CssImageInclude
  • Suche
  • Aktuelles
  • Denapp
  • Denapp Bankdata Service
  • Denapp
  • Kontakt
  • Nutzungsbedingungen
  • Datenschutz
  • AGB
  • Impressum
  • Denapp CssImageInclude

    Allgemeines

    Beim Verbessern der Performance von Websites gibt es viele Ansätze. Eine Möglichkeit ist die Reduzierung der zur Darstellung einer Seite benötigten HTTP-Requests.
    Beim Laden einer Seite müssen HTTP-Requests für jede einzelne Ressource abgesetzt werden. Das heißt, jede zusätzlich zu ladende Datei (Bilder, CSS, JavaScript), erfordert eine weitere Anfrage an den Server. Das Problem kann mittels Output Caching, dem Zwischenspeichern und damit schnellerem Ausliefern der Dateien, etwas entschärft werden. Die Anzahl zusätzlicher Serveranfragen läßt sich damit allerdings nicht reduzieren.

    Dateien bündeln

    Um die Anzahl der Serveranfragen zu reduzieren gibt es nur eine Möglichkeit.
    In einer Anfrage müssen mehrere Anfragen gebündelt werden.
    Das bedeutet, dass in einer ausgelieferten Datei mehrere Dateien enthalten sein müssen. Eine dafür angewandte Technik sind sogenannte CSS-Sprites. Die Idee hierbei ist es, in einer Bilddatei mehrere Bilder gleichen Formats an definierten Pixelpositionen aneinanderzureihen. Aus dieser Bilddatei wird dann im Browser der benötigte Bildausschnitt angezeigt. Leider ist der Umgang mit Sprites recht kompliziert und aufwendig.

    DATA-URI

    Eine ähnliche Möglichkeit bietet DATA-URI. DATA-URI steht für das Einfügen der mit einem URI verknüpften Resource an Stelle des URI. Einfacher ausgedrückt handelt es sich um das Einfügen der Daten von z.B. einer Bilddatei in eine HTML-, JavaScript- oder CSS-Datei.

    Damit die Byte-Daten eingefügt werden können, müssen diese Base64 codiert werden. Als Konsequenz daraus werden die Bilddaten um ein Drittel größer als die Ausgangsdatei. Diesen Nachteil kann man durch Komprimierung der "Trägerdatei" wieder wettmachen. Damit die resultierende Datei nicht mit jeder Anfrage übertragen werden muss und die Vorteile damit hinfällig würden, sollte sie auf dem Client zwischengespeichert werden. Hier bieten CSS-Dateien sehr gute Voraussetzungen und auch das Einfügen der Bilddateien gestaltet sich recht einfach.

    Zu beachten ist jedoch, dass die zulässige Größe der einzufügenden Resource durch den Webbrowser eingeschränkt ist und DATA-URI nicht von jedem Browser unterstützt wird. Bis auf IE 7 und ältere Versionen, wird DATA-URI von nahezu allen aktuellen Browsern unterstützt. Für die maximale Größe der DATA-URI's gibt es keinen allgemein gültigen Wert. Die laut RFC geforderte Unterstützung für die Größe von 1 KB wird von den Browsern, zum Teil weit, überboten. Als Maximalwert sollten 4 KB angenommen werden. Dieser Richtwert wird, soweit bekannt, von jedem Browser akzeptiert. Bei einer Vergrößerung der Bilddaten um ein Drittel (durch die Base64-Codierung), ist ein Maximalwert von 3 KB für die Quelldateien anzusetzen.

    Verwendung

    Denapp CssImageInclude übernimmt das Zusammenführen von CSS-Dateien und den darin referenzierten Bilddateien. Es wird eine zusätzliche CSS-Datei erstellt (dem Originalnamen wird ein definiertes Namensattribut angehängt) und die Quelldatei nicht überschrieben. Wenn die Datei vom Client abgerufen wird, kann je nach Browserunterstützung die entsprechende Version übertragen werden. Für das Einfügen der Bilddaten ist es nötig den MIME-Typ anzugeben. Denapp CssImageInclude erkennt den MIME-Typ anhand folgender, unterstützter Dateierweiterungen:

    • .bmp
    • .gif
    • .ico
    • .jpe, .jpeg, .jpg
    • .png
    • .tif, .tiff
    Nachfolgend sehen Sie einen beispielhaften CSS-Ausschnitt:

    CSS Ausgangsdaten

    .imageBox
    {
      width: 100px;
      height: 100px;
      background-image: url(images/image.png);
    }

    CSS Inline-Image Daten

    .imageBox
    {
      width: 100px;
      height: 100px;
      background-image: url(data:image/png;base64,
      iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9h
      AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5
      ccllPAAAAFRJREFUeNpi/P//PwMlgHHoG8AAMgAbdnV1
      TSBGHRMeg+ejG4INMBFwHUFDmIjwIl5DmIgMJ3tKDFiw
      Z8+eRHINwKsZb/S4uLjMJ0Yd42heYAAIMAAfs3pWzwM4
      cgAAAABJRU5ErkJggg==);
    }

    Beispiele für die Kommandozeile

    Das folgende Beispiel fügt die in der Datei 'Theme.css' im Verzeichnis 'C:\Published' referenzierten Bilddateien bis zu einer Größe von 3 KB, in die neu erstellte Datei 'Theme.img.css' ein:

    cssimageinclude.exe /target:"C:\Published\Theme.css"
    /attribute:"img" /maxsize:3072

    Das folgende Beispiel fügt die in allen CSS-Dateien, im Verzeichnis 'C:\Published' und untergeordneten Verzeichnissen, referenzierten Bilddateien bis zu einer Größe von 3 KB in entsprechende Dateien mit dem Namensattribut "img" ein:

    cssimageinclude.exe /target:"C:\Published"
    /attribute:"img" /maxsize:3072

    (3 KB Maximalgröße und Namensattribut "img" sind Standardwerte und können weggelassen werden)

    Download Denapp CssImageInclude.

    Fazit

    DATA-URI ist eine gute Lösung, wenn eine Website viele kleine Bilddateien enthält. Der gewonnene Leistungszuwachs bedeutet keine Revolution, ist aber einer von vielen Bausteinen, für eine verbesserte Leistungsfähigkeit und der geringe Aufwand rechtfertigt den Einsatz allemal.