Bilder für Internet
| Pixelgrafik | JPEG | PNG 24 | PNG 8 | GIF |
|---|---|---|---|---|
| Komprimierung |
verlustbehaftet Tipp: ca. 60 bis 80% zu starke Komprimierung: Artefakte wikipedia.de: JPEG |
verlustlos | ||
| Farbtiefe |
8 bit Graustufen 24 bit RGB 32 bit CMYK funktioniert nicht  |
24 bit RGB | 8 bit indiziert | |
| Transparenz |
Nein |
+ 8 bit  weiche Übergängenicht im IE6 und älter |
1 bit pixlig |
|
| Motiv |
Fotos, weiche Schatten, Verläufe, Strukturen, natürliche Materialien |
Grafiken, Logos, Comic-Stil, große gleichfarbige Flächen |
||
Vektorgrafik: SVG
frei skalierbar
früher nicht in allen Browsern verfügbar eventuell mit modernizr.com modernisierbar.
<img>
- Bilder mit inhaltlicher Bedeutung
- erscheinen standardmäßig beim Drucken
- alt-Tag für Screenreader und Suchmaschinen
Hintergrundbilder
- für die reine Gestaltung, kein Inhalt
- werden standardmäßig nicht mit ausgedruckt
-
möglichst geringe Ladezeit
geringer Speicherplatz!
Kontrolle: Photoshop bzw. Illustrator: Für Web und Geräte speichern ... -
Bildinhalt bzw. Stilistik JPEG | PNG | GIF maximal mögliche Breite und Höhe
- ein Bild oder Kacheln (Illustrator: Muster hier: Zeichenfläche = Kachelgröße)
Gestaltung Instensitäts- und Aufmerksamkeitsgesetze? umkehren!
Photoshop oder Illustrator
- zerschneiden: Slice-Werkzeug
- DATEI-Menü | Für Web und Geräte speichern ...
Farbmanagement
Die meisten Browser unterstützen z.Z. nur sRGB.
„Für Web und Geräte speichern" erzeugt kompatible Bilder
Um Überraschungen zu vermeiden sollte der RGB-Arbeitsfarbraum auf sRBG gestellt sein:
BEARBEITEN-Menü | Farbeinstellungen...
Auflösung
- Verbreitetes Mißverständnis
- 72 dpi verwenden!
- Tatsache
- Diese Auflösung wird nur beim Drucken aus Pixelgrafikprogrammen (z.B. Photoshop) und Platzieren in Layoutprogrammen berücksichtigt.
- Maße
-
Beachten Sie nur die Pixel-Maße!
Ein Datei-Pixel wird ein Pixel auf dem Monitor. - Kontrolle
-
Photoshop: Zoomstufe 100%
Illustrator: ANSICHT-Menü | Pixelvorschau - Skalierung auf der Internetseite
- Ohne Grund bitte Vermeiden!
- Breite und Höhe angeben
-
als HTML-Tag: veraltet
als CSS-Eigenschaft: praktisch, damit sich nicht das Layout verschiebt, wenn erst der Quelltext und später die Bilder vom Webserver geladen werden.
Muster im Illustrator erstellen
- Neue Datei z.B. 100 x 100 Pixel, Maßeinheiten auf Pixel stellen
-
Grafik
- nicht größer als (hier) 100 Pixel breit/hoch
- über den Rand hinausragend
- kopieren
- BEARBEITEN-Menü | Davor einfügen STRG + F
- Duplikat um (hier) genau 100 Px verschieben:
- FENSTER-Menü | Transformieren ...
- Im Feld für die x- bzw. y-Position hinter den vorhandenen Wert +100 bzw. -100 schreiben
- Farbe? Transparenz? Kontur?
- DATEI-Menü | Für Web und Geräte speichern ...
help.adobe.com: Erstellen von Mustern mit unregelmäßigen Strukturen
Tipp: Kombinieren Sie Muster mit Verläufen
Online-Generatoren für Muster
Bildlink, Umrandung entfernen
HTML: <a href=" ... "><img ...
CSS: a img { border:none}
Bilder frei auf der/den Seite(n) verteilen
Im Template bzw. HTML auf jeder Seite, innerhalb und/oder außerhalb des wrappers ein oder mehrere Extra-Divs
<div id="extraXX"></div>
CSS: Breite, Höhe, Position, Hintergrundbild
individuelle Bilder auf den einzelnen Seiten: <body id="seiteXX" class="bereichXX">
Seiten-Nummer und Bereichs-Nummer kann man mit dem Template eines CMS generieren.
CSS:
#seiteXX #extraXX { }
.bereichXX #extraXX { }
Statt extra <div> kann man in zeitgenössischen Browsern auch mit :before bzw. :after { conten:url(bild.jp) } ohne HTML-Veränderungen das Bild platzieren.
Workshops, Tutorials, Baukästen
Polaroids: www.zurb.com/playground/css3-polaroids
cssglobe.com/easy-slide, easy-image-zoom, workshop.rs/projects/coin-slider
Bild ohne Bild, nur CSS3 „gezeichnet“: drawing-calendar-icon-with-css3