#bildergrafiken — Public Fediverse posts

Texte auf Hintergrund-Bildern lesbar gestalten

Texte, die vor Hintergrundfotos oder Videos platziert werden, sind ein beliebtes Gestaltungsmerkmal auf Websites. Leider ist die Lesbarkeit der Texte oft schlecht, da das Hintergrundbild entweder sehr unruhig ist, oder sehr viele verschiedene Farben beinhaltet. Um dieses Problem zu lösen, wird das Bild häufig mit einer Farbe überlagert, um die Lesbarkeit wieder herzustellen. […]

https://kulturbanause.de/news/texte-auf-hintergrund-bildern-lesbar-gestalten/

Schärfere Bilder im Chrome

Im responsiven Webdesign werden Bilder gegebenenfalls automatisch verkleinert. Leider rendert Googles Browser Chrome Bilder beim Verkleinern nicht so, wie es bei guten Bildbearbeitungsprogrammen der Fall ist und gibt diese daher nicht mit der gleichen Schärfe, wie das ursprüngliche Bild aus. Artem Syzonenko stellt einen kleinen Hack vor, um verkleinerte Bilder im Chrome schärfer darzustellen. Direkter Link zum Artikel

https://kulturbanause.de/news/schaerfere-bilder-im-chrome/

Responsive Images – , srcset, sizes & Co.

Mit den HTML-Attributen srcset und sizes teilt ihr dem Browser mit, dass ihr ein Bild in verschiedenen Abmessungen oder Qualitätsstufen zur Verfügung stellt. Der Browser kann dann selbstständig die passende Datei laden. Mit dem Picture-Element legt ihr exakt fest welches Bild(motiv) wann geladen werden soll.

https://kulturbanause.de/blog/responsive-images-srcset-sizes-adaptive/

SVG mit PNG-Fallback

In diesem Beitrag erfahrt ihr, wie ihr mit Modernizr einen PNG-Fallback für SVG-Grafiken im HTML- und CSS-Code herstellt.

https://kulturbanause.de/blog/svg-mit-png-fallback/