Bildverwaltung
Bildverwaltung
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.
HINWEIS: Ein einmal hoch geladenes Bild kann also an mehreren, auch an sehr vielen unterschiedlichen, Stellen Ihrer Website zum Einsatz kommen.
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.
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...
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...
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":
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.
- ö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)
- 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“
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?“.
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.
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).
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.
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?“.
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.
- 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
Zu jeder Bildgröße wird das Pixelformat angezeigt und ein Feld für die Auswahl einer Datei.
- 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?“.
Lesen Sie nun die Frage „Welches Format müssen hochgeladene Bilder haben?“ und beachten Sie die dort aufgeführten Empfehlungen.
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.
Wenn Sie das Ergebnis im Frontend überprüfen, lesen Sie bitte auch die Frage „Mein Bild im Frontend nicht aktualisiert - was kann ich tun?“
- 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.


