Verschiedene Bildformate miteinander kombinieren

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Es sollen zwei verschiedene Bildformate miteinander kombiniert werden, wie in folgender Abbildung, wo ein GIF- und ein JPEG-Bild zu einer gemeinsamen grafischen Darstellung zusammengestellt wurden.

Zwei miteinander kombinierte Bildformate

Abbildung: Zwei miteinander kombinierte Bildformate.

Lösung

Umgeben Sie eines der Bilder mit einem Blockelement, wie z.B. div oder h2:

<h2><img src="headline_text.gif" alt="Überschrift im GIF-Format" /></h2>

Mit Hilfe eines Bildbearbeitungsprogramms trennen Sie das Bild in zwei verschiedene Dateiformate (siehe folgende Abbildung).

2 Bilder, die auf Website wieder kombiniert werden sollen

Abbildung: Zwei Bilder, die auf der Webseite wieder kombiniert werden sollen.

Geben Sie einem der Bilder den Namen, der auch im src-Attribut des img-Elements verwendet werden soll. Das andere Bild wird als Hintergrundbild für das Blockelement benutzt, wodurch beide Bilder visuell zu einer Darstellung kombiniert werden.

h2 {
 background-image: url(headline_bkgd.jpg);
 background-repeat: none;
 width: 587px;
 height: 113px;
}

Diskussion

Die beiden vorherrschenden Bildformate im Web sind GIF und JPEG. Beide komprimieren Bilder auf unterschiedliche Weise. Bilder, die große einfarbige Flächen aufweisen, lassen sich besser im GIF-Format komprimieren, während JPEG besser für Fotos und Bilder mit feinen Farbabstufungen geeignet ist.

Bei den in den vorherigen beiden Abbildungen gezeigten kombinierten Bildern ist die zusammengerechnete Dateigröße der Einzeldateien immer noch kleiner, als hätte man beide Bilder in einer gemeinsamen Datei gespeichert. Der Grund hierfür ist, dass verschiedene Teile des Bildes besser für unterschiedliche Kompressionsverfahren geeignet sind. Hätten Sie die Datei im GIF-Format gespeichert, hätte der fotografische Anteil des Bildes sich negativ auf die Dateigröße ausgewirkt. Bei der Speicherung im JPEG-Format hätten die gleichfarbigen Bereiche die Datei vergrößert. Indem das Bild in zwei Formate mit unterschiedlichen Kompressionsverfahren aufgeteilt wird, können Sie die Gesamtgröße verringern.

In dieser Lösung setzen wir CSS-Eigenschaften ein, die sich auf den Hintergrund von Elementen beziehen. Der gleiche Effekt lässt sich aber auch durch die Positionierung von Blockelementen erreichen, die die Bilder enthalten. Ein Beispiel hierfür sehen Sie in der folgenden Abbildung, wo die Zeichnung von dem Boot mit dem Bild der zwei Kinder kombiniert wurde.

Aufwendige Kombination zweier unterschiedlicher Bildformate

Abbildung: Aufwendige Kombination zweier unterschiedlicher Bildformate.

Für diese Methode müssen Sie die Bilder mit Blockelementen (hier: div) umgeben, wie im folgenden HTML-Code:

<head>
  <title>CSS Cookbook</title>
</head>
<body>
  <img src="kids.jpg" width="360" height="304" alt="kids playing" />
  <div id="boat"><img src="boat.gif" width="207" height="123" alt="boat" /></div>
  <div id="water"><img src="landscape.gif" width="315" height="323" alt="landscape" /></div>
</body>

Im Stylesheet erhält die Eigenschaft position für die beiden Elemente den Wert absolute. Hierdurch werden die Elemente vom normalen Fluss der Webseite ausgenommen. Stattdessen steuern Sie die Positionierung mit den Eigenschaften left und top. Anhand der Eigenschaft z-index können Sie festlegen, welches Bild "über" dem anderen angezeigt werden soll:

#boat {
 position: absolute;
 width: 207px;
 height: 123px;
 z-index: 2;
 left: 264px;
 top: 0;
}
#water {
 position: absolute;
 width: 315px;
 height: 323px;
 z-index: 1;
 left: 359px;
 top: -20px;
}

Die Werte für left und top beziehen sich jeweils auf das nächste Vorfahrenelement, das für position einen anderen Wert hat als static, oder, wie hier, auf den ursprünglichen umgebenden Block.

Außerdem wurde der Außenabstand (margin) des body-Elements mit dem Wert 0 versehen, wodurch der Ausgangspunkt in der linken oberen Ecke des Browserfensters liegt.

body {
 margin: 0;
}

Auch wenn diese Methode prinzipiell funktioniert, kann es bei der exakten Positionierung zu Problemen kommen, wenn das Webdokument später verändert wird. Fügen Sie beispielsweise im HTML-Code oberhalb der Bilder eine einfache Überschrift ein, so kann dies zu der in der nächsten Abbildung gezeigten Anomalie führen:

<h2>Kids Welcome New Boat!</h2>
<img src="kids.jpg" width="360" height="304" alt="kids playing" />
<div id="boat"><img src="boat.gif" width="207" height="123" alt="boat" /></div>
<div id="water"><img src="landscape.gif" width="315" height="323" alt="landscape" /></div>

Durch Hinzufügen einer Überschrift kommt es zu Problemen bei Darstellung

Abbildung: Durch das Hinzufügen einer Überschrift kommt es zu Problemen bei der Darstellung.

Da das Bild der Kinder nicht mit dem Wert absolute positioniert wurde, wird es im Textfluss nach unten geschoben. Das andere Bild bleibt dagegen an seiner Position, da es im ursprünglich umgebenden Block verankert wurde.

Durch die Verwendung der Eigenschaft background-position in Verbindung mit Blockelementen, können Sie die Darstellung mit einem eigenen "Behälter" umgeben. Wird nun Inhalt hinzugefügt oder entfernt, bleibt die Präsentation intakt, wie in der nächsten Abbildung und im folgenden Code zu sehen ist.

<head>
  <title>CSS Cookbook</title>
  <style type="text/css">
    body {
     margin: 5% 10% 0 10%;
    }
    #content {
     background-image: url(landscape.gif);
     background-repeat: no-repeat;
     background-position: bottom right;
     height: 400px;
     width: 674px;
    }
    h2 {
     margin: 0;
     padding: 0;
     background-image: url(kids.jpg);
     background-repeat: no-repeat;
     background-position: bottom left;
     height: 400px;
     width: 600px;
    }
    #boat {
     background-image: url(boat.gif);
     background-repeat: no-repeat;
     display: block;
     width: 207px;
     height: 123px;
     margin-left: 250px;
     margin-top: 75px;
    }
  </style>
</head>
<body>
  <div id="content">
    <h2>Kids Welcome New Boat! <span id="boat"></span></h2>
  </div>
</body>

Anderer Ansatz, die Bilder zu kombinieren

Abbildung: Ein anderer Ansatz, die Bilder zu kombinieren.

Siehe auch

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln