Bilder in WordPress einfügen

Gute Bilder werten eine Website auf, schlechte vertreiben die Besucher und verärgern Google. In diesem Beitrag geht es um die Präsentation von Bildern in WordPress: Bilder einfügen, Bilder beschreiben, Bilder ausrichten und Bilder in den richtigen Rahmen setzen.

Bilder in WordPress einfügen

• Die WordPress-Mediathek
• Bilder auf Qualität prüfen
• Der Bild-Block fügt Bilder ein
• ALT-Text eingeben
• Bildbeschreibung hinzufügen
• Bild ausrichten
• Bild mit Link versehen
• Bild einrahmen
• Zoom und schwarzer Hintergrund
• Bildformate für WordPress
• Bildquellen für WordPress

Die WordPress-Mediathek

Der zentrale Speicherort für alle Bilder einer WordPress-Installation nennt sich Mediathek (auch Bibliothek genannt, wie ich gerade in meinem frisch installiertem Theme Twenty Twenty-Four sehe). Jedes Bild, das sich in WordPress befindet, befindet sich auch in der Mediathek. Wie kommt es da hin? Zwei Methoden sind gängig: Den direkten Bilder-Upload in die Mediathek oder das indirekte Einfügen über eine Seite oder einen Blogbeitrag.

Direkter Bilder-Upload in die Mediathek

So kommen deine Bilder per direktem Upload in die Mediathek:

1. Klicke im Menü links auf Medien / Neue Mediendatei hinzufügen.
2. Klicke im Hauptfenster rechts auf den Button Dateien auswählen.
3. Wähle das gewünschte Bild auf deinem Computer aus.

Je nach -> Hoster und dem Webspace, den du dort gemietet hast, ist eine maximale Dateigröße für den Medien-Upload festgesetzt. Bei mir sind es riesige 2 GB. Für ein Bild ist der Wert völlig irrelevant, aber Videos erreichen diese Grenze schnell.

Die Mediathek indirekt befüllen

So kommen deine Bilder indirekt in die Mediathek:

1. Wähle beim Erstellen einer Seite den Bild-Block aus.
2. Wähle das gewünschte Bild auf deinem Computer aus.

Bilder auf Qualität prüfen

In der Mediathek kannst du das Bild auf Qualitäts prüfen werden. Ergebnisse im Beispiel oben:

1. Dateiname des Bilds besteht aus irgendwelchen Zahlen.
   Problem: Zu wirr! Google kann damit nichts anfangen.
2. Die Dateigröße beträgt 494 kB.
   Problem: Zu groß! Eine so große Bilddatei verlängert unötig die Ladezeit der Seite.
3. Die Abmessungen betragen 2560 auf 1440 Pixel.
   Problem: Zu groß! Auch wenn den Besucher der Seite das Bild dann kleiner dargestellt wird: Die Ladezeit bleibt gleich. Die Abmessungen sind übergroß.

Tipp: Diesen Analyzer verwenden zur Qualitätskontrolle.

Was jetzt? Das Bild aus der WordPress-Mediathek löschen und erstmal optimieren! Wie das funktioniert, steht in diesem Beitrag: Bilder für WordPress optimieren.

Hausaufgaben erledigt? Dein Bild hat einen aussagekräftigen Dateinamen, die Dateigröße liegt unter 100 kB und die Abmessung unter 800 Pixel Breite? Dann geht es jetzt weiter mit dem Einfügen.

Der Bild-Block fügt Bilder ein

WordPress hat für alles einen -> Block. Der Bild-Block wird dir im Block-Inserter meistens schon bei den wichtigsten Blöcken angezeigt. Falls nicht: Gib Bild oben bei Suchen in die Blocksuche ein. Dann klickst du auf das Bild-Icon und wählst das gewünschte Bild aus der Mediathek oder lädst es direkt von deinem Computer aus hoch.

ALT-Text eingeben

Weiter geht es mit der Eingabe des sogenannten ALT-Texts. Dazu klickst du zunächst das gerade eingefügte Bild an. Damit weiß WordPress, was du jetzt ausgewählt hast. Dann geht es in der rechten Spalte weiter. Klicke auf den Reiter Block (nicht auf den Reiter Beitrag, denn es ja jetzt nur um dieses konkrete Bild). Anschließend gibst du im Feld ALTERNATIVTEXT eine kurze Bildbeschreibung ein. Zielgruppen für den ALT-Text sind:

