Bilder in Wordpress einfügen

Bilder in WordPress einfügen I

Eine Website lebt durch Bilder. Sie sind der erste und emotionale Eindruck des Besuchers. Die Botschaft der Bilder ist entscheidend ob die Seite interessant wirkt. Fotos und Grafiken zeigen dem User auf den ersten Blick mit wem oder was er es zu tun hat. Basics zum Thema „Bilder in WordPress einfügen“  für WordPress Newbies.

Bilder in WordPress einfügen

1. Kapitel „Vor dem Hochladen.“

Dieses Kapitel richtet sich an User, die grundlegendes Verständnis für Bildbearbeitung suchen. Photoshop Profis  werden hier kaum Neues finden 😉

Gute und aussagekräftige Bilder

Die Auswahl der Bilder ist wichtig. Mit Fotos in schlechter Qualität sollte man sich und seine Besucher nicht quälen. Bevor man sich mit den technischen Rahmenbedingungen beschäftigt ein paar Tipps:

  • Aussagekräftige Motive wählen
  • auf gute Bildqualität achten
  • Text & Bild als Einheit betrachten

Bildquellen & Bildrechte

Wenn man selbst keine geeigneten Fotos zur Hand hat, kann man neben dem Service von professionellen Fotografen auch auf Bildanbieter aus dem Web zurückgreifen. Bei allen Bildern, die man verwendet muss man auf eines wirklich achten: Die Bildrechte – sonst kann es teuer werden! Hier einige Anbieter:

Kostenlos sind zum Beispiel Morguefile, Pixabay & Flickr. Kostengünstig und gut Fotolia.

Bilder für das Web optimieren und komprimieren

Die Bilder sind ausgewählt, jetzt geht es darum, sie für das Web anzupassen. Das ist sehr wichtig für die Performance der Website, sprich die Geschwindigkeit mit der sie ladet. Die Dateigrösse sollte unter 200 Kilobyte liegen.

Gute Dateigrößen erhält man durch Bilder – je nach verwendeten Seiten- und Artikel-Formaten:

in Breiten von 600 bis 1.400 Pixel

Richtig – Deine Seitenbreite ist beispielweise 600 Pixel. Schneide Deine Bilder auf 600px Breite zu.

Falsch – Einfach ein 1.400 Pixel-Bild hochladen und den Bildbreite-Parameter auf 600 einstellen.

im richtigen Format

JPG auch PNG ist ok
Finger weg von BMPs oder TIFFs

in Web tauglicher Auflösung

Bilder für WordPress optimieren

600 px x 199 px – 17 KB – JPG Photoshop optimiert mittlere Auflösung

 

Bild-Format des Beispielbilds Datei-Größe
Nicht optimiert JPEG Max

350,00 KB

Photoshop optimiert JPEG max. Auflösung

84,90 KB

Photoshop optimiert JPEG hohe Auflösung

27,54 KB

Photoshop optimiert JPEG mittlere Auflösung

15,33 KB

Photoshop optimiert JPEG niedrige Auflösung

10,56 KB

Photoshop optimiert PNG 24

157,00 KB

Photoshop optimiert PNG 8

39,45 KB

Zum Bilder komprimieren braucht man Werkzeuge

Erste Wahl für Profis ist oft Photoshop von Adobe. Die letzte Version nennt sich Creative Cloud. Das Profi-Programm ist teuer und komplex. GIMP ist die kostenlose Alternative. Mit TinyPNG & JPEGmini lassen sich Bilder im Browser berarbeiten. ImageOptim passt gut zum Mac. Eine Windows Alternative ist Trimage.

Mehr über Bildkompression auf Wikipedia.

Die Onlinerin machts leichter

Auf Wunsch & bei Bedarf rüste ich deine Website mit einem Bildoptimierungsprogramm aus. Du kannst mit einigen Handgriffen alles bequem und direkt in deinem CMS erledigen

Bilder richtig benennen

Jedes Bild, das du auf deine Website hochlädtst, bringt seinen Dateinamen mit.
www.deinblog.com/wp-content/uploads/2016/11/DSC_0815.jpg

Damit das Bild von Suchmaschinen einem Thema zugeordnet werden kann, musst du es treffend benennen. In diesem Fall wissen alle sofort, dass es hier um Bilder und WordPress geht:
http://onlinerin.at/wp-content/uploads/2016/11/bilder-wordpress-optimieren.jpg

Bildinformation - Bilder in WordPress

PraxisTipp: Die Bilder bereits vor dem Hochladen in einer übersichtlichen Datei und treffend benannt am Computer abspeichern – gnerell keine Umlaute und in Windows keine Leerzeichen verwenden.

Zusammenfassung

  • Datenmenge: < 200 KB
  • Bild-Breite: 800 bis 1400 Pixel
  • Dateiformat: JPG oder PNG Web-Optimiert
  • Dateinamen: 
Beschreibung des Bildes.jpg

Fortsetzung folgt – Bilder nach WordPress hochladen und auf Seiten & in Artikel einbinden.

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.