Bilder sind unglaublich wichtig für erfolgreiche Webseiten: sie nehmen starken Einfluss auf die Emotionen, das Vertrauen und die Handlungen unserer Nutzer. Sie sind aber auch für über 2/3 der durchschnittlichen Webseiten-Größe von aktuell 3.6 MB verantwortlich und haben eine hohe Korrelation zu Ladezeit, wahrgenommener Darstellungsgeschwindigkeit und der Zeit zur ersten Interaktion mit der Webseite.
Deswegen arbeiten wir bei trivago kontinuierlich an optimierten und gut angepassten Bildern. In diesem Vortrag werden wir uns ansehen, wie bei trivago Bilder für optimale Darstellung und Auslieferung vorbereitet werden und welche wichtigen Lektionen trivago in diesem Prozess bereits gelernt hat.
Tobias arbeitet als Knowledge Lead für Web Performance bei trivago. Er arbeitet und innovativen Web-Performance Werkzeugen, neuen Bildoptimierungs-Algorithmen und spricht gerne auf Konferenzen. Er ist ein involvierter Papa, versucht sich an Achtsamkeit und gesunder Ernährung und liebt das Musizieren. Mehr über ihn erfahrt Ihr auf who.tobias.is
———————————————————
Bilder im Web sind eine einfache Sache. Man verwendet entweder ein IMG-Element oder aber einen CSS Hintergrund, referenziert darin ein JPG, PNG oder SVG, und fertig ist die Laube. Oder ist da doch mehr? Aber sicher ist da noch mehr! Was genau, das zeige ich Euch bei einer Rundreise durch das Thema, bei der ich mit weniger bekanntem Markup beginne, ich Euch dann verschiedene interessante Methoden des Image Objekts zeigen werde, und wir uns anschließend mit den verwendbaren Dateiformaten beschäftigen werden. Zu guter Letzt zeige ich Euch noch allerhand CSS-Tricks, mit denen man Bildwelten generieren und kontrollieren kann – und das (fast) ohne JavaScript.
Christian Schaefer (twitter.com/derSchepp), auch „Schepp“ genannt, ist freiberuflicher Frontend-Entwickler aus Düsseldorf. Anstatt derzeit mit hippen JavaScript-Frameworks herumzuspielen wie gefühlt sonst fast jeder, arbeitet er an traditionellen, serverseitig gerenderten Komponenten-Bibliotheken und nutzt dabei modernstes CSS, achtet auf Barrierefreiheit und eine rasend schnelle Ladezeit. Außerdem organisiert er dieses Meetup (.meetup.com/Webworker-NRW) und podcastet über Frontend-Themen (workingdraft.de).
———————————————————-
Language: German