Einführung und Lernziele
In dieser Lektion befassen wir uns näher mit der Mediathek. Wir lernen, wie man in der Mediathek navigiert und sie verwaltet, wie man zu einem Bild einen ALT-Text hinzufügt und warum es wichtig ist, Bilder zu optimieren.
Was ist die Mediathek?
Medien sind Bilder, Videoaufnahmen und Dateien, die du hochladen und auf deiner Website verwenden kannst. Du kannst Medien in Seiten und Beiträge einfügen, was eine entscheidende Rolle bei der Verbesserung der Gesamtleistung und Effektivität einer Website spielt. Deiner Bibliothek kannst du verschiedene Arten von Medien hinzufügen, darunter Fotos, Screenshots, Audiodateien, PDF-Dokumente, Tabellenkalkulationen, PowerPoint-Präsentationen und vieles mehr.
In der Mediathek navigieren
Wenn du deine Mediathek öffnest, wird sie in der Standard-Rasteransicht angezeigt. In der Rasteransicht sind Vorschaubilder von Bildern, Icons von Audios usw. in einer Rasterstruktur angeordnet. Suchst du etwas bestimmtes, kannst du deine Medien filtern. Oben neben dem Symbol für die Rasteransicht kannst du deine Medien zum Beispiel nach Medientyp und Datum filtern. Über das Dropdown-Menü „Alle Medienelemente“ kannst du Medientypen wie Bilder, Audiodateien, Videos, Dokumente und sogar Tabellenkalkulationen auswählen. Oder alle Medien anzeigen, die nicht mit Beiträgen oder Seiten verknüpft sind. Das bedeutet, dass sich die Medien in deiner Mediathek befinden, du sie aber noch nicht auf deiner Website verwendest. Du kannst auch die Filteroption verwenden, um nur Audiodateien anzuzeigen. Oder Dokumente, wie z. B. PDF-Dateien. Oder sogar Tabellenkalkulationen. Und dann kannst du natürlich auch wieder alle Medienelemente anzeigen lassen. Als Nächstes kannst du über das Dropdown-Menü „Alle Daten“ Bilder nach dem Upload-Datum anzeigen. So findest du schnell Medien, die du in einem bestimmten Monat hochgeladen hast. Wenn du auf „Mehrfachauswahl“ klickst, kannst du mehrere Medien gleichzeitig löschen. Eine weitere Möglichkeit, Medien zu suchen, ist das Suchfeld oben rechts. Gib beispielsweise Wörter aus der Beschreibung oder dem Dateinamen ein, etwa wenn du alle deine Bilder zum Thema Schuhe mit einer einfachen Suche anzeigen lassen willst. Du kannst deine Medien auch in der Listenansicht anzeigen. Wie der Name schon sagt, werden alle deine Medien in der Listenansicht untereinander aufgelistet. Du kannst auch den Dateinamen und den Dateityp sehen, z. B. PDF oder JPEG. Um Medien zu deiner Bibliothek hinzuzufügen, klickst du in der Seitenleiste oder oben auf „Neue Mediendatei hinzufügen“. Nach der Auswahl kannst du einzelne oder mehrere Dateien per Drag-and-drop auf die Seite ziehen oder die Option „Dateien auswählen“ verwenden.
Medien aus der Bibliothek hinzufügen
Wenn du beispielsweise mithilfe des Bild-Blocks oder des Galerie-Blocks Medien zu einer Seite oder einem Beitrag hinzufügst, kannst du Bilder direkt von deinem Computer oder direkt aus deiner Mediathek hochladen. Bei größeren Videos ist es besser, diese über YouTube- oder Video-Blöcke einzubetten, da dies Speicherplatz in deiner Mediathek spart und die Leistung verbessert.
Medien bearbeiten
Wenn du in der Bibliothek ein Bild öffnest, kannst du Attribute wie Alternativtext, Titel, Bildunterschrift und Beschreibung hinzufügen. Es ist wichtig, einem Bild immer einen ALT-Text hinzuzufügen. Der ALT-Text ist eine kurze Beschreibung eines Bildes für Benutzer, die das Bild nicht sehen können, und er ist auch gut für die Suchmaschinenoptimierung (SEO) deiner Website. Das Hinzufügen einer Beschreibung ermöglicht eine bessere Organisation und ein besseres Verständnis des Zwecks oder Inhalts des Bildes. Wenn du auf „Bild bearbeiten“ klickst, kannst du das Bild zuschneiden, skalieren oder seine Größe zur Bildoptimierung ändern. Die Abmessungen werden automatisch aktualisiert, sobald du die Höhe oder Breite änderst. Und keine Sorge: Wenn du „Originalbild wiederherstellen“ auswählst, kannst du das Bild in sein ursprüngliches Format zurückversetzen. Du hast auch die Möglichkeit, das Bild zu drehen oder zu spiegeln.
Bildoptimierung
Zum Schluss wollen wir noch kurz auf die Bildoptimierung eingehen. Es wird empfohlen, Bilder vor dem Hochladen in die Mediathek zu optimieren, um die Ladegeschwindigkeit der Seite zu verbessern und Speicherplatz zu sparen. Dazu können webbasierte Tools verwendet werden, zum Beispiel Websites wie TinyPNG, Bulk Resize oder Squoosh.app, um nur einige zu nennen. Denk daran, Bilder mit einem beschreibenden und relevanten Dateinamen zu speichern, bevor du sie deiner Mediathek hinzufügst. Dies hilft Suchmaschinen, den Inhalt des Bildes zu verstehen, was zu einer besseren Suchmaschinenoptimierung beiträgt. Suchmaschinen können Dateinamen als Faktor bei der Indizierung und Bewertung von Inhalten verwenden. Eine weitere Option ist die Verwendung eines Plugins zur Bildoptimierung. Im Plugin-Verzeichnis stehen verschiedene Plugins zur Bildoptimierung zur Auswahl. Wenn du das für deine Anforderungen geeignete Plugin gefunden hast, kannst du es installieren, aktivieren und die erforderlichen Schritte ausführen. Beide Methoden, die Verwendung eines webbasierten Tools oder eines Plugins, verbessern die Gesamtleistung, indem sie Bilder komprimieren, ohne die visuelle Qualität zu beeinträchtigen. Viel Erfolg bei der Nutzung der Mediathek, um deine Website auf die nächste Stufe zu heben!
Übungen
Ruf WordPress Playground auf und teste anhand der folgenden Aktivitäten dein Wissen:
- Lade zwei Bilder und eine PDF-Datei oder eine Tabelle in deine WordPress-Mediathek hoch. Wenn du keine Bilder auf deinem Computer hast, kannst du https://unsplash.com/ verwenden.
- Verwende die Filteroptionen in der Mediathek, um zunächst nur Bilder und dann nur Dokumente anzuzeigen. Kehr anschließend zur Anzeige aller Medienelemente zurück.
- Erstell einen neuen Beitrag oder eine neue Seite auf deiner WordPress-Website. Verwende die entsprechenden Blöcke (z. B. Bild-Block oder Galerie-Block), um mindestens ein Bild aus deiner Mediathek hinzuzufügen.
- Füg eine Video-URL von YouTube zum Video-Block hinzu.
- Wähl ein Bild aus deiner Medienbibliothek aus und bearbeite dessen Attribute, wie z. B. ALT-Text, Titel, Bildunterschrift und Beschreibung.
- Bearbeite ein Bild, indem du es skalierst und neue Abmessungen angibst. Stell anschließend das Originalbild wieder her.