Bilder machen eine Website anschaulich. Unbearbeitete Fotos aus dem Smartphone können aber mehrere Megabyte gross sein und unnötig lange laden. In dieser Folge lernst Du die Medienverwaltung von Joomla kennen und bereitest Bilder so auf, dass sie zu ihrem Einsatz im Beitrag passen. Ausserdem schauen wir uns Ordner, Dateinamen und PDF-Dateien an.
Für die grundlegenden Schritte brauchst Du kein zusätzliches Bildbearbeitungsprogramm. Joomla kann Bilder direkt in der Medienverwaltung drehen und verkleinern. Für einen genaueren Vergleich von Bildqualität und Dateigrösse zeige ich Dir am Ende zusätzlich Squoosh.
Die Medienverwaltung öffnen
Wähle im Backend Inhalt → Medien. Je nach Dashboard gibt es auch einen direkten Medien-Link. Links siehst Du die verfügbaren Speicherbereiche und Ordner, rechts deren Inhalt.
In der im Video gezeigten Installation gibt es Bereiche für Bilder und Dateien. Welche Bereiche bei Dir erscheinen, hängt von der Einrichtung Deiner Website ab. Verwende den Bildbereich für Fotos und Illustrationen und einen passenden Dateibereich beispielsweise für PDFs. Entscheidend ist eine verständliche Ablage, die Du später wiederfindest.
Die Medienverwaltung ist keine geschützte Dokumentenablage. Die üblichen Mediendateien werden direkt vom Webserver ausgeliefert. Ein Bild oder PDF wird deshalb nicht automatisch privat, wenn Du es in einem nur für angemeldete Benutzer sichtbaren Beitrag verlinkst. Für vertrauliche Dokumente braucht es eine ausdrücklich dafür eingerichtete Zugriffslösung. Diese Trennung beschreibt auch die Joomla-Dokumentation zur Medienverwaltung.
Ordner anlegen und Dateien hochladen
Wähle zuerst den Ordner, in dem Du arbeiten möchtest. Über Neuen Ordner erstellen legst Du bei Bedarf eine Unterteilung an. Im Video verwenden wir einen eigenen Ordner für Testbilder. Für eine richtige Website sind beispielsweise Themen oder Projekte als Ordnernamen hilfreich.
Über die Ordnernavigation wechselst Du in einen Unterordner oder wieder eine Ebene zurück. Kontrolliere den aktuellen Pfad vor dem Upload. So landen neue Dateien direkt am richtigen Ort und müssen später nicht verschoben werden.
- Öffne den gewünschten Zielordner.
- Klicke auf Hochladen und wähle die Dateien auf Deinem Computer aus. Alternativ kannst Du sie in den Uploadbereich ziehen, wenn die Ansicht dies unterstützt.
- Warte, bis die Dateien in der Übersicht erscheinen.
- Prüfe Vorschau, Namen und Dateigrösse, bevor Du sie in einem Beitrag verwendest.
Welche Dateitypen und Grössen Joomla annimmt, hängt von den Medien- und Servereinstellungen ab. Wird eine Datei abgelehnt, prüfe Format und Grösse. Schalte Schutzprüfungen nicht pauschal ab, um einen einzelnen Upload zu erzwingen.
Bildabmessungen und Dateigrösse unterscheiden
Ein Foto hat Abmessungen in Pixeln, beispielsweise 3000 Pixel Breite. Daneben hat es eine Dateigrösse in Kilobyte oder Megabyte. Beide Werte hängen zusammen, sind aber nicht dasselbe. Motiv, Dateiformat und Komprimierung beeinflussen ebenfalls, wie viel Speicher ein Bild benötigt.
Im Video sind die ursprünglichen Handyfotos mehrere Megabyte gross. Für ein kleines Einleitungsbild wäre das unnötig viel. Wenn das Template ein grosses Bild nur klein anzeigt, wird dadurch nicht automatisch eine kleinere Datei übertragen. Bereite deshalb eine zum Einsatzzweck passende Bilddatei vor.
Präzisierung zu den Beispielwerten: Es gibt keine für jede Website richtige Breite. Entscheidend sind die tatsächliche Darstellungsgrösse und die gewünschte Schärfe, auch auf hochauflösenden Bildschirmen. Die im Video verwendeten 500 Pixel für eine kleine Vorschau und die grössere Version mit rund 1200 Pixeln sind Arbeitsbeispiele. Prüfe sie an Deinem eigenen Layout.
Ein Bild in Joomla drehen
Öffne beim gewünschten Bild das Menü mit den drei Punkten und wähle Bearbeiten. Du gelangst zur Bildbearbeitung mit Funktionen wie Zuschneiden, Grösse ändern und Drehen. Die Joomla-Hilfe zur Medienübersicht erklärt die Aktionen des Bildmenüs.
Ist ein Foto falsch ausgerichtet, wechsle zu Drehen und wähle den passenden Winkel. Prüfe die Vorschau und speichere erst, wenn die Ausrichtung stimmt. Kontrolliere danach auch die Darstellung im Beitrag, denn Bildinformationen aus einer Kamera können die ursprüngliche Orientierung beeinflussen.
Bewahre das Original vorher auf Deinem Computer auf oder arbeite mit einer eigenen Kopie. Änderungen an derselben Mediendatei können sich auf alle Beiträge auswirken, die diese Datei verwenden. Die Medienbearbeitung sollte deshalb nicht als Ersatz für eine Originalablage dienen.
Eine kleinere Bildversion erstellen
Wechsle in der Bildbearbeitung zur Grössenänderung. Gib die gewünschte Breite oder Höhe ein und achte darauf, dass das Seitenverhältnis erhalten bleibt. Bei einer proportionalen Verkleinerung passt sich die andere Abmessung entsprechend an. Ein Hochformat wird damit nicht versehentlich zu einem gestauchten Querformat.
Für die kleine Vorschau reduzieren wir im Video die Breite deutlich. Prüfe nach dem Speichern die Dateigrösse erneut. Allein die Verringerung der Pixelzahl kann bereits viel bewirken. Vergrössere ein zu kleines Vorschaubild später nicht wieder für eine grosse Darstellung. Erstelle die grössere Variante aus dem Original.
Wenn Du das Bild zuschneidest, veränderst Du zusätzlich den sichtbaren Ausschnitt. Das ist eine gestalterische Entscheidung: Achte darauf, dass wichtige Teile des Motivs erhalten bleiben. Reines Verkleinern reduziert hingegen die Abmessungen des gesamten Bildes.
Die Qualität bewusst wählen
Bei verlustbehafteten Formaten wie JPEG kannst Du über die Qualität beeinflussen, wie stark das Bild komprimiert wird. Eine niedrigere Einstellung kann eine kleinere Datei ergeben, macht aber unter Umständen sichtbare Spuren im Bild. Besonders feine Strukturen, Kanten oder Schrift reagieren empfindlich.
Ergänzung zum Video: Ein Wert von 50 Prozent ist keine allgemeine Empfehlung. Er bedeutet auch nicht, dass die Dateigrösse halbiert wird. Die Wirkung hängt vom Bild und vom verwendeten Werkzeug ab. Im Video zeigt gerade der spätere Vergleich mit Squoosh, dass eine starke Komprimierung sichtbar werden kann.
Vergleiche das Ergebnis in einer sinnvollen Darstellungsgrösse mit dem Original. Arbeite für weitere Varianten wieder vom Original aus. Wenn Du eine bereits stark komprimierte JPEG-Datei mehrfach neu speicherst, können sich Qualitätsverluste summieren. Die im Video gezeigten Dateigrössen sind Beispiele und keine garantierten Zielwerte für jedes Foto.
Verständliche Dateinamen vergeben
Benenne Bilder möglichst vor der Einbindung in einen Beitrag. Ein Name wie ahornblatt-im-regen-thumb.jpg ist verständlicher als ein automatisch erzeugter Kameraname. Der Zusatz «thumb» kennzeichnet hier die kleine Vorschau. Eine grössere Variante kann einen entsprechend eindeutigen Namen erhalten.
Verwende ein einfaches, einheitliches Muster mit Wörtern und Bindestrichen. Leerzeichen können in einer Webadresse als %20 erscheinen. Das ist eine normale Kodierung und für sich allein kein Fehler. Ein Name ohne Leerzeichen ist im Alltag trotzdem leichter zu lesen und weiterzugeben.
Lass die zum Dateiformat gehörende Endung stehen. Ein JPEG wird durch das Umbenennen der Endung nicht zu einem anderen Bildformat. Wähle ausserdem Namen, die den Inhalt sinnvoll beschreiben, ohne lange Wortlisten für Suchmaschinen anzuhängen.
Einleitungsbild und vollständiges Beitragsbild zuordnen
Öffne den gewünschten Beitrag und wechsle zu Bilder und Links. Dort kannst Du ein Einleitungsbild für die Übersicht sowie ein vollständiges Beitragsbild für die Detailansicht auswählen. Im Video verwenden wir dafür eine kleinere und eine grössere Variante desselben Motivs.
Wähle beide Dateien bewusst aus und ergänze passende Alternativtexte. Speichere den Beitrag und kontrolliere anschliessend die Blogübersicht und den geöffneten Beitrag im Frontend. Die tatsächliche Ausgabe hängt vom Template und seinen Einstellungen ab. Prüfe deshalb, ob beide Bilder an der erwarteten Stelle und in der passenden Grösse erscheinen.
Nach dem Umbenennen Verknüpfungen korrigieren
Im Video wird ein bereits verwendetes Bild nachträglich umbenannt. Danach kann die bisherige Bildzuordnung ins Leere führen: Der Beitrag verweist noch auf den alten Dateipfad, während die Datei nun anders heisst.
Öffne in diesem Fall den Beitrag, wähle das umbenannte Bild erneut aus und speichere die Änderung. Kontrolliere alle Stellen, an denen die alte Datei verwendet wurde, beispielsweise Einleitungsbild, vollständiges Beitragsbild oder ein Bild mitten im Text. Allein das erneute Speichern ohne korrigierte Bildauswahl repariert den alten Pfad nicht zuverlässig.
Dasselbe Problem kann beim Verschieben in einen anderen Ordner entstehen. Eine überlegte Benennung und Ablage vor der Veröffentlichung spart deshalb spätere Korrekturen.
PDF-Dateien und Bilder im Text verwenden
PDF-Dateien kannst Du ebenfalls in der Medienverwaltung ablegen. Öffne dafür den vorgesehenen Dateibereich, lade das Dokument hoch und vergib einen verständlichen Namen. Den Inhalt einer PDF bearbeitest Du mit dem passenden Dokumentwerkzeug; die Joomla-Bildbearbeitung ist dafür nicht gedacht. Kontrolliere beim Verlinken, dass die richtige und aktuelle Datei geöffnet wird.
Ein Bild lässt sich auch direkt innerhalb eines Beitragstextes einsetzen. Setze den Cursor an die gewünschte Stelle und öffne im Editor die Medienauswahl, im Video über CMS-Inhalt → Medien. Wähle das Bild, ergänze die vorgesehenen Angaben und füge es ein.
Ein sinnvoller Alternativtext beschreibt die Information, die das Bild an dieser Stelle vermittelt. Er hilft Menschen, die das Bild nicht sehen können. Er sollte deshalb schon beim Einfügen beachtet werden. Rein dekorative Bilder benötigen entsprechend ihrer Verwendung keinen beschreibenden Text; dafür ist eine korrekt leere Alternative vorgesehen. Prüfe die Möglichkeiten Deines Editors.
Bilder mit Squoosh genauer vergleichen
Zum Schluss verwenden wir Squoosh. Das Werkzeug ermöglicht eine Bildkomprimierung im Browser. Laut dem offiziellen Projekt erfolgt die Bildverarbeitung lokal im Browser.
- Öffne Squoosh und wähle das Originalbild aus.
- Stelle bei Bedarf unter der Grössenänderung passende Abmessungen ein.
- Wähle ein geeignetes Ausgabeformat und passe die Qualität an.
- Vergleiche Original und Ergebnis mit dem Schieberegler, besonders an feinen Details.
- Beobachte die angezeigte Dateigrösse und suche einen brauchbaren Kompromiss für Dein Motiv.
- Lade die optimierte Datei herunter, gib ihr einen passenden Namen und lade sie anschliessend in Joomla hoch.
Die im Video erreichte prozentuale Einsparung gilt für das gezeigte Ausgangsbild. Ein bereits optimiertes Bild lässt sich möglicherweise viel weniger verkleinern. Entscheide deshalb anhand des sichtbaren Ergebnisses und der tatsächlichen Dateigrösse.
Eine kleine Übung für Deine Website
Wähle ein eigenes Foto und bewahre das Original auf. Erstelle daraus eine kleine Vorschau und eine grössere Beitragsversion. Notiere jeweils Pixelabmessungen und Dateigrösse. Binde beide Varianten in einen Testbeitrag ein und kontrolliere die Übersicht sowie die Detailansicht auf einem grossen und einem kleinen Bildschirm.
Prüfe dabei auch Dateinamen, Alternativtext und Bildausschnitt. Wenn die Darstellung passt und keine unnötig grosse Originaldatei mehr geladen wird, hast Du einen brauchbaren Ablauf für die nächsten Bilder Deiner Website.
Diese Anleitung gehört zum Joomla 6 Videogrundkurs. Dort findest Du die weiteren Folgen in der passenden Reihenfolge.
