Fotos, Tutorial
Kommentare 9

Bilder im Internet – optimale Größe und richtiges Format

Foto einer roten Tulpe

Beim Surfen im Internet finde ich immer wieder Websites, in denen die Bilder nicht richtig dargestellt werden. Noch öfters passiert es, dass die Website die Bilder zu lange lädt. Wenn ich die Info unbedingt brauche, hole ich mir in der Zwischenzeit einen Kaffee. Meistens klicke ich aber weiter, weil ich genauso ungeduldig bin, wie andere Websurfer auch. Eigentlich schade.

Bilder im Internet – optimale Größe und richtiges Format sind sehr wichtig und funktionieren anders als beim Drucken. Wie Sie Fehler auf Ihrer Website vermeiden, zeige ich Ihnen im folgenden Beitrag.

Wählen Sie das richtige Bildformat

Für moderne Websites und Blogs verwendet man heute die Formate JPG und PNG. Für einige Anwendungen wird noch das GIF gebraucht. Als Sonderformat gibt es noch das ico (Windows Icon), das wir für den Favicon benötigen.

Das Format JPG, oder auch JPEG, kennen Sie bestimmt von Ihrer Digitalkamera. Das wird als Standardformat für Fotos verwendet. Für Websites benötigen Sie noch ein zweites Format, das sich für Grafiken, Logos oder Transparenz eignet. Hier hat sich das Format PNG durchgesetzt. Man unterscheidet zwischen PNG8 und PNG24. Früher verwendete man das Format GIF, heute wird es durch PNG8 abgelöst. Einzige Besonderheit des GIF Formats ist, dass er animierte Grafiken kann.

JPG GIF PNG8 PNG24
Farben 16,7 Mio 256 256 16,7 Mio
Transparenz nein teilweise ja ja
Verlustfrei nein ja ja ja
Farbverläufe radial nein nein ja
Farbflächen nein nein ja ja
Animation nein ja nein nein
Verwendung Fotos Animation Grafiken, Icons, transparente Bilder

Die Transparenz wird vom Internetexplorer erst ab Version 7 unterstützt. Wer mit IE6 und älter surft, bekommt keine korrekte Darstellung der Bilder.

Wählen Sie die richtige Bildgröße

Das Ziel ist, gute Bilder und Grafiken bei geringer Dateigröße zu erhalten. Die Größe spielt eine große Rolle beim Laden der Website, vor allem dann, wenn Sie eine Website oder ein Blog mit vielen Fotos haben. Nehmen Sie Fotos direkt aus der Kamera, ohne Sie vorher zu komprimieren, kommen Sie sehr schnell auf einige MB (Megabyte).

Der Besucher Ihrer Website wartet nicht gerne. Wenn sich die Website zu lange aufbaut, ist er weg, bevor die Seite vollständig geladen ist. Die Ladezeit lässt sich nicht pauschal angeben, da der „Transportweg“ sehr unterschiedlich ist. Nicht jeder hat bereits ein schnelles DSL zur Verfügung. Haben Sie schon Fotos per E-Mail verschickt? Das kann schon dauern, bis die MB’s alle durch sind.

Damit Sie den Zusammenhang besser verstehen, muss ich noch etwas ausholen. Das Wort Pixel kennen Sie bereits von Ihrer Digitalkamera. Ein Pixel (px) ist die Anzahl von Bildpunkten auf der Strecke von 1 inch = 2,54 cm. Bei einem Monitor mit 100% Ansicht (Zoom) entspricht ein Bildpixel einem Monitorpixel.

Je nach Qualität kann ein Foto zwischen 1 MB und 5 MB haben. Meine Fotos, mittlerer Qualität, mit ca. 1 MB haben 2560 x 1920 Pixel. Ein typischer Monitor von 20″ hat 1680 x 1050 Pixel. Das heißt, so ein großes Foto brauchen wir gar nicht. Was ist zu tun?

Ein kleiner Ausflug in die Technik. Wenn Sie einen Flyer oder Anzeige mit einem Foto zum Drucken geben, werden von Ihnen Fotos mit 300 dpi verlangt. In der Druckerwelt ist die Bezeichnung dpi (dot per inch) Standard. Wenn Sie einen Laserdrucker oder Tintenstrahldrucker haben, reicht für die Fotos eine Auflösung von 150 dpi und bei Monitoren eine Auflösung von 72  oder 96 dpi.

Medium Auflösung in dpi
Druck 300
Laser- / Tintendrucker 150
Monitor 72 oder 96

Wie Sie Bilder für Web bearbeiten

Um einen unnötigen Ballast zu vermeiden, müssen wir die Fotos verkleinern. Zuerst verkleinern Sie die Bildgröße und dann komprimieren Sie die Datei.  Anzumerken ist, dass die Fotos bei der Komprimierung im jpg Format einen Qualitätsverlust haben. Wenn Sie kein Fotograf sind und Ihre Werke präsentieren möchten, ist das weiter nicht schlimm. Je nach der gewünschten Bildgröße entscheiden Sie, welche Qualität für Ihr Bild ausreichend ist. Für die Bearbeitung der Fotos benötigen Sie ein Bildbearbeitungsprogramm.

Am einfachsten und schnellsten geht das mit Photoshop. Unter Datei wählen Sie für Web und Geräte speichern. Dann geben Sie die gewünschte Bildgröße in Pixeln an und wählen zwischen jpg und png Format aus. In der Vorschau sehen Sie 4 Vorschläge unterschiedlicher Qualität. Bei jedem Bild ist die Größe in KB und die Ladezeit angegeben. Wählen Sie eines aus und speichern es unter einem anderen Namen ab. Das Originalbild bleibt Ihnen erhalten.

Photoshop - Einstellungen zum Abspeichern

Photoshop – Einstellungen zum Abspeichern

Für diesen Beitrag benötige ich ein Bild mit 200 x 150 Pixeln. Für mein Foto mit der roten Tulpe habe ich jpg in mittlerer Qualität gewählt und erhalte ein Bild mit 11,1 KB. Ohne Bearbeitung hat das Bild eine Größe von 642 KB.

Sie arbeiten mit Gimp? Legen Sie die Größe des Bildes fest und gehen Sie auf Datei und Datei exportieren. Stellen Sie den gewünschten Dateityp, jpg oder png, ein. Bei jpg wählen Sie noch die Qualität. Speichern Sie das Bild unter einem anderen Namen ab.

Noch eins: Ich sehe viele Bilder im Internet, die verzerrt sind. Wie bei einem Fernseher, bei dem das Seitenverhältnis nicht richtig eingestellt ist. Wenn Sie ein Foto mit einem anderen Seitenverhältnis haben, als die gewünschte Größe auf der Webseite, müssen Sie das Foto entsprechend zuschneiden. Machen Sie eine Kopie des Originalbildes, wählen Sie zuschneiden und geben die gewünschte Größe in Pixeln ein. Wählen Sie einen Ausschnitt, der Ihnen am besten gefällt. Speichern Sie das Bild, wie oben beschrieben ab.

Haben Sie viele Bilder, die Sie auf einmal komprimieren müssen, wird das mit Photoshop etwas zeitaufwendig. Dafür gibt es diverse Tools, die eine Stapelverarbeitung ermöglichen.

Nicht vergessen…

Haben Sie auf Ihrer Website nur eigene Fotos? Sobald Sie Bilder Dritter verwenden, müssen Sie die Urheber- und Nutzungsrechte beachten. Informieren Sie sich, wo Sie diese Angabe machen müssen. Bei den Stock Photo Anbietern finden Sie das in den AGBs. Fotografen und andere Quellen fragen Sie am besten direkt an. Ich empfehle Ihnen, auch eigene Bilder im Impressum anzugeben. Schließlich sind das Ihre Bilderrechte. Das können Sie direkt unter dem Bild, am Ende des Beitrags oder im Impressum angeben.

 Fotos: © Kristina Marino

9 Kommentare

  1. Oh Ja Kristina,

    Sehr aufschlußreich dein Artikel, der beantwortet ein paar offene Fragen.
    Sehr schön und verständlich geschrieben.
    Gimp ist ein kostenloses Programm um Bilder zu bearbeiten, das habe ich auch schon öffters gehört.

    Du nimmst Photoshop, wenn man damit umgehen kann geht es schnell und einfach hmm 🙂 Leider kenne ich beide Programme nur vom Namen, das muß ich dann auch noch ändern. Lernen..lernen und lernen

    Super mach weiter so Gruß Reiner

    • Hallo Reiner,
      es freut mich, dass dir der Artikel weiter helfen konnte.
      Gimp ist ähnlich, wie Photoshop. Zu Gimp gibt es viele Tutorials auch als Video. Photoshop ist recht teuer und zum Betreiben eines Blogs nicht notwendig. Auf meinem Notebook habe ich auch Gimp, benutze ich aber nicht so oft, da der Bildschirm zu klein ist. Gimp kann ich aber trotzdem empfehlen, es bietet viele Möglichkeiten zur Fotobearbeitung.
      Zum Komprimieren und zuschneiden von Fotos gibt es noch andere kostenlose Programme, mit denen habe ich aber kaum Erfahrung, Vielleicht werde ich aber trotzdem eine Liste zusammenstellen.
      Für das „Wasserzeichen“ gibt es auch spezielle Programme, nur mit den kostenlosen Versionen war ich nicht zufrieden. Eine Bezahlversion ist eher für Fotografen, die viele Bilder signieren müssen.

      Viele Grüße
      Kristina

  2. Hallo,
    beide Programme erfordern für mich als Bildbearbeitungs-Laien schon umfangreiche Einarbeitung. Eine relativ leicht zu bedienende freie Software ist „Irfanview“, mit der ich die Bilder für unsere Hotel-Webseite immer schnell reduzieren kann

    • Hallo Hans,

      zum Komprimieren von Bildern gibt es verschiedene kostenlose und kostenpflichtige Tools. Die vorgestellte Software bietet mehr als nur das Komprimieren von Bildern.

      Viele Grüße
      Kristina

  3. Es gibt sogar einen preiswerten Online-Dienst, der das Bild automatisch auf die notwendigen Web optimierten Grössen je nach Browser etc umrechnet. Wenn man seine Webseite professionell betreibt oder häufig die Bilder wechselt, ist das sowohl für die Admins sowie für die Benutzer absolut genial!
    Die Webseite mit weiteren Infos ist cloudimage.io, es gibt dort auch eine kostenlose Testversion.
    Viel Spass damit! 🙂

  4. Hallo Eva,

    ich verstehe, dass du als Fotografin andere Qualitätsansprüche hast. Mit Lightroom kenne ich mich leider gar nicht aus. Ein Tipp von mir: schau auf dem Blog http://farbsalat.de/. Nina ist selber Fotografin und kann die bestimmt weiter helfen.

    Viele Grüße
    Kristina

    • Hall Ingo,

      richtig ist, dass im Web und Monitoren in ppi (Pixel per Inch) gerechnet wird. Die Angabe Monitor bezieht sich auf gängige Desktop-Monitore, nicht auf Retina-Displays von Apple. Tatsache ist ein Bold von 100px x 100px ist immer gleich groß, egal welche Auflösung ich nehme. Im Web reicht bei den meisten Bildern eine Auflösung von 72/96 ppi aus.

      In meinem Artikel geht es primär darum, den vielen Websitebetreiber, die Fotos direkt aus der Kamera verwenden, zu erklären, dass diese Bilder viel zu groß für Web sind und vorher komprimiert werden müssen.

      Der t3n Artikel ist etwas irreführend, da die Bilder keine bestimmte Auflösung haben müssen. Tatsache ist, im Printbereich werden höhere Auflösungen verlangt und meine Angaben sind die Mindestanforderungen.

      Viele Grüße
      Kristina

Schreibe einen Kommentar

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