schließen

URL dieser Frage


Bildverwaltung

Bildverwaltung

Im Modul „Bilder“ werden die Bilddateien, die Sie auf den Server laden, in meist mehrere für das Layout Ihrer Website benötigte Bildgrößen herunter gerechnet. Welche Bildgrößen dies sind und wie viele hängt ab vom Layout Ihrer Website und der Anzahl der möglichen Einsatzbereiche für Bilder.
 
Im Modul „Banner / Buttons“ hingegen werden die hochgeladenen Bilder nicht verkleinert und nicht vergrößert. Die Bilddateien im Modul „Banner / Buttons“ liegen immer nur in genau der Version vor, in der sie hochgeladen wurden.
 
Die Bilder im Modul „Banner / Buttons“ sind i.d.R. für Spezialfälle gedacht. Ein typischer Anwendungsfall für das Modul „Banner / Buttons“ sind großflächige Kopfgrafiken im Seitenkopf des Layouts Ihrer Website.
 
Im folgenden Kapitel wird nicht das Modul „Banner / Buttons“ behandelt, sondern das Modul „Bilder“, das automatisch die benötigten Größenvarianten einer hochgeladenen Bilddatei erzeugt.
Alle Bilder, die im CMS-Umfeld über die zentrale Bildverwaltung hochgeladen werden, stehen in einem Sammelpool zur Verfügung, der als Bildarchiv dient. Bilder aus diesem Sammelpool können Sie an beliebig an allen Stellen einsetzen, an denen Sie ein Bild prinzipiell einfügen können.

HINWEIS: Ein einmal hoch geladenes Bild kann also an mehreren, auch an sehr vielen unterschiedlichen, Stellen Ihrer Website zum Einsatz kommen.

Wenn Sie ein neues Bild zunächst in die zentrale Bildverwaltung hochladen wollen, ohne es auch direkt an einer bestimmten Stelle einzubinden, wählen Sie „Serverinhalt“ – „Bilder“ – „neues Bild“. Klicken Sie auf „durchsuchen“ um das Bild von Ihrer Festplatte auszuwählen. Zum empfohlenen Format des Bildes lesen Sie bitte die Frage „Welches Format müssen hochgeladene Bilder haben?“.
 
Geben Sie außerdem den Alt-Text und optional einen Bildtitel und eine Bildunterschrift ein und klicken Sie auf „absenden“. Das Bild steht dann im zentralen Bilderpool Ihres CMS zur Verfügung, ist aber noch nirgendwo auf der Website eingebunden.

TIPP: Fast immer können Sie neue Bilder direkt dort erzeugen, wo Sie sie einbinden wollen. Wenn Sie beispielsweise einem Textabsatz auf einer CMS-Seite ein Bild hinzufügen wollen oder in einem Fotoalbum ein neues Bild ergänzen wollen, öffnet sich ein Popup mit der Bildersuche. In diesem Popupfenster können Sie auf das Icon „leeres Blatt“ klicken, um direkt im Popupfenster ein neues Bild hochzuladen und dieses dann direkt an der betreffenden Stelle zu verwenden.

Wählen Sie im Backend „Serverinhalt“ – „Bilder“ – „Bilder suchen“ und geben Sie in der Suchmaske ein Suchkriterium ein. Es genügt, Textfragmente des gesuchten Bildes einzugeben, die Suche startet dann sofort automatisch. Wenn Sie das gesuchte Bild nicht finden oder nicht sicher sind, welches das gesuchte Bild ist, lesen Sie bitte die Frage „Wie kann ich ein Bild in der Bildverwaltung eindeutig finden?“.
 
Klicken Sie bei dem betreffenden Bild auf das Symbol „Hammer & Schraubenschlüssel“. In der folgenden Ansicht können Sie das Bild neu hochladen – also das Motiv überschreiben – und/oder die Textangaben zum Bild ändern.

ACHTUNG: Wenn das Bild an mehreren Stellen auf Ihrer Website im Einsatz ist, wirkt sich die Änderung natürlich an sämtlichen Stellen aus, an denen das Bild eingebunden ist.

TIPP: Fast immer finden Sie jeweils dort im Backend, wo ein Bild im Einsatz ist, auch das Symbol "Hammer & Schraubenschlüssel" um direkt auf die Eigenschaften dieses Bildes zugreifen zu können. Der Weg über die Suche ist daher häufig nicht notwendig.

Das Dateiformat...

Bilder, die Sie in die zentrale Bildverwaltung von teContentMS hochladen, dürfen eines der Formate JPG, PNG und GIF haben.

ACHTUNG: GIF-Dateien unterliegen Restriktionen bei der Anzahl der verfügbaren Farben. Dies kann die Qualität der Bilder extrem verschlechtern. Nutzen Sie GIF nur, wenn Sie das GIF-Format kennen und genau wissen, was Sie tun.

Die Bildgröße...

Damit der Upload Ihrer Bilder nicht zu lange dauert, sollten die Dateien nicht zu groß sein. In der Regel genügen Dateien mit ca. 150-200 kB Größe.
 
Das CMS wird Ihr Originalbild nach dem Upload in die benötigten Bildgrößen herunterrechnen. Achtung – verwechseln Sie dies nicht mit den „Bannern/Buttons/Infografiken", falls dieses Modul bei Ihnen installiert ist: Diese Bilder werden nicht heruntergrechnet.
 
Das Verkleinern der Bilder auf dem Server kann in bestimmten Fällen zu einer leichten Verschlechterung der Qualität führen. Insbesondere Bilder mit sehr scharfen Konturen (bspw. Landschaft mit Stromleitungen) können in der verkleinerten Version etwas unscharf werden.
 
Das beste Ergebnis erzielen Sie, wenn Ihr Bild eine Auflösung von 72 dpi besitzt und die Pixelgröße Ihres Originals in etwa dem größten auf Ihrer Website benötigen Bildformat entspricht.
 
Wenn Sie Ihr Bild mit einem Grafikprogramm als JPG-Datei abspeichern, achten Sie darauf, dass die höchste Qualität (=niedrigste JPEG-Kompression) ausgewählt ist.
 
Hier die JPG-Qualitätauswahl am Beispiel des Programms "Photoshop":
JPG-Qualität

TIPP: Wenn Sie bereits ganz sicher sind, dass das Bild an einer bestimmten Stelle nur sehr kleinformatig zum Einsatz kommt und die Bildlupe nicht benötigt wird, können Sie das Bild auch direkt sehr kleinformatig hochladen. Doch Achtung: Die Bildlupe dieses Bidles hat eine unzumutbare Qualität.

Anhand eines beliebigen anderen Bildes können Sie Pixelgröße einer Bildlupe selbst im Backend ermitteln. Lesen Sie dazu die Frage „Die Qualität eines Bildes auf meiner Website ist unbefriedigend - was kann ich tun?". Dort finden Sie eine Anleitung um ein unbefriedigendes Ergebnis bei den verkleinerten Bildern zu korrigieren.
Eine einfache Möglichkeit, ein Bild zu verkleinern, besteht mit dem Windows-Standard-Programm „Paint“. Sie finden es in der Regel im Startmenü unter „Programme“ – „Zubehör“.
 
  • öffnen Sie „Paint“ und wählen Sie „Datei“ – „öffnen“
  • navigieren Sie zu dem Ordner mit der gewünschten Bilddatei auf Ihrer Festplatte
  • klicken Sie auf das Icon „Ansicht“ und wählen Sie „Details“ aus
  • in der Dateiliste werden dann die Pixelmaße der Bilder in der Spalte „Abmessungen“ angezeigt (eventuell müssen Sie das Dateiauswahl-Fenster etwas verbreitern)
Auswahl Grafikdatei Paint
  • falls die Spalte „Abmessungen“ nicht angezeigt wird, klicken Sie mit rechts in die Spaltenüberschrift „Dateiname“ und wählen Sie in der Liste „Abmessungen“ aus. Sollte „Abmessungen“ hier fehlen, finden Sie den Punkt unter „weitere“
Auswahl Grafikdatei Paint2
Notieren Sie sich die unter „Abmessungen“ genannte Pixelgröße des Bildes oder merken Sie sie sich. Doppelklicken Sie das Bild, um es zu öffnen oder klicken Sie es an und wählen dann "öffnen".
 
Wählen Sie dann im Menü „Bild“ den Punkt „Strecken und Zerren“. Geben Sie hier nun die prozentuale Größe ein, auf die das Bild verkleinert werden soll.
 
Das Resultat sollte eher etwas zu groß als etwas zu klein sein. Geben Sie unbedingt für "Horizontal" und "Vertikal" den gleichen Wert ein, damit das Bild nicht verzerrt wird.
 
Nähere Informationen zum besten Bildformat finden Sie unter der Frage „Welches Format müssen hochgeladene Bilder haben?“.
Strecken und Zerren in Paint

ACHTUNG: Speichern Sie das Bild anschließend unbedingt mit der Funktion „Speichern unter…“ im Menü „Datei“ unter einem neuen Namen ab, um das Bild in der großen Version zu behalten. Überschreiben Sie also keinesfalls das große Bild auf Ihrer Festplatte mit der verkleinerten Version. Sie können das Bild später nicht wieder vergrößern.

Die Auflösung eines Bildes in „dpi“ bezeichnet die Punktdichte und bedeutet „dots per inch“, also „Punkte pro Inch“. Die englische Maßeinheit Inch lässt sich natürlich in Zentimeter umrechnen, so dass man die Auflösung eines Bildes auch in „Punkten pro Zentimeter“ angeben kann. Üblich ist jedoch die Angabe in dpi. Für die Verwendung im Web ist eine Auflösung von 72 dpi gebräuchlich. Um ein Bild in befriedigender Qualität ausdrucken zu können, sind 300 dpi sinnvoll.
 
Hintergrund der Angabe ist die Tatsache, dass digitale, pixelbasierte Bilder wie JPG-, PNG- oder GIF-Dateien aus Einzelpunkten („dots“) bestehen, die jeweils genau einen Farbwert haben. Durch die Vielzahl der Punkte mit unterschiedlichen Farbwerten ergibt sich für das menschliche Auge ein Bild. Da die Bildpunkte über die Höhe und Breite des Bildes gleichmäßig verteilt werden, spricht man auch von einem Raster bzw. von Rastergrafiken.
 
Die Auflösung hat entsprechend großen Einfluss auf die Qualität eines Bildes. Je niedriger die Auflösung, desto schlechter die Qualität. Stellen Sie sich im Extremfall ein Bild mit den Abmessungen 35 x 35 cm vor, das nur 8 Bildpunkte pro 35 Zentimeter misst. Dieses „Bild“ wäre vielmehr ein Gebilde wie ein Schachbrett. Das menschliche Auge würde kein Bild erkennen, sondern würde die (riesigen) Einzelpunkte wahrnehmen.
 
Ein digitales, pixelbasiertes Bild wie eine JPG-, PNG- oder eine GIF-Datei hat immer eine Größe in Form einer bestimmten Anzahl Bildpunkte und eine zugehörige Auflösung. Aus diesen beiden Faktoren errechnet sich die Größe des Bildes in Inch (die sich dann in cm umrechnen lässt).
 
Ein paar einfache Beispiele:
  • Ein Bild hat eine Auflösung von 72 dpi und hat eine Größe von 72 x 72 Bildpunkten. Das Bild hat dann folglich eine Größe von 1 x 1 Inch
  • Ein Bild mit einer Größe von 144 x 144 Bildpunkten und einer Auflösung von 72 dpi ist 2 x 2 Inch groß.
  • Ein Bild mit 720 x 720 Bildpunkten und einer Auflösung von 72 dpi ist 10 x 10 Inch groß.
  • Ein Bild mit 3000 x 2000 Bildpunkten und einer Auflösung von 300 dpi ist 10 x 6,6 Inch groß (3000 / 300 = 10; 2000 / 300 = 6,6).
Nehmen wir an, Ihnen liegt ein Bild vor mit einer Größe von 720 x 475 Bildpunkten und einer Auflösung von 72 dpi. Dieses Bild ist 10 x 6,6 Inch groß. Wenn Sie für dieses Bild die Auflösung auf 300 dpi erhöhen wollten, müsste die Punktzahl auf 3000 x 2000 Bildpunkte erhöht werden, um wieder die Abmessung von 10 x 6,6 Inch zu erreichen.
 
Das bedeutet, dass das Grafikprogramm, das diese Aufgabe übernehmen soll (dies kann auch das CMS sein, wenn Ihre Bilder beim Hochladen vergrößert werden müssen), 2280 Pixel pro „Bildpunktzeile“ und 1525 Pixel pro Bildpunktspalte hinzufügen muss. Das ist jeweils mehr als eine Verdreifachung der Anzahl der Bildpunkte.
 
Grafikprogramme versuchen hierbei, die Anmutung des Bildes weitgehend zu erhalten. Die fehlenden Pixel werden also mithilfe von Manipulationen und Berechnungen von Farbzwischenwerten hinzugefügt. Doch das Bild leidet bei diesem Vorgang massiv. Die Software muss sich die fehlenden Bildpunkte weitgehend „ausdenken“ – die Qualität des Bildes wird sich dabei massiv verschlechtern.
 
Das nachträgliche Vergrößern von Bildern ist daher prinzipiell keine wirkliche Option.
Hat ein Bild eine Auflösung von 3000 x 2000 Bildpunkten und eine Auflösung von 300 dpi, so können Sie in der Regel relativ problemlos in eine Auflösung von 72 dpi umrechnen: Bei 300 dpi war das Bild 10 x 6,6 Inch groß – um bei 72 dpi diese gleiche Größe zu haben, wird die Punktzahl auf 720 x 475 Bildpunkte herunter gerechnet. Zum Thema Auflösung von Grafiken lesen Sie bitte auch die Frage „Was bedeutet die Auflösung eines Bildes in dpi?“.
 
Das bedeutet aber auch, dass das Grafikprogramm, das diese Aufgabe übernimmt (dies kann auch das CMS sein, wenn Ihre Bilder beim Hochladen herunter gerechnet werden müssen), 2280 Pixel pro „Bildpunktzeile“ und 1525 Pixel pro Bildpunktspalte löschen muss, das sind jeweils mehr als zwei Drittel der Farbpunkte, die gelöscht werden.
 
Grafikprogramme versuchen hierbei, die Anmutung des Bildes weitgehend zu erhalten. Die überschüssigen Pixel werden also nicht nur gelöscht, sondern es werden auch darüber hinaus gehende Manipulationen der verbleibenden Bildpunkte und deren Farbwerte vorgenommen. Ein typischer Effekt ist jedoch, dass Bilder beim Verkleinern etwas unscharf werden oder scharfe Kanten (bspw. Stromleitungen bei einer Landschaftsaufnahme) pixelig oder unscharf werden.

TIPP: Wenn Sie mit dem Ergebnis eines Bildes im CMS unzufrieden sind, verkleinern Sie dieses zuerst mit einem Grafikprogramm auf Ihrem Computer und laden Sie es dann im CMS hoch. Eine genauere Anleitung finden Sie unter der Frage „Welches Format müssen hochgeladene Bilder haben?“.

Ja, Sie können die Bilddatei der Miniaturansicht gezielt mit einem anderen Motiv überschreiben. Das Format des Bildes muss aber exakt das gleiche bleiben. Es ist also nicht möglich, dass die Miniatur ein Querformat, die Bildlupe jeodch ein Hochformat ist.
 
Lesen Sie dazu die Frage „Die Qualität eines Bildes auf meiner Website ist unbefriedigend - was kann ich tun?" und befolgen Sie die Anleitung zum Austausch einer Größenvariante eines Bildes.
Wenn Sie ein Bild über die Bildverwaltung des Content Management Systems hochgeladen und auf einer Seite eingebunden haben, mit der Qualität des Ergebnisses jedoch unzufrieden sind, gehen Sie bitte wie folgt vor:
 
  • wählen Sie im Backend „Serverinhalt“ ->„Bilder“ -> „Bilder suchen“
  • geben Sie den Titel des Bildes oder anderen Suchtext ein, um das Bild zu finden
  • klicken Sie bei dem betreffenden Bild auf das Symbol Größenvarianten anzeigen
Bildverwaltung Größenvarianten
Auf der Folgeseite sehen Sie eine Aufstellung aller Größenvarianten, die das teContentMS von diesem Bild auf dem Server abgelegt hat. Wie viele Größenvarianten hier hinterlegt sind, hängt von der Konfiguration für Ihr CMS und Ihr Layout ab.
 
