11.12 Weitere Bilder-Tools 
Beim Coden einer Webseite kommt es häufig vor, dass die Bilder vom Kunden noch nicht vorhanden sind. Bei Texten wird in solchen Fällen Blindtext genommen. Bei Bildern musste man »früher« mühselig eigene Bilder heraussuchen, abspeichern und einbinden. Inzwischen gibt es aber Dienste, die einem diese lästige Arbeit abnehmen.
Fake images please? | Platzhalterbilder, die sich ganz einfach sowohl in HTML als auch in CSS einbinden lassen:
<img src="http://fakeimg.pl/300/">
<img src="http://fakeimg.pl/250x100/">
<img src="http://fakeimg.pl/250x100/ff0000/">
<img src="http://fakeimg.pl/350x200/?text=Hello">
Listing 11.17 HTML-Code für Platzhalterbilder
Es wird ganz normal ein img-Tag definiert. An die URL des Dienstes muss dann die Größe des Bildes in Pixelmaßen angegeben werden. Optional lassen sich eine Hintergrundfarbe und sogar Text definieren: http://fakeimg.pl.
lorempixel | Platzhalterbilder aus richtigen Fotomotiven, bei denen sich die Größen und die gewünschte Richtung der Bildmotive einstellen lassen. Der Bildpfad lässt sich einfach benutzen oder auch ein Bild zum Kopieren generieren: http://lorempixel.com.
PlaceIMG | Dies ist wohl der einfachste »Platzhalterbildergenerator«: Maße, Bildmotiv auswählen und Code oder Bild generieren lassen: http://placeimg.com/640/365/nature/grayscale.
Der Bildpfad ist logisch nachvollziehbar und einfach anzupassen: http://placeimg.com.
User Interface Faces | Für Designs und User Interfaces werden immer mal wieder Porträtbilder, ähnlich denen in Social-Networks-Profilen, benötigt. Uifaces.com liefert genügend solcher Profilbilder. Einige Einstellungsmöglichkeiten machen diesen Dienst rund: http://uifaces.com.
Web Developer Toolbar | Die Developer Toolbar (https://addons.mozilla.org/de/firefox/addon/web-developer) ist ein Pflichttool für Webdesigner. Der Reiter Bilder bietet einige spannende Optionen an, z. B.:
-
Bilder deaktivieren
-
Bilddateigrößen anzeigen
-
alt-Attribute anzeigen
-
Bildinformationen anzeigen (Breite, Höhe, Bildpfad, alt-Attribut)
-
und noch viele mehr!
Webdesign
