CSS kann heute deutlich mehr als früher. Das sieht man auch an den erweiterten Möglichkeiten für die Bildbearbeitung. Möchten Sie die Größe von Bildern ändern, die Schärfe verbessern, Farben und Kontraste präzise anpassen oder Bilder zuschneiden und in besondere Formen bringen? All das ist mittlerweile mit CSS möglich.
Für die Bildbearbeitung stehen eine Reihe von CSS-Eigenschaften zur Auswahl:
- Die Ausmaße von Bildern legen Sie mit den CSS-Eigenschaften
widthundheightfest. - Um Bilder auf ein bestimmtes Seitenverhältnis zu bringen, bietet sich
aspect-ratioan. - Wenn ein Bild ein Element ausfüllen soll, brauchen Sie
object-fit. - Die Form von Bildern steuern Sie mit
border-radiusoderclip-path. - Durch die Verwendung der Eigenschaft
filterkönnen Sie beispielsweise Schwarzweiß-Bilder erzeugen, Bilder unschärfer gestalten oder Kontraste erhöhen. - Die Anwendung von
mix-blend-modeermöglicht das Überblenden mehrerer Bilder oder die Kombination von Bildern mit Hintergrundfarben.
Auch wenn CSS viele Möglichkeiten für die Bildbearbeitung bietet, ist die Funktionalität natürlich nicht vergleichbar mit einem klassischen Bildbearbeitungsprogramm. Warum sollte man also überhaupt Bilder mit CSS bearbeiten?
Das ist in mehreren Fällen sinnvoll:
- Angenommen, Sie haben ein Bild, das mit verschiedenen Effekten/Variationen gezeigt wird. In diesem Fall ist es besser, nur dieses eine Bild zu verwenden und die Effekte über CSS anzuwenden. Dadurch wird nur eine einzige HTTP-Anfrage für das Bild benötigt, anstatt mehrere. Die CSS-Bildeffekte sind besonders dann praktisch, wenn eine Änderung beim Hovern oder Ähnlichem erfolgen soll.
- Die über CSS angewendeten Effekte sind äußerst flexibel und können auf beliebige Bilder angewendet werden. Sie können so auch funktionieren, wenn das Bild ausgetauscht wird, beispielsweise in einem Content Management System.
- CSS-Bildeffekte lassen sich animieren. Wenn es verschiedene Zustände eines Bildes gibt, können die Übergänge dazwischen animiert ablaufen und zwar über die CSS-Eigenschaften
animationodertransition. - Sie können Bildeffekte auf responsive Bilder anwenden. Das heißt, Bilder und Effekte werden dynamisch an die Umgebung angepasst. Wenn Sie eine besondere Form über CSS erzeugen, so kann je nach verfügbarem Platz unterschiedlich viel vom Bildinhalt zu sehen sein.
Eine solide Grundlage
Dieser Beitrag konzentriert sich auf die Bearbeitung von HTML-Bildern, die ein Bestandteil des Inhalts sind. Der benötigte Code für ein solches HTML-Bild sieht beispielsweise folgendermaßen aus:
<img src="bild.webp" width="200" height="300" alt="Bildbeschreibung" loading="lazy">
Das HTML-Element img ist für Bilder vorgesehen. Der Pfad zum Bild wird im src-Attribut angegeben. Die Attribute width und height bestimmen die Größe des Bildes, was entscheidend ist, um Layoutverschiebungen zu verhindern.
Vielleicht ist Ihnen schon einmal Folgendes passiert: Sie öffnen eine Webseite auf Ihrem Smartphone, klicken auf einen Link, und während des Klickens werden Bilder nachgeladen, wodurch sich alle Inhalte verschieben. Ihr Klick landet damit an einer völlig anderen Stelle als beabsichtigt. Dieses Problem wird als Cumulative Layout Shift bezeichnet.
Die Lösung ist einfach: Geben Sie immer die height und width für Bilder an. Selbst wenn die Bilder flexible Größen haben (wie im Responsive Webdesign üblich), sind die Maße wichtig, damit der Browser den zu reservierenden Platz berechnen kann. Da das Verhältnis zwischen Breite und Höhe dabei entscheidend ist, können Sie statt width und height auch die CSS Eigenschaft aspect-ratio nutzen, dazu gleich mehr.
Das alt-Attribut ist unter anderem wichtig für Suchmaschinen und Nutzende mit eingeschränktem Sehvermögen. Selbst bei rein dekorativen Bildern benötigen Sie ein alt-Attribut, jedoch dann mit einem leeren Wert (alt=““).
Die Angabe loading="lazy" ist nicht für alle Bilder sinnvoll, sondern sollte nur für Bilder genutzt werden, die nicht sofort oben auf der Webseite erscheinen. Dadurch wird das „lazy loading“ aktiviert. Dank lazy loading werden Bilder erst geladen, wenn sie benötigt werden, das heißt, wenn sie im Viewport sind. Dies spart unnötige Datenübertragungen und ist daher wichtig für klimafreundliche Webseiten sowie für die Performance Ihrer Webseite.
Damit steht eine gute HTML-Basis für die Verwendung von Bildern. Außerdem sind grundlegende CSS-Formatierungen sinnvoll, häufig werden Sie die folgenden brauchen:
img {
display: block;
max-width: 100%;
height: auto;
}
Bilder sind ersetzbare Inline-Elemente, was bedeutet, dass sie wie Text positioniert werden. Diese Inline-Darstellung führt manchmal zu scheinbar unerklärlichen Abständen: Bilder werden auf der Grundlinie angeordnet, und nach unten bleibt Platz für die Unterlängen von Buchstaben wie „g“ oder „p“. Dieses Problem wird behoben, indem Bilder zu Blockelementen gemacht werden und zwar über display: block.
Außerdem wird definiert, dass Bilder nie aus dem umfassenden Container herausragen dürfen, indem eine max-width festgelegt wird. Die height muss zudem auf auto gesetzt werden, um eine Verzerrung des Bildes zu verhindern – das ist wichtig, wenn Sie die Ausmaße der Bilder in HTML gesetzt haben.
Wichtig dabei: Per CSS wird nur die sichtbare Größe verändert. Das Bild sollte vorher auf die optimale Kantenlänge (Breite x Höhe) in einem normalen Bildbearbeitungsprogramm gebracht werden, um die übertragene Datenmenge klein zu halten.
Angepasste Ausmaße
Mit max-width: 100% sorgen Sie dafür, dass Bilder nicht größer werden als der umfassende Container. Das ist in vielen Fällen eine gute Basis, passt aber nicht immer.
Angenommen, Sie haben eine Reihe von Card-Komponenten, bei denen oben ein Bild angezeigt wird. Und leider haben die Bilder unterschiedliche Formate, manche sind Querformat und andere Hochformat. Dann sieht das unschön aus.
Besser ist es, wenn die Bilder alle dasselbe Seitenverhältnis haben.
Genau das kann die CSS-Eigenschaft aspect-ratio. Zum Beispiel bewirkt aspect-ratio: 3/4 ein Seitenverhältnis von 3 zu 4. Und aspect-ratio: 1/1 erzeugt ein Quadrat, was sich übrigens auch als aspect-ratio: 1 abkürzen lässt.
Damit das Beispiel mit den Bildern in den Card-Komponenten klappt, ist allerdings noch etwas mehr Code notwendig. Um sicherzugehen, dass die Bilder die Karte immer ausfüllen, wird width statt max-width gesetzt und object-fit:cover. Die Bilder im Beispiel erhalten also die folgenden Formatierungen:
.card__image {
/* max-width: 100%;
height: auto; */
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
Hier sehen Sie den vollständigen Code des Beispiels:
oder auch per CodePen.
Nehmen wir uns nun die weiteren CSS-Teile vor. Im Beispiel werden die Karten über CSS-Grid nebeneinander platziert:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
grid-gap: 1.5rem;
}
Die Anzahl und das Aussehen der Rasterspalten bestimmt grid-template-columns. Über repeat mit der Angabe auto-fit ermittelt der Browser selbst, wie viele Spalten Platz haben. Die gewünschte Breite der Spalten bestimmt die minmax()-Funktion sehr flexibel: Die Spalten sollen mindestens 8rem breit sein, und maximal den verfügbaren Platz vollständig ausnutzen (1fr). Damit passt sich die Darstellung der Kartenelemente automatisch an den Viewport an, d.h. je nach Platz sind es mehr oder weniger Spalten. Media Queries sind dafür nicht notwendig.
Noch einmal zurück zur Angabe object-fit, die ganz entscheidend für die richtige Darstellung der Bilder ist. object: cover bewirkt im Beispiel, dass das Bild den dafür reservierten Bereich ganz ausfüllt. Es bedeutet aber auch, dass eventuell Teile des Bildes nicht ganz zu sehen sind.
Weitere mögliche Werte bei object-fit sind:
object-fit: fill: Das Bild füllt das Element vollständig aus. Wenn die Seitenverhältnisse nicht übereinstimmen, wird das Bild verzerrt. Meist ist dieses Verhalten nicht erwünscht.object-fit: contain: Das Bild ist vollständig zu sehen. Bei unterschiedlichen Seitenverhältnissen sieht man etwas von der Hintergrundfarbe des umfassenden Elementes.obect-fit: none: Es gibt keine Änderung beim Bild.object-fit: scale-down: Das Bild verhält sich wie bei den Werten none oder contain, je nachdem, was zu einer kleineren Größe führt.
Die Abbildung zeigt, wie die Werte fill, cover und contain bei einem Stern angewandt wirken.
Zusätzlich können Sie die Position eines Bildes mithilfe von object-position feinjustieren. object-position erwartet eine Positionsangabe wie object-position: top center. Damit wird das Bild oben platziert und zentriert. Die Werte, die Sie bei object-position angeben können, funktionieren genauso wie die Angaben bei background-position. Neben Schlüsselwörtern sind auch Längenangaben oder Prozentwerte möglich. Der erste Wert bezieht sich dann auf die x-, der zweite auf die y-Achse.
Formvollendet
Bilder müssen nicht immer rechteckig sein, sondern Sie können die Form mit CSS verändern. Über border-radius lassen sich z.B. die Ecken abrunden.
Wenn eine Card-Komponente mit Bildern abgerundete Ecken hat, dann müssen die Bilder ebenfalls oben abgerundete Ecken haben. Das erreichen Sie über:
.card {
border-radius: 0.8rem;
}
.card__image {
border-radius: 0.8rem 0.8rem 0 0;
}
Wenn die Karte um 0.8rem abgerundete Ecken hat, müssen diese Werte auch bei dem Bild für die beiden oberen runden Ecken benutzt werden. Statt die Werte mehrmals zu steuern, können Sie Custom Properties einsetzen, dann können Sie die Abrundung auch zentral an einer Stelle ändern.
:root {
--rounded: 0.8rem;
}
.card {
border-radius: var(--rounded);
}
.card__image {
border-radius:var(--rounded) var(--rounded) 0 0;
}
Mit border-radius lassen sich auch Kreise oder ungewöhnlichere Formen erzeugen. Bei der Definition ungewöhnlicher Formen hilft ein Online-Tool wie der Fancy border-radius Generator.
Besonders raffiniert ist das, was Temani Afif bei CSS Tip zeigt. Hier haben Sie ein geformtes Bild mit einem farbigen Hintergrund. Das Interessante an der Lösung ist dabei: Es wird nur das Bild selbst bearbeitet, es sind keine weiteren Elemente notwendig. Möglich macht das die etwas unbekanntere CSS-Eigenschaft border-image, der ein konischer Farbverlauf zugewiesen wird.
Schnittmuster
Mehr Flexibilität als border-radius bietet die Eigenschaft clip-path, mit der Sie Teile aus Bildern ausschneiden. Das Grundprinzip dabei ist, dass das Bild nur in dem Bereich, der durch clip-path definiert ist, sichtbar ist. Neben clip-path gibt es auch die Eigenschaft mask, die das Gegenteil bewirkt: Die angegebene Form versteckt das Element.
Es stehen verschiedene Funktionen zur Definition der Form bei clip-path zur Verfügung. Die wichtigsten sind:
inset()erzeugt ein von den Seiten begrenztes Rechteck, das jedoch auch abgerundete Ecken haben kann.inset(20% 30% round 20px)beschneidet das Bild horizontal um 20%, vertikal um 30%, und die Ecken sind mit 20px Radius abgerundet.circle()ist für Kreisformen gedacht. Sie definieren zuerst den Radius und dann die Position, beispielsweisecircle(30px at 50% 50%).ellipse()funktioniert ähnlich wiecircle(), nur dass Sie zwei Werte für die verschiedenen Radien angeben, zum Beispielellipse(85px 20px at 100px 40px).polygon()erlaubt beliebige Formen, indem Sie die gewünschten Punkte durch Kommas getrennt angeben.path()erlaubt Pfadangaben, die im üblichen SVG-Format geschrieben werden.
Der folgende Code schneidet ein Dreieck aus einem Bild:
.ausgeschnitten {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
Besonders praktisch: Wenn Sie eine Form wie polygon() angegeben haben, können Sie den clip-path-Editor in Firefox nutzen. Rufen Sie die Entwicklertools durch Rechtsklick in Ihr Dokument und Untersuchen auf. Klicken Sie auf das Element, für das Sie einen clip-path definiert haben. Im CSS-Bereich aktivieren Sie den clip-path-Editor durch einen Klick hinter diese Eigenschaft. Nun erhalten Sie Anfasser, durch die Sie den angezeigten Bereich verändern können. Ein Doppelklick auf eine Linie erzeugt weitere Punkte, die Sie wieder ziehen können.
Wenn Sie Formen von Grund aus mit clip-path neu erstellen wollen, hilft Ihnen das Online-Tool Clippy.
Die Anpassung der Farben von Bildern geht über Filter. Beispielsweise können Sie einen Filter auf die Bilder in den Card-Komponenten anwenden und diese erst beim Hovern in ihrer vollen Pracht erscheinen lassen:
.card__image {
filter: brightness(0.55) saturate(1.4) contrast(0.75);
transition: filter 200ms linear;
}
.card:hover .card__image {
filter: none;
}
Verschiedene Filterfunktionen werden durch Leerzeichen getrennt hinter der filter-Eigenschaft aufgelistet. Diese Filterangaben werden beim Hovern über die Karte aufgehoben (filter: none). Um einen sanften Übergang zu gewährleisten, ist im Ausgangszustand eine transition definiert.
Die Abbildung zeigt den Effekt beim einem Bild: links die gefilterte Version, rechts ungefiltert beim Hovern (ausprobieren bei CodePen).
Drei Filterfunktionen kommen hier zum Einsatz.
- Durch
brightness(0.55)wird die Helligkeit reduziert. Beibrightness(0)würde das Bild komplett schwarz werden, währendbrightness(1)das unveränderte Originalbild darstellt. Werte über 1 machen das Bild heller. saturate(1.4)bewirkt eine erhöhte Sättigung. Bei einem Wert von 1 bleibt die Sättigung unverändert, während kleinere Werte zu weniger Sättigung führen und größere Werte das Element übersättigen, wie im Beispiel.contrast(0.75)reduziert den Kontrast. Beicontrast(1)bleibt das Originalbild unverändert, beicontrast(0)würde das Bild grau werden. Höhere Werte sorgen für einen stärkeren Kontrast.
Ein solcher Effekt ist besonders sinnvoll, wenn ein Klick auf das Bild mit einer Aktion verbunden ist.
Weitere mögliche Filterangaben sind unter anderem drop-shadow() für einen Schlagschatteneffekt, grayscale(), das ein Element/Bild in Grautöne umwandelt, hue-rotate() für eine Farbtonrotation, invert(), um die Farben zu invertieren, opacity() für eine transparentere Darstellung und sepia() für ein Sepiabild. Außerdem können Sie die Funktion url() in der filter-Eigenschaft verwenden und dabei auf einen SVG-Filter verweisen, wodurch noch mehr Möglichkeiten für Filtermanipulationen entstehen.
Filter sind eine Möglichkeit, die Bilder zu verändern. Eine andere besteht in der Mischung von verschiedenen Bildern oder von Bildern und Hintergrund über die CSS-Eigenschaft mix-blend-mode. Der folgende Screenshot zeigt, wie ein Bild mit einem darunter liegenden farbigen Rechteck gemischt wird, genutzt werden dabei mix-blend-mode: overlay beim ersten Bild, mix-blend-mode: screen beim zweiten und mix-blend-mode: luminosity beim dritten.
Und statt eines einfarbigen Rechtecks zur Mischung könnte man natürlich auch den Hintergrund über einen Farbverlauf definieren und das Bild mit diesem vermischen.
Fazit: Bilder mit CSS manipulieren
Das Gezeigte war natürlich nur eine Auswahl an Möglichkeiten, die CSS zur Bearbeitung von Bildern bietet. Weitere schöne Optionen ergeben sich durch Transformationen – so könnten Sie beispielsweise ein Bild beim Hovern vergrößern, wie man es häufiger sieht. Und gerade durch die Filter und Blendmodi ergeben sich spannende Effekte – ausprobieren und experimentieren lohnt sich!
Titelmotiv: Photo by davisuko on Unsplash
