Satyr.io stellt Dummies zum Testen von Websites bereit

Bevor eine Website an die Öffentlichkeit geht, sollte man sie testen. Gerade bei responsivem Layout ist es wichtig, abzuklären, ob Bilder bei verschiedenen Browserauflösungen beziehungsweise auf Mobilgeräten richtig dargestellt werden. Wird die richtige Datei ausgegeben? Wie verhält sich das Laden von Bildern bei langsamer Internetverbindung? Satyr.io ist ein Dienst, der Dummy-Bilder erstellt, mit denen du deine Webprojekte in dieser Hinsicht einmal prüfen kannst.

satyr

Dummy-Bilder erstellen und einsetzen

Um mit Satyr.io ein Dummy-Bild zu erstellen, muss lediglich eine URL im Browser aufgerufen werden, bei der die Auflösung des Dummy-Bildes angegeben wird. Dazu übergibt man Breite und Höhe des Bildes einfach der URL.

satyr.io/640x425

satyr_bild1

Im Beispiel wird ein Bild mit 640 Pixel Breite und 425 Pixel Höhe im Browser wiedergegeben. Alle Bilder werden im PNG-Format erstellt. Standardmäßig besteht das Bild aus einem schlichten grauen Hintergrund, auf dem die Auflösung (mittig), sowie das dazugehörige Seitenverhältnis (unten rechts) dargestellt wird.

Benötigst du ein Bild mit einem festen Seitenverhältnis, kannst du die Breiten- oder Höhenangabe mit einem Seitenverhältnis kombinieren.

satyr.io/640x2:1

satyr_bild2

Im zweiten Beispiel wird ein Bild ausgegeben, welches eine Breite von 640 Pixel bei einem Seitenverhältnis von 2 zu 1 besitzt. Die Höhe wird von Satyr berechnet.

Responsive Bildersets prüfen

Dank des „<picture>“-Elementes ist es möglich, für verschiedene Auflösungen unterschiedliche Bilddateien auszuzeichnen. Um zu prüfen, ob alle Bilder eines „<picture>“-Elementes korrekt ausgegeben werden, kannst du mit Satyr entsprechende Dummy-Bilder einbinden. Durch die Darstellung von Auflösung und Seitenverhältnis in den Dummy-Bildern erhältst du einen schnellen Überblick, ob alles korrekt ausgezeichnet ist.

<picture>
  <source srcset="http://satyr.io/640x320media="(min-width: 640px)">
  <source srcset="http://satyr.io/320x160media="(min-width: 320px)">
  <img srcset="http://satyr.io/320x160alt="">
</picture>

Wenn dir die Angabe von Auflösung und Seitenverhältnis zur Unterscheidung nicht ausreicht, kannst du die Bilder auch nummerieren und mit einer anderen Hintergrundfarbe versehen. Dazu ergänzt du einfach eine Zahl, die anstelle der Auflösung in der Mitte des Bildes dargestellt wird. Die Auflösung wird dann unten links angezeigt.

satyr.io/210x425/1
satyr.io/210x425/2
satyr.io/210x425/3

satyr_bild3

Die Angabe einer Zahl sorgt zudem dafür, dass jedes Dummy-Bild eine andere Hintergrundfarbe bekommt. So sind die einzelnen Bilder besser voneinander zu unterscheiden.

Variable Auflösung

Nicht immer werden Bilder in einheitlichen Auflösungen in eine Seite eingebunden. Und gerade bei Galerien führen unterschiedliche Auflösungen schon einmal dazu, dass das vorgesehene Layout für eine Galerie zerschossen wird. Um dies zu prüfen, legst du für Dummy-Bilder einfach eine variable Auflösung innerhalb einer definierten Spanne fest.

http://satyr.io/320-640x425

satyr_bild4

Im Beispiel wird ein Bild ausgegeben, welches eine Breite zwischen 320 und 640 Pixel hat und eine feste Höhe von 425 Pixel. Die Breite bestimmt sich bei jedem Aufruf dieser Bild-Adresse per Zufall.

Langsame Internetverbindung simulieren

Gerade bei mobiler Internetnutzung muss man schon mal mit einer geringen Datenübertragung leben. Um zu prüfen, wie beispielsweise Image-Loader oder andere JavaScripts, die auf Bilder zugreifen, bei langsamer Internetverbindung reagieren, kannst du diese einfach simulieren. Per Paramater gibst du eine Verzögerung an, die dafür sorgt, dass ein Bild erst nach dieser Zeit an den Browser ausgegeben wird.

satyr.io/640x425?delay=3

Im Beispiel braucht das Bild drei Sekunden, bis es im Browser zur Verfügung steht.

Fazit

Das Erstellen von Dummy-Bildern nimmt häufig Zeit in Anspruch, die man sinnvoller zu nutzen weiß. Satyr stellt dir solche Bilder im Handumdrehen zur Verfügung. Du brauchst kein Bildbearbeitungsprogramm, musst nichts hochladen und kannst zudem noch eine langsame Internetverbindung simulieren. Satyr kann kostenfrei genutzt werden.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Karl Marx
Gast

Man nehme ein großes Bild und setze per Tag oder css die größe. Selber Ergebnis, nur mit weniger kino

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen