Bilder für's Web

Bilder für's Web

Bilder für's Web

Kann ich meine Bilder selber machen?

Jain!

Bilder für's Web

Wenn Du talentiert bist,
Dich in Computerprogramme einarbeiten kannst,
Geduld und Zeit hast.

Ja.

Bilder für's Web

Wenn's professionell sein soll,
Du wenig Zeit hast
und nicht viel Arbeit reinstecken willst.

Nein.

Bilder für's Web

Warum?

GrafikerInnen sehen mehr und kümmern sich um wichtige Kleinigkeiten.

FotografInnen wissen wie wichtig das richtige Licht ist.

Laien brauchen viel länger.

Bilder für's Web

Grafiken:

Fotos:

Bilder für's Web

  • Bilder liegen als Dateien auf dem Server
  • Es gibt verschiedene Bild-Datei-Typen
    • .gif . - Graphics Interchange Format
    • .jpg -Joint Photographic Experts Group
    • .png - Portable Network Graphics
    • .svg - Scalable Vector Grafic

Bilder für's Web

.gif

  • Grafik
  • 256 Farben
  • klein - lädt schnell
  • kann Transparenz
  • kann Animationen

Bilder für's Web

.jpg

  • Fotos
  • bis zu 16 Millionen Farben
  • Komprimierung (unnötige Daten werden gelöscht)
  • verschiedene Auflösungen
  • keine Transparenz

Bilder für's Web

.png

  • Fotos und Grafiken
  • bis zu 16 Millionen Farben
  • verlustfrei
  • Transparenz
  • Dateien sind größer

Bilder für's Web

jpg

png

gif

 

372kb

559kb

190kb

Bilder für's Web

110kb

60%       30kb

90%        42kb

jpg-Komprimierung

Bilder für's Web

 

Verschiedene Originalgröße.

Runter Rechnen geht,

rauf Rechnen geht nicht.

Bilder für's Web

Das ideale CMS

kann

Bildgrößen ans Gerät anpassen,

auf dem die Website ausgeliefert wird.

Bilder für's Web

.svg

  • Grafiken
  • bis zu 16 Millionen Farben
  • Keine Pixel, sondern Mathe
  • Transparenz
  • "immer scharf"

Bilder für's Web

svg  14kb

png  15kb

jpg  10kb

gif   10kb

Bilder für's Web

svg

png

jpg

gif

Bilder für's Web

Bilder für's Web

Was wofür?

gif
jpg png
svg
einfache Grafik
Foto Grafik und Foto Grafik
wenig Verlauf Verläufe Verläufe Verläufe
Transparenz - Transparenz Transparenz
Animationen - - Animationen
- Kompression - Klein
- - - skalierbar
"immer scharf"

Bilder für's Web

Bildbearbeitung am PC
(Wenn's nun doch sein muss?)

https://www.gimp.org/   jpg, gif, png

https://inkscape.org/       svg, png

Fotoberabeitung online

https://www.fotor.com/

https://pixlr.com/

https://picresize.com/de

Bilder für's Web

Wenn's nun doch sein muss?

Fotoberabeitung online

https://www.fotor.com/

https://pixlr.com/

https://picresize.com/de

 

Bilder für's Web

Warum schaut mein Bild im Druck
anders aus als am Monitor?

  • Monitor = Durchlicht
  • Druck = Auflicht
  • Monitore haben unterschiedliche Farbwärme
  • Die Auflösung macht den Unterschied.

Bilder für's Web

Bildauflösung

dpi = Bildpunkte pro Inch (~2,5cm)

(ppi = Lichtpunkte pro Inch)

Monitor alt: 72 - 96 dpi

Monitor Retina:  200 - 300

Smartphone, HD: 200 - 800

Bilder für's Web

Bildauflösung

Bildgröße 800x600

Wird auf einem 400px breitem Bildschirm schärfer als auf einem 1080px breiten.

 

Beispiel

Bilder für's Web

Druck

Mind. 300 dpi für Fotos -> Auflösung des menschlichen Auges.

Für große Plakate kann es weniger sein.

 

Bilder für's Web

Ausdrucken eines Webbildes
 

Kleines Format, 72 dpi

Am Bildschirm scharf.

Ausdruck auf Papier unscharf oder verpixelt.

 

Bilder für's Web

Remember
 

Bei Fotos immer die Originale aufheben.

SVG Grafiken sind immer scharf

 

 

Bilder für's Web

By Eva Broermann

Bilder für's Web

WebCafé

  • 532