Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Bilder & Vektorgrafiken bearbeiten » Satyr.io stellt Dummies zum Testen von Websites bereit

Satyr.io stellt Dummies zum Testen von Websites bereit

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 19. Januar 2016
Bookmarke mich
Share on pocket

WordPress Werkstatt

NETZhelfer GmbH

minddraft AG

One Step Webdesign

Niels Neumann Online Marketing

Webtronix Media GmbH

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/640x320" media="(min-width: 640px)">
  <source srcset="http://satyr.io/320x160" media="(min-width: 320px)">
  <img srcset="http://satyr.io/320x160" alt="">
</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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

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.

Agenturpartner

UnitedAds

Starnberg

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

DAZECON – Webdesign und Marketing

Dresden

Philipp Pistis – WordPress Agentur

Prittriching

Critch GmbH – Immobilienkanzlei FREITAG®

München

Alle Agenturpartner

Jobs

Online Marketing Manager

Innsbruck

SEA Manager in München

München

Webtexter für SEO Agentur

Salzburg (Österreich)

Online Marketing Manager

München

Inside Sales Manager

Karlsruhe

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign: Die Basics guter Informations­architektur

Lineare Informationsarchitektur bezeichnet eine Konstruktion, in der es stets nur einen vordefinierten Weg zum Ziel gibt. Nutzer in linearen Systemen arbeiten Aufgaben entlang der vorgegebenen Pfade ab und können nur so und nicht anders zum Ziel zu gelangen. Diese Vorgehensweise ist aus Sicht des Designers nicht uninteressant.

 →   

Webdesign-Agentur gründen: 10 Tipps, wie der Start gelingt

Eine Webdesign-Agentur zu gründen ist keine einfache Aufgabe, denn du musst eine ganze Reihe Fähigkeiten mitbringen, um erfolgreich im harten Markt bestehen zu können.

 →   

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Eine Antwort zu „Satyr.io stellt Dummies zum Testen von Websites bereit“
— was ist Deine Meinung?

  1. Karl Marx sagt:
    19. Januar 2016 um 15:41 Uhr

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

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.