Foto in Seite einfügen

Bilder und Fotos sind ein wichtiger Bestandteil einer jeden Website. Sie geben dem Besucher einen ersten Eindruck davon, mit wem oder was er es eigentlich zu tun hat. Und wie heißt es doch so schön: Es gibt nur einen ersten Eindruck.

Ziel soll es sein, ein Foto in die Seite einzufügen, so dass die Seite anschließend so aussieht (der Text ist in diesm Fall egal):

Das Bild ist links ausgerichtet und wird von dem Text umflossen.

Bevor wir ein Foto einfügen können, müssen wir vorher ein paar vorbereitende Arbeiten vornehmen.

Format, Dateigröße und -namen

Ist qualitativ hochwertiges Bildmaterial vorhanden, geht es im nächsten Schritt darum, dieses für eine möglichst schnellen Anzeige auf der Website aufzubereiten. Entscheidend dafür ist hier besonders die Dateigröße. Je größer eine Bilddatei ist, desto länger dauert die Übertragung vom Server auf den Besucher-PC. Deshalb sollte die Dateigröße unter 200 Kilobyte liegen, damit die eigene WordPress-Website bei allen Nutzern trotz unterschiedlicher Internetgeschwindigkeiten zügig lädt. Nichts ist nerviger, als lange Ladezeiten beim Besuch einer Webseite.

Eine geeignete Dateigröße erreicht man, indem man seine Bilder in der Breite auf 800 bis 1.400 Pixel beschränkt und im JPG-Format abspeichert (Qualität ungefähr 80%). Jetzt noch einen sinnvollen Dateinamen für die Suchmaschinen vergeben, der das wichtigste Keyword beinhaltet, und die Vorbereitung für den Upload ist abgeschlossen:

  • Richtige Datenmenge: < 200 KB
  • Richtige Breite: 800 bis 1400 Pixel
  • Richtiges Dateiformat: PNG oder JPG (Qualität ca. 80%)
  • Richtiger Dateinamen: Beschreibung des Bildes.jpg
  • Keine Umlaute im Namen, da es bei einem möglichen Export der Datenbank (Umzug auf einen anderen Server) eventuell zu Problemen führen kann

Da es in WordPress mittlerweile mindestens 2 Editoren für den Seiteninhalt gibt, beschreibe ich auf der linken Seite das Vorgehen mit dem älteren Editor (Classic Editor) und auf der rechten Seite das Vorgehen mit dem so genannten Gutenberg-Editor.

Schritt 1: Platz für ein Bild schaffen

Das bild wird an die Stelle im Text eingefügt, in der gerade die Schreibmarke steht.

Schritt 2: Bild in die Mediathek hochladen

Es können nur Bilder/Fotos eingefügt werden, die auch in der Mediathek sind. Enweder sie sind schon in der Mediathek vorhanden oder müssen hochgeladen werden. Wird ein Foto in diesem Verarbeitungsschritt hochgeladen, wird es in der Mediathek automatisch dieser Seite/Beitrag zugeordnet. Das kann man dann in der Spalte “Hochgeladen zu” in der Mediathek sehen kann. Dadurch kann man später zuordnen, wo welche Bilder gebraucht werden.

Schritt 3: Größe und Beschriftung bestimmen

Bilder und Fotos werden grundsätzlich in der Originalgröße hochgeladen, egal in welcher Größe sie gebraucht werden. Früher wurden die Bilder immer in der Originalgröße zum Browser ausgeliefert, mit den gewünschten Angaben für Breite und Höhe. Der Browser musste dann das Bild vor der Anzeige erst auf die angegebene Größe skalieren. Neben der dafür erforderlichen Rechenleistung auf dem PC fiel die Übertragungsdauer ins Gewicht, die eine zu große Datei erforderte. Mittlerweile erstellt WordPress der Originaldatei noch zusätzliche Dateien in den Größen

  • 150×150 für ein Vorschaubild. Das Bild wird so skaliert, dass die Höhe 150 Pixel ist. Die Seiten werden dann weggeschnitten, so dass es auch 150 Pixel breit ist. Die Bildteile rechts und links gehen dabei verloren.
  • 300 Pixel für Höhe oder Breite als mittlere Größe. Entscheident ist hier welche Ausdehnung größer ist. D.h. die Breite oder die Höhe sind nach der Skalierung 300 Pixel, je nachdem welcher Wert größer ist.
  • 1024 Pixel für Höhe oder Breite für das Bild in groß. Auch hier wird das Bild anhand der größeren Ausdehnung skaliert.

WordPress nutzt bei der Auslieferung eine HTML-Anweisung, die es dem Browser ermöglicht, anhand seiner eigenen Displaygröße die passende Bildgröße zu laden. Dieses Verhalten ist speziell für mobile Geräte gedacht, die mit einem hochauflösenden Bild nichts anfangen können. Der Besucher der Seite spart dadurch auch Netzwerkvolumen.

Schritt 4: Text eingeben

Der Text (Lorem ipsum) ist hier ein so genannter Blindtext, da er nicht von Belang ist.

Schritt 5: Bild linksbündig machen

Der nächste Verarbeitungsschritt ist identisch für beide Editoren. Durch einen Klick auf das Bild erscheint ein Kontextmenü, durch das die Ausrichtung ausgewählt werden kann.

Schritt 5: Bild mit einem Link auf die Mediendatei versehen

Durch den folgenden Schritt wird der so genannte Lightbox-Modus aktiviert. D.h. wenn der Seitenbesucher mit der Maus über das Bild fährt, wird das Mauszeigersymbol zu einer Lupe mit einem Pluszeichen in der Lupe. Ein Mausklick vergrößert dann das Bild/Foto auf die Größe, die der Bildschirm/Smartphone-Display erlaubt.
Dazu muss als Link die “Medien-Datei” gewählt werden.