• Blinde und sehbehinderte User
• Suchmaschinen

Der ALT-Text wird in Screen-Readern (Browser für blinde Menschen) vorgelesen, er erscheint aber nicht unter dem Bild. Dafür ist die Beschreibung da, also die Unterzeile eines Bilds. Die Beschreibung ist das, was bei einem Museum als kleines Täfelchen unter dem Rahmen hängt.

Bildbeschreibung hinzufügen

Um eine Beschreibung hinzuzufügen, klickst du zunächst auf das Bild selbst. WordPress blendet dann eine Werkzeugleiste ein. Das Feld für die Beschriftung öffnest du mit einem Klick auf das Icon mit dem Bilderrahmen und den drei horizontalen Punkten.

Bild ausrichten

Links neben dem Beschriftungs-Icon befindet sich das Icon für die Ausrichtung des Bilds: links, zentriert oder rechts. Entsprechend richtet sich auch die Bildbeschreibung aus.

Bild mit Link versehen

Du willst das Bild mit einem Link versehen? Dann klicke auf das Icon rechts vom Beschriftungs-Icon. PS: Das Icon soll eine Verkettung darstellen.

Bild einrahmen

Besser zur Geltung kommt jedes Bild mit einem schicken Rahmen. So fügst du einen hinzu:

• Klicke auf das betreffende Bild. Dann weiß WordPress, welchen Block zu bearbeiten möchtest.
• Klicke in der rechten Spalte auf Block.
• Klicke auf das Symbol mit dem „Halbmond“.
• Wenn du die Rundung an den Ecken selbst bestimmen willst, klicke auf Standard. (Wenn du keine indivuelle Rundung haben möchtest, klicke auf Abgerundet.)
• Probiere die Schieberegler bei Ränder und Radius aus, bis dir das Ergebnis gefällt.

Tipp zum einheitlichen Look: Wenn du bei allen Bildern einen einheitlichen Look haben willst, merke dir die eingestellten Werte. Auf standardthemes.de haben alle Bilder eine Rahmendicke von 2 Pixel und einen Radius von 11 Pixel.

Tipp zur Rahmendicke: Eine Rahmendicke von 1 bis 3 Pixeln ist okay, mehr würde ich nur in Sonderfällen anwenden.

Zoom und schwarzer Hintergrund

Deine User sollen in ein Bild hineinzoomen können? Und das Bild ohne Ablenkung vor einem edlen schwarzen Hintergrund betrachten können? Das lässt sich in WordPress schnell einrichten. Zunächst klickst du wieder auf das betreffende Bild und dann in der rechten Spalte oben auf Block.

Weiter geht es dann mit einem Klick auf das Zahnrad-Symbol. Dann siehst du unten bei Mit Klick erweitern einen Schieberegler.

Der Schieberegler Mit Klick erweitern ist narrensicher:

• Schieber nach links: Zoom und schwarzer Hintergrund deaktiviert.
• Schieber nach rechts: Zoom und schwarzer Hintergrund aktiviert.

Bildformate für WordPress

Welche Bildformate sind für WordPress am besten? Im Internet haben sich drei Formate durchgesetzt, und bei denen solltest du auch bleiben. So gehst du nämlich sicher, dass deine Bilder auch von allen Browsern und auf allen Endgeräten korrekt angezeigt werden. Diese drei heißen:

• JPG oder JPEG (der Unterschied ist unwesentlich)
• GIF
• PNG

Das JPG-Format

JPG oder auch JPEG steht für Joint Photographic (Experts) Group. Dieses Format ist das Standardformat für Bilder im Internet. In der Regel werden auch deine Handy- oder Kamerabilder im JPG-Format gespeichert, allerdings mit einer Größe 10 bis 20 MB. Das ist viel zu groß für den Einsatz im Internet, deshalb musst du Handybilder vor dem Upload komprimieren.

Das GIF-Format

