Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Webdesign – Grundlagen

Optimierte Bildgrößen mit src.sencha.io

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wenn Sie Bilder mit max-width behandeln, so passen sie sich zwar optisch an, dennoch werden "zu große" Bilder auf kleinen Geräten geladen – was sich negativ auf die Performance auswirkt. Abhilfe bringen serverseitige Lösungen wie src.sencha.io.

Transkript

Wenn Sie Bilder mit max-width behandeln, so passen sie sich zwar optisch an, aber trotzdem werden zu große Bilder auf kleinen Geräten geladen, was sich negativ auf die Performance auswirkt. Abhilfe bieten serverseitige Lösungen, wie beispielsweise src.sencha.io Also, noch einmal: was macht max-width? Wenn Sie per CSS die Breite von Bildern über max-width manipulieren, so sorgen Sie dafür, dass ein Bild nicht aus dem umfassenden Container ausbricht. Aber es ist trotzdem noch dasselbe Bild, was Sie beispielsweise auch auf einem Desktop-Browser anzeigen lassen. Und wenn Sie sich jetzt vorstellen, Sie haben viele Bilder, dann bedeutet das, dass viele große Bilder heruntergeladen werden auf ein kleines Smartphone, wo es ja immer sein kann, dass der Benutzer wirklich mobil unterwegs ist und schlechte Verbindung hat, das kann ja immer sein. Dann werden diese zu großen Bilder, diese zu großen Dateien geladen. Und das wirkt sich natürlich sehr schlecht auf die Performance aus. Es heißt, die Seite braucht zu lange zu laden. Was kann man dagegen machen? Man muss eigentlich, bevor man die Bilder ausliefert, feststellen wie groß die Bilder benötigt werden. Also, feststellen welche Größe die haben müssen, um die Bilder gleich in der richtigen Größe ausliefern zu lassen. Besonders komfortabel erleichtert das der Dienst src.sencha.io Da geht das magisch. Schauen wir uns mal kurz an wie das Prinzip hier ist. Ich habe die Web-Seite hier aufgerufen, wo das beschrieben wird. Sie binden in Ihrem HTML-Code ein Bild ein. Das muss auch wirklich dann auf dem Server im Internet irgendwo sein. Dieses wird von dem Dienst verarbeitet. Der Dienst stellt dann fest, wenn die Seite angefordert wird, was für ein Gerät das ist, welche Bildgröße dort die richtige ist und liefert das skalierte, also das wirklich veränderte Bild dann an den entsprechenden Browser des Endgeräts. Sehen wir das hier einmal uns praktisch an. Wichtig ist, damit das Ganze funktioniert, muss sich das Bild dann auch wirklich irgendwo im Internet befinden. Also, es funktioniert nicht, wenn Sie es jetzt zubereiten und mit einer lokalen Datei machen. Weil der Dienst muss das ja auch wirklich irgendwo abgreifen, um das Bild zu nehmen und dann zu bearbeiten. Ich habe jetzt hier ein kleines Beispiel erstellt. Ich habe eine Datei, die heißt gruener_see.jpg Und das ist ein Bild, was relativ groß ist. Und wenn ich mal kurz das hier zeige, dann sehen Sie, das ist ein großes Bild. Wenn wir uns hier unter Eigenschaften mal die Ausmaße anzeigen lassen, dann sehen Sie, das ist sogar groß 900x675 Ich habe etwas genommen, wo es einfach ganz deutlich wird. Es heißt, zuerst lasse ich dieses Bild ganz normal anzeigen. Und dann mache ich das jetzt zweimal mit diesem Dienst. Damit das Ganze funktioniert, muss ich das Bild wirklich irgendwo im Web haben. Und ich habe es hier bei maurice-web hier an dem Unterordner hochgeladen. Und jetzt würde ich normalerweise ja nur diesen Pfad hinschreiben. Aber wenn ich jetzt möchte, dass das Bild über sencha bearbeitet wird, dann ergänze ich hier diese Angabe http://src.sencha.io Und dann funktioniert das eben, dass das Bild für das Gerät entsprechend runterskaliert wird. Ich kann dann verschiedene Parameter angeben. Ich kann zum Beispiel mit x50 auch angeben, dass es halb so groß ist wie die richtige Breite für das Gerät wäre. Jetzt wollen wir uns das Ganze natürlich einmal anschauen. Wenn wir das jetzt so ganz normal hier im Firefox aufrufen, werden wir keinen Unterschied sehen, weil es gibt ja hier jetzt keinen Grund das Bild irgendwie zu skalieren. Und das ist jetzt nichts, was irgendwie reagiert hier auf eine Veränderung des Browser-Fensters, sondern dieser Dienst hier von sencha reagiert auf den User Agent. Das heißt, die Kennung, die das jeweilige System sendet, wenn es eine Web-Seite anfordert. Und diese müssen wir manipulieren, um zu sehen wie das Ganze funktioniert. Und das können wir zum Beispiel sehr gut auch machen im Safari, der das von Haus aus mitbringt. Schauen wir die Seite hier mal in Safari an. Ok, jetzt müssen wir noch etwas tun, weil Sie sehen erstmal ist hier nichts dabei. Wir lassen erstmal die Menü-Leiste einblenden und dann brauchen wir hier noch den Menü-Punkt Entwickler. Und den kriegen wir unter Einstellungen hier, Erweitert Menü "Entwickler" anzeigen lassen. Und wenn wir dann hier hingehen, haben wir den Punkt User Agent und können zum Beispiel das jetzt mal umschalten auf iPhone. Wenn wir jetzt die Seite neu laden, dann ist das erste Bild, da hat sich nichts verändert. Und Sie sehen, das zweite und das dritte Bild, die sind kleiner gemacht. Das können wir natürlich jetzt auch mit CSS tricksen. Das ist aber in diesem Fall nicht mit CSS getrickst. Das können wir uns ansehen, wenn wir dieses Bild hier einfach mal bei Downloads sichern und uns dann einmal anschauen. Ich habe hier mal dieses Verzeichnis hier. Und hier habe ich dieses Bild. Und wenn ich da auf die Eigenschaften gehe und mir bei Details die Größe ausgeben lasse, dann sehen Sie, das hat jetzt Abmessungen von 320x240 Also, es wurde wirklich ein Bild in der entsprechenden Größe erzeugt. Und dieses Bild hat, das sehen Sie hier auch, natürlich wesentlich kleinere Dateigrößen. Das heißt, das lädt natürlich wesentlich schneller als das Originalbild, was überhaupt gar keinen Vorteil hätte, wenn man das auf so einem kleinem Gerät laden würde. Sie haben gesehen, dass sencha.io ein praktischer Dienst ist, um für kleine Geräte angepasste Bilder zu laden, weil eben hier alles automatisch geschieht. Und es ist auf jeden Fall besser solche Dienste wie dieses sencha einzusetzen, als dass Sie viele Bilder einfach nur mit max-width skalieren und damit dann den armen Smartphone-Nutzern viel zu große Bilder aufbördeln.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!