Zu jeder Bildgröße wird das Pixelformat angezeigt und ein Feld für die Auswahl einer Datei.
Bildverwaltung Größenvarianten
Wenn Sie mit der Qualität aller oder einzelner Größenvarianten unzufrieden sind, haben Sie zwei Möglichkeiten:
 
  • entweder Sie laden das Bild neu hoch und lassen das CMS alle Größenvarianten neu anlegen
  • oder Sie überschreiben gezielt einzelne Größenvarianten mit einer eigenen Datei

TIPP: Stellen Sie zunächst sicher, dass das Originalbild, das Sie hochgeladen haben, eine ausreichende Qualität hatte. Ein Originalbild mit qualitativen Defiziten wird niemals befriedigende Ergebnisse bei den herunter gerechneten Miniaturen erzielen. Bitte lesen Sie dazu die Frage „Welches Format müssen hochgeladene Bilder haben?“.

Um alle Größenvarianten des Bildes neu erzeugen zu lassen, notieren Sie sich das Pixelformat der größten Bildvariante in der Aufstellung des Bildvarianten. Klicken Sie dann auf das Symbol „Hammer & Schraubenschlüssel“, um zu den Einstellungen dieses Bildes zu gelangen.
 
Lesen Sie nun die Frage „Welches Format müssen hochgeladene Bilder haben?“ und beachten Sie die dort aufgeführten Empfehlungen.
Um einzelne Größenvarianten zu überschreiben, entnehmen Sie der Aufstellung der Größenvarianten das Pixelformat derjenigen Datei, die Sie überschreiben wollen. Im Beispiel oben hat bspw. die erste Bildgröße das Format 120 x 68 Pixel.
 
Legen Sie sich mit einem Grafikprogramm nun eine Datei an, die exakt in diesem Maß entspricht oder verkleinern Sie Ihr Originalbild auf exakt dieses Pixelmaß und achten Sie bereits bei diesen Arbeitsschritten in Ihrem Grafikprogramm auf die ausreichende Qualität des Ergebnisses. Nähere Informationen entnehmen Sie bitte der Hilfe Ihres Grafikprogramms.

TIPP: Sie können bei dieser Gelegenheit auch für die Miniaturansicht ein anderes Motiv wählen, als für die Bildlupe, so dass bspw. die Miniaturansicht einen Ausschnitt aus der Bildlupe zeigt.

Anschließend klicken Sie bei der gewünschten Bildgröße auf „durchsuchen“, wählen Sie Ihre neue Bilddatei aus und klicken Sie dann auf „absenden“. Es wird nun genau diese eine Größenvarainte des Bildes überschrieben.
 
Wenn Sie das Ergebnis im Frontend überprüfen, lesen Sie bitte auch die Frage „Mein Bild im Frontend nicht aktualisiert - was kann ich tun?“
Wenn Sie ein Bild im Backend ausgetauscht haben, die Aktualisierung im Frontend jedoch nicht angezeigt wird, versuchen Sie bitte folgende Lösungsansätze:
 
  • Stellen Sie sicher, dass Sie das Frontend im CR-Modus aufgerufen haben. Lesen Sie dazu die Frage „Meine Änderungen werden im Frontend nicht sichtbar" im Kapitel „Grundlagen".
  • aktualisieren Sie die entsprechende Seite im Browser durch Anklicken des Symbols „Aktualisieren" des Browsers oder durch Drücken der Taste „F5".
  • Klicken Sie das betreffende Bild mit der rechten Maustaste an und wählen Sie „Bild anzeigen". Das Bild öffnet sich im Browser als Vollbildansicht. Aktualisieren Sie das Bild durch Anklicken des Symbols „Aktualisieren" des Browsers oder durch Drücken der Taste „F5". Klicken Sie dann auf „zurück" (Pfeil links) des Browsers, um zur vorherigen Seite zurückzukommen. Aktualisieren Sie nun noch einmal diese Seite durch Anklicken des Symbols „Aktualisieren" des Browsers oder durch Drücken der Taste „F5"
  • Schließen Sie alle Browserfenster, in denen das Bild angezeigt wird und rufen Sie irgendeine völlig andere Website auf und löschen Sie dann den Cache Ihres Browsers (Firefox: [Strg]+[Umschalt]+[Entf]). Rufen Sie dann Ihre Website erneut auf und prüfen Sie erneut das betreffende Bild.