Verwendung von Bildern auf Websites

Zuletzt aktualisiert am: August 16, 2019
You are here:
< Zurück

Übersicht

Die Auswahl der perfekten Bildgrößen für deine Website hängt von drei Hauptfaktoren ab:

  • Seitenverhältnis: Höhe und Breite des Bildes.
  • Spaltenlayout: Die maximale Breite deines Bildes.
  • Reaktionsfähigkeit: Die Änderungen, die an den Abmessungen deines Bildes auf verschiedenen Bildschirmgrößen vorgenommen wird.

In den folgenden Abschnitten werden wir dir detailliert zeigen, wie das Verständnis dieser drei Faktoren, zum Erreichen perfekter Bildgrößen für jeden Anwendungsfall genutzt werden kann.

WICHTIG: Large.network nutzt für die meisten Websites das “Divi” Theme. Entsprechend ist diese Anleitung für Websites die das “Divi” Theme nutzen optimiert.

Tipps zur Bildoptimierung

Verwende das Bildseitenverhältnis von Divi (16:9, 4:3, 3:4)

Das Seitenverhältnis drückt die proportionalen Abmessungen der Breite und Höhe eines Bildes oder Bildschirms aus. Die Zahl links vom Doppelpunkt steht für die Breite (x-Achse) und die Zahl rechts vom Doppelpunkt für die Höhe (y-Achse). Die beiden beliebtesten Seitenverhältnisse sind 4: 3 und 16: 9. Diese sollten dir bekannt vorkommen, wenn du zuvor die Einstellungen deines Fernsehbildschirms oder Monitors geändert hast. Das 4:3-Seitenverhältnis ist die Standardbildschirmgröße für ältere Fernsehgeräte und Monitore und hat eine eher kastenförmige Anzeige. Die neueren hochauflösenden Fernsehgeräte und Monitore haben heute das 16:9-Seitenverhältnis, das ein breiteres Display aufweist. Das Seitenverhältnis 3:4 ist in Divi nützlich, um Porträts anzuzeigen.

Optimiere Bilder vor dem Hochladen

Es ist immer am besten, deine Bilder zu optimieren (Größe ändern, komprimieren, zuschneiden usw.), bevor du sie zu WordPress hochlädtst. Gebe auch dein Bestes, um alle Bilddateigrößen zwischen 60 KB und 200 KB beizubehalten. Auf diese Weise verlangsamst du die Ladezeit deiner Seite nicht zu sehr.

Suchmaschinenoptimierung (SEO)

Beim Lesen von Bildern achten Suchmaschinen auf den Dateinamen, den Alternativtext, die Bildunterschriften, den Dateityp, die Dateigröße usw. Diese Informationen werden in das img-Tag eingefügt, das dein Bild anzeigt. Stelle sicher, dass diese Informationen zu deinen Bildern hinzugefügt werden, wenn du ein neues Bild in die WordPress-Mediengalerie hochlädst.

Google liest Hintergrundbilder nicht automatisch, da sie nicht in ein IMG-Tag eingebunden sind. Hintergrundbilder werden mit CSS angezeigt und dienen meist nur Designzwecken.

Dateiformate

Im Allgemeinen sind die meisten Bilder im Web entweder im JPEG-, PNG- oder GIF-Format. JPEGs eignen sich für die meisten Situationen aufgrund ihrer Kompatibilität, der Verwendung von Farben und der geringen Dateigröße.

JPEGs sollten für alle Farbfotos verwendet werden, z. B. für Vorschau- und Hintergrundbilder.

PNG ist auch ein sehr kompatibles Format für das Web. PNGs eignen sich hervorragend für kleinere Bilder mit vielen Details. Das PNG-Format unterstützt auch transparente Hintergrundfunktionen, die sich perfekt für Logos und grafische Elemente eignen.

GIFs eignen sich für kleine Bilder mit begrenzten Farben. GIFs sind einzigartig, da sie animiert werden können, was manchmal nützlich ist.

Empfohlene Bildgrößen

  • Hintergrund- oder Galeriebilder mit Großansicht: Mindestbreite ca. 1000 px
  • Galeriebilder ohne Großansicht: Mindestbreite ca. 500 px
  • Kleine Bilder im Fließtext: Mindestbreite ca. 300 px
WordPress Image Lightbox Plugin