GIF steht für Graphics Interchange Format. Was GIF, was JPG nicht kann? Animationen. Du kannst zum Beispiel mit Photoshop eine kurze Animation erstellen. Oder GIFs kostenlos online erstellen. Das fertige GIF lädst du dann ganz normal in die WordPress-Mediathek und präsentierst es über den Bild-Block. GIF-Animationen werden oft für Werbebanner eingesetzt. Was GIF noch kann (und JPG nicht): Transparenz. Wenn ein Bild etwas transparent überlagern soll, nimm GIF – oder PNG. Wofür du GIF nicht einsetzen solltest: Große Bilder mit einer breiten Farbpalette. Zur Präsentation von Kunstwerken ist GIF also

Das PNG-Format

PNG steht für Portable Network Graphics und ist ein Allroundformat für Bilder im Internet. Es beherrscht Transparenz und verlustfreie Kompression. Außerdem produziert es im Vergleich zu JPG kleinere Dateigrößen und im Vergleich zu GIF bessere Farben.

Trotzdem komrimiere ich lieber mit JPG, denn dafür steht in jedem halbwegs vernünftigem Bildbearbeitungsprogramm ein Schieberegler für den Qualitätsgrad zur Verfügung. Beim Format PNG hab ich den in meinem Bildbearbeitungsprogramm noch nicht gefunden. Neu entdeckt habe ich Online-Bildbearbeitungs-Dienste und spaßeshalber hab ich mal eine Online-Komprimierung auf das PNG-Format durchgeführt. Das Komprimierungs-Ergebnis war ernüchternd.

Das obige Bild hatte urprünglich 1 MB (1000 kB), nach der Online-Konvertierung immer noch über 164 kB. Ich habe es ausnahmesweise drin gelassen, aber das ist deutlich zu viel. Alles über 100 kB muss aus meinen Websites raus und nochmal eingedampft werden. Die Ladezeit von Bildern ist nunmal ein wichtiger Faktor für die Ladezeit jeder Seite. Was zu viel ist, ist zu viel. Für meine Besucherinnen und Besucher, und für Google.

Mein Fazit: Die JPG-Komprimierung ist narrensicher. Die PNG-Komprimierung ist abhängig von der Bildbearbeitungs-App und den Skills des Users. Vielleicht hab ich beim PNG-Export irgendwas falsch gemacht?

Bildquellen für WordPress

Noch ein Wort zu Bildquellen: Eine sehr gute Bildquelle ist immer noch das eigene Handy. Damit musst du dir auch weniger Gedanken über das Urheberrecht machen. Wer knipst, ist der Urheber. Trotzdem darfst du nicht alles knipsen, was dir vor die Linse kommt, denn es gibt auch noch da Persönlichkeitsrecht – sowie viele Grauzonen und urheberrechtliche Stolperfallen. Wenn du Bilder von Leonardo da Vinci fotografierst und veröffentlichst, ist das unproblematisch. Ist der betreffende Maler oder Fotograf aber quicklebendig oder noch nicht 70 Jahre verstorben, dann benötigst du für die Veröffentlichung deiner Fotografie seiner Bilder je nach genauen Umständen seine Lizenz. Und je nach Auffassung der Gerichte.

Der Fototapeten-Fall

Siehe dazu auch die Fototapeten-Urteile. Was war da los? Ein Vermieter hatte das Bild eines Zimmers, auf dem eine Fototapete die Wand verschönerte, im Internet veröffentlicht. Verklagt wurde er daraufhin auf Urheberechtsverletzung, genauer wegen „Zugänglichmachen“ des auf der Fototapete befindlichen Lichtbildes. Die Gerichte entschieden unterschiedlich. Das Landgericht Köln sah eine Urheberechtsverletzung gegeben, das Oberlandesgericht Düsseldorf nicht.

Bild von URL einfügen?

Eine Option, über die nie verwende, nennt sich „Von URL einfügen“. Bitte nicht verwenden, denn dafür gibt es für mich keinen vernünfigen Grund. Dagegen sprechen ein halbes Dutzend Gründe. Die wichtigsten: Wenn das betreffende Bild von der Ursprungsseite entfernt wird, fehlt es dann auch auf der eigenen Seite. Außerdem ist das Internet kein Ponyhof. Das Bild könnte ja auch ausgewechselt oder manipuliert werden.
Merke: Bilder in der eigenen Mediathek speichern, und gut ist es.

Ausnahme: Eventuell ist diese Option für Fotografinnen und Fotografen gedacht, die hochauflösende Bilder auf Online-Foto-Netzwerken lagern?

---