Responsive Images – <picture>, srcset, sizes & Co.

responsiveimages

Flexible Bilder sind ein wichtiger Bestandteil von responsiven Websites. Doch leider stellte genau dieses Thema Web Designer in den vergangenen Jahren vor enorme Herausforderungen. Ohne Scripte war es bisher nicht möglich Bilder ohne Performance- oder Qualitätsverluste auf allen Displaygrößen darzustellen. Und selbst mit der Unterstützung von Scripten waren einige Änderungen – z. B. die Veränderung des Bildausschnitts – eine mehr als lästige Aufgabe. Mit <picture>, srcset & sizes sind neue HTML-Elemente und -Attribute in die Spezifikation gewandert, mit deren Hilfe sich viele Probleme bald lösen werden.

Beitrag zu Ende lesen

Automatische Kompression beim Upload von Bildern in die WordPress-Mediathek deaktivieren

wordpress-kompression-mediathek

WordPress komprimiert Bilder beim Upload in die Mediathek automatisch. Das kann praktisch sein, muss es aber nicht. Insbesondere bei Portfolios mit dem Fokus auf Design oder Fotografie stört die Kompression, da JPG-Artefakte sichtbar werden können. Mit einer kleinen Anpassung schaltet ihr die Kompression ab.

Beitrag zu Ende lesen

Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64

enigma64-logo-icon

Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.

Beitrag zu Ende lesen

Grafiken mit Data URIs (Base 64) erzeugen

base64-code

Data URIs sind komplexe Zeichenfolgen (Base 64 Code) mit deren Hilfe sich u.a. Grafiken erstellen lassen. Der erzeugte Code kann mit CSS als Hintergrundgrafik oder als HTML-Tag eingefügt werden. Im Gegensatz zu Pixelgrafiken muss keine externe Datei eingebunden werden. Im Gegensatz zu Grafiken auf Basis von CSS3 sind mit Data URIs auch komplexe Darstellungen möglich.

Beitrag zu Ende lesen

Inhalte per Ajax (jQuery) nachladen

ajax

Wenn Website-Inhalte nachgeladen oder verändert werden ohne dass die Website dazu vollständig neu geladen werden muss spricht man von Ajax (Asynchronous JavaScript and XML). Meist wird Ajax mit komplexen Funktionen oder Formularabfragen in Verbindung gebracht, es macht es aber auch in eher einfachen Projekten Sinn nicht direkt benötigte Inhalte per Ajax nachzuladen und somit die Performance zu verbessern. In diesem Beitrag archiviere ich ein kleines jQuery-Snippet mit dessen Hilfe HTML-Inhalte per Klick nachgeladen werden können.

Beitrag zu Ende lesen

Sollte text-indent: -9999px; ersetzt werden?

text-verstecken-css-intend

Ich behaupte einfach mal, dass wohl jeder Webdesigner schon Text mit der CSS-Eigenschaft text-indent: -9999px; versteckt hat. Die aus heutiger Sicht schon fast antike Technik entstammt noch Zeiten, in denen wir ausgefallene Schriftarten mit Hilfe von Grafiken einbetten mussten. Da es Webfonts noch nicht gab, wurden Schmuckschriften in Bildern gespeichert. Anschließend wurde einem Element die Grafik als Hintergrundbild zugewiesen; der für die Suchmaschinen enthaltene „echte“ Text wurde versteckt. Mit Hilfe von text-indent: -9999px; wurde er um 9999 Pixel aus dem sichtbaren Bereich heraus verschoben.

Beitrag zu Ende lesen

WordPress-Mediathek auf Subdomain auslagen. Warum und wie.

wordpress-mediathek

Die Performance gehört zu den wichtigsten Faktoren wenn es um die technische Optimierung einer Website geht. User erwarten schnelle Seiten und auch Google rankt Sites mit hoher Performance im Index weiter nach vorne. Es lohnt sich also hier zu optimieren.
Um zu prüfen welche Bereiche eurer Website verbesserungswürdig sind, könnt ihr beispielsweise Google Page Speed oder Yahoo YSlow nutzen. Beide Dienste empfehlen die Nutzung eines sog. CDN (= Content Delivery Network), also die Auslagerung von Medianinhalten auf verschiedene Server dessen Aufgabe ausschließlich die Verwaltung und Verteilung dieser Inhalte ist. Es muss aber kein echter CDN-Dienst sein. Häufig reicht eine eigene Subdomain.

Beitrag zu Ende lesen