Bilder einbinden

Bilder sind ein wichtiger Baustein unserer Homepage: Bilder sind das Erste, was Besucherinnen und Besucher sehen, wenn sie eine Webseite besuchen. Das Auge erfasst Grafiken und Fotos schneller als Geschriebenes. Sie wirken sofort und sollen das Geschriebene auf eine sinnvolle Weise visualisieren und dadurch die in Worte gefasste Botschaft unterstreichen.

Bei der Verwendung von Bildern auf unserer Homepage gibt es einige wichtige Punkte zu beachten:

• Copyright
• Barrierefreiheit
• Bildqualität und Bildgröße
  
  

Copyright

Zunächst stellt sich die Frage: "Wer hat das Bild gemacht?"

• Falls Sie selbst das Bild gemacht haben, sind Sie Urheber des Bildes. Sie haben alle Rechte am Bild und entscheiden darüber, ob, wann und wie es veröffentlicht und verbreitet werden darf. Als Ausnahme ist hier jedoch das Recht am eigenen Bild zu nennen: Bilder, auf denen fremde Personen identifizierbar zu erkennen sind, dürfen Sie nur mit deren Zustimmung veröffentlichen. Das gilt grundsätzlich auch, wenn eine Gruppe von Personen auf dem Bild zu sehen ist. (Wobei hier Ausnahmen vorliegen könnten.)
  Ist eine städtische Abteilung der Urheber, schreiben Sie bitte in das Copyrightfeld:
  Abteilung, Stadt Neustadt.
  Beispiel: Pressestelle, Stadt Neustadt.
  Ausnahme: Stadtmarketing Neustadt (aufgrund der Doppelung des Wortes "Stadt").
  
• Falls Sie das Bild nicht selbst gemacht haben, sind Sie nicht der Urheber des Bildes. Sie dürfen es ohne die Zustimmung dieses Urhebers also weder veröffentlichen noch verbreiten. Haben Sie dessen Zustimmung, so ist es Ihnen erlaubt, das Bild gemäß der getroffenen Vereinbarung zu nutzen. In der Praxis wird diese Nutzung meist in Form von (kostenpflichtigen) Lizenzvereinbarungen geregelt.
  

Im iKISS-Medieneditor gibt es ein Feld, in dem Sie die Copyrightangaben vermerken müssen. Bitte tragen Sie den Urheber / die Urheberin des Bildes in das Copyright-Feld ein und setzen Sie den Haken davor! Der gesetzte Haken führt dazu, dass das Copyright auf der Website direkt im Bild erscheint. Die manuelle Vergabe des ©-Symbols ist nun nicht mehr notwendig. Dies geschieht automatisch durch das Setzen des Hakens.

Falls wir Bilder aus Bilddatenbanken verwenden müssen wir folgende Punkte beachten:

Canva:

• Copyrightschreibweise: Name des Urhebers einfügen via Canva.com
  

Bei der Verwendung von Pro-Inhalten in einem unbearbeiteten Format (d. h. ein einzelnes Foto auf einer Seite ohne darüber liegende Elemente) ist die Höchstgrenze von 480.000 Pixeln z.B. 600 x 800 px einzuhalten. Dadurch wird verhindert, dass andere Personen Pro-Inhalte von Ihrer Website extrahieren und weiterverwenden können.

Pixabay und andere freie Bilddatenbanken:

• Copyrightschreibweise: [von Beitragender] über Pixabay

Barrierefreiheit

Bilder auf Webseiten können für blinde und sehbehinderte Menschen, Menschen mit nachlassendem Sehvermögen und farbblinde Menschen eine Barriere darstellen. Um einem Menschen ohne Sehvermögen dieselben Informationen zu übermitteln wie einem sehenden Menschen, müssen die Nicht-Text-Inhalte mit Alternativtexten beschrieben werden.

Alternativtexte werden durch assistierende Technik lesbar dargestellt (Vergrößerungssoftware, Brille, Lupe), vorgelesen (Screenreader) oder in Brailleschrift umgewandelt (Braillezeile) und sind das wichtigste Mittel, um den blinden und sehbehinderten Menschen einen Zugang zum Bildinhalt zu ermöglichen. Mit Hilfe von Alternativtexten können Menschen mit eingeschränktem Sehvermögen die visuelle Information ergänzen und besser interpretieren.

Alternativtexte machen Bildinhalte allgemein zugänglicher, helfen zu verstehen, was abgebildet ist, und welche Bedeutung Bilder im Kontext einer Webseite haben. Sie machen Bildinhalte außerdem erschließbar für Suchmaschinen und Online-Übersetzer und werden in Browsern bei deaktivierter Bildanzeige anstelle der Bilder angezeigt.

Bitte fügen Sie im iKISS-Medieneditor im Feld „Alternativ-Text“ bei allen Bildern eine kurze Beschreibung ein, um unsere Website insoweit barrierefrei zu machen.

Ist ein Bild im Kontext der Webseite relevant, lässt sich ein guter Alternativtext leicht formulieren:

• Was genau ist auf dem Bild? Welche neue, interessante, wichtige Information liefert es, und zwar im Kontext der Webseite?

Bildqualität und Bildgröße

Bei der Bearbeitung von Bildern werden folgende Paramenter unterscheiden, die alle eine Rolle spielen:

• Bildformat = als was wird das Bild abgespeichert: jpeg, png, ...
  
• Bildgröße: die Breite und Höhe des Bildes in Pixel
• Dateigröße = Speichergröße in KB und MB
  
  

Welches Format sollten die Bilder im Web haben?
Das Dateiformat hat einen erheblichen Einfluss auf die Dateigröße eines Bildes. Das richtige Bildformat ergibt sich aus dem Zweck der Bildverwendung:

JPEG verwenden wir am besten für Fotos und wenn Farbtreue wichtig ist. Es hat den Vorteil, dass es sich sehr gut komprimieren lässt, bei gleichzeitig sehr guter Bildqualität. Daher verwenden wir dieses Format für alle Bilder auf der Website, mit Ausnahme von Bildern mit transparenten Hintergründen.

PNG eignet sich am besten für Logos und Grafiken mit transparenten Hintergründen. Es lässt sich ebenfalls komprimieren. Da dabei aber die Farben reduziert werden, eignet es sich vorwiegend nur für freigestellte Bilder mit transparentem Hintergrund. Denn transparente Hintergründe können nur im png Format erstellt werden.

Wie groß sollten Bilder für die Website sein?
Welche Bildgröße die richtige ist, kommt darauf an, wo die Bilder genau eingesetzt werden. Bitte laden Sie die Bilder im Idealfall nur so groß hoch, wie sie tatsächlich benötigt werden, denn oft werden Bilder als viel zu große Datei abgespeichert - das Ergebnis ist eine schlechte Ladezeit der Website.

Als Faustregel für Bilder auf der Website gilt: Große Bilder, die über die volle Breite gehen, sollten maximal 130 – 250 KB haben. Kleine Bilder ca. 50 KB.

Icons müssen ganz schnell geladen werden und sollten daher max. 10 KB haben.

Es ist nicht immer machbar, aber ein guter Richtwert, da wo es ohne Qualitätsverlust möglich ist. Bitte versuchen Sie, so nahe wie möglich an diese Werte zu kommen. Dies verbessert die Ladezeit  und verringert die Kosten - sowohl bei den WebseitenbesucherInnen als auch bei uns in der Stadtverwaltung, denn auch unserer Anbietervertrag berechnet sich partiell nach dem Datenvolumen.

Die richtige Auflösung für eine gute Bildqualität
Bilder sollten natürlich nicht unscharf oder verzerrt werden. Eine Komprimierung macht nur bis zu einem gewissen Grad Sinn, sodass die Auflösung des Bildes nicht darunter leidet. Das erfordert manchmal ein wenig Ausprobieren.

Wie Bilder für Web speichern?
Mit dem Windows-Standard-Programm paint.net haben Sie die Möglichkeit, die Bildgrößen zu verändern und sie schließlich für das Web komprimiert abzuspeichern.