So präsentieren Sie Ihre Bilder am besten online

Veröffentlicht: 2013-12-18
Aktualisiert am

Best Practices für Bilder Welche Art von Website Sie auch haben, es ist wahrscheinlich, dass Ihre Inhalte eine Mischung aus Text und Bildern sind. Für Fotografen, Künstler und andere Kreative stellen die Bilder auf Ihrer Website wahrscheinlich den wichtigsten Teil Ihres Inhalts dar, und daher ist es wichtig zu wissen, wie man sie richtig präsentiert.

Sicher, Sie können ohne weiteres Nachdenken Fotos und Grafiken über das WordPress-Dashboard hochladen, aber wenn Sie sicherstellen möchten, dass Ihre Website schnell geladen, gut lesbar und für Suchmaschinen optimiert ist, sollten Sie dies lesen Kurzanleitung für Best Practices bei der Verwendung von Bildern auf Ihrer Website.

Speichern und Hochladen von Bildern

Während WordPress es möglich gemacht hat, riesige Bilder direkt von Ihrem Computer hochzuladen und sie automatisch anzuzeigen, um sie an die Breite Ihres Blogs anzupassen, empfehlen wir Ihnen nicht, unverarbeitete Bilder hochzuladen.

Jeder Webbrowser ist in der Lage, Bilder in einer kleineren Größe anzuzeigen, als sie tatsächlich sind, wenn dies im Code so angegeben wird, dies führt jedoch nicht zu einer Verringerung der tatsächlichen Dateigröße. Ein 500-kb-Bild, das mit 50 % seiner vollen Breite und Höhe angezeigt wird, hat immer noch 500 kb. Blogger, die sich mit HTML und WordPress nicht auskennen, können davon ausgehen, dass ihre Bilder schnell heruntergeladen werden können, weil ihre Bilder nicht groß auf dem Bildschirm erscheinen, aber das ist nicht immer der Fall.

Um Ihre Bildgröße zu überprüfen, klicken Sie mit der rechten Maustaste oder bei gedrückter Ctrl-Taste auf ein Bild in Ihrem Blog und wählen Sie „Bild anzeigen/öffnen“ aus dem Menü (der Wortlaut variiert leicht, je nachdem, welchen Browser Sie verwenden). Wenn das sich öffnende Bild viel größer ist als das, das Sie in Ihrem Blog sehen, bedeutet dies, dass Ihre Bilder nicht die richtige Größe haben.

Wenn Sie einen Blog mit vielen Bildern haben und die Größe Ihrer Bilder vor dem Hochladen nicht ändern, könnte die kombinierte Größe Ihrer Webseite unnötig groß werden.

Es lohnt sich, sich ein paar zusätzliche Minuten Zeit zu nehmen, um die Größe Ihrer Bilder zu ändern und zu komprimieren, bevor Sie sie hochladen. Dies kann ganz einfach in Photoshop oder jeder anderen Bildbearbeitungssoftware erfolgen, die Sie verwenden. Sie können auch kostenlose Online-Tools wie PicMonkey und den Image Optimizer von Dynamic Drive verwenden.

Die manuelle Größenänderung von Bildern gibt Ihnen die volle Kontrolle über die Komprimierung und verkürzt Ihre Upload-Zeit erheblich, aber wenn Sie möchten, können Sie auch die in der Größe geänderten Bilder verwenden, die WordPress bei jedem Upload automatisch generiert. Wenn Sie ein Bild in einen Beitrag einfügen, haben Sie die Möglichkeit, Bilder in voller, großer, mittlerer oder Miniaturbildgröße einzufügen. Sie können diese Größen unter Einstellungen > Medien an Ihr Blogdesign anpassen. Beachten Sie, dass bei Auswahl dieser Methode Ihre Originalbilder in voller Größe für jedermann kostenlos von Ihrer Website heruntergeladen werden können – nicht die beste Option für Fotografen und Illustratoren!

Bildoptimierung und Benutzerfreundlichkeit

Sie sollten nicht nur sicherstellen, dass Ihre Bilder die richtige Größe haben und für die Seitenladezeit optimiert sind, sondern auch sicherstellen, dass sie für SEO (Suchmaschinenoptimierung) richtig gekennzeichnet sind. SEO erleichtert es Suchmaschinen, Ihre Website zu finden und zu indizieren, und eine Website, die gute SEO-Techniken verwendet, wird im Vergleich zu einer nicht optimierten Website wahrscheinlich weiter oben auf den Ergebnisseiten der Suchmaschinen erscheinen.

Eine vollständige Erörterung von SEO würde den Rahmen dieses Artikels sprengen (viele WordPress-Themes sind sowieso sofort SEO-freundlich), aber die Optimierung Ihrer Bild-Metainformationen ist eine einfache Möglichkeit, Ihrer On-Site-SEO einen kleinen Schub zu geben und kann Nutzern helfen, Ihre Website über die Google-Bildsuche und andere bildbasierte Suchmaschinen zu finden.

Die richtige Kennzeichnung Ihrer Bilder ist auch für die Benutzerfreundlichkeit wichtig, insbesondere wenn die Bilder wichtige Informationen veranschaulichen. Für den Fall, dass ein Bild nicht geladen wird oder nicht angezeigt werden kann (entweder aufgrund einer langsamen Internetverbindung, weil Bilder deaktiviert sind, oder für sehbehinderte Benutzer), ist die Bereitstellung einer alternativen Textbeschreibung ein Muss.

1. Dateiname

Stellen Sie zunächst beim Speichern Ihrer Bilder sicher, dass sie einen aussagekräftigen Dateinamen haben. Wenn Sie Ihre Bilder als IMG_013445.jpg oder wie auch immer sie heißen, wenn sie von Ihrer Kamera kommen, geben die Suchmaschinen keinen Hinweis darauf, was sie darstellen. Verwenden Sie geeignete beschreibende Schlüsselwörter, die durch Bindestriche getrennt sind, z. B. children-playing-ocean.jpg

2. Alternativtext

Wenn Sie Ihr Bild über den Media Uploader hochladen, bietet WordPress mehrere Felder für Dateibeschreibungen an. Diese können zwar leer gelassen werden (was viele Blogger tun, um Zeit zu sparen), aber je mehr Felder Sie ausfüllen, desto besser für SEO und Benutzerfreundlichkeit. Der wichtigste davon ist der Alt-Text, kurz für „alternativer Text“.

Dies ist der Text, der angezeigt wird, wenn Bilder deaktiviert sind oder aus anderen Gründen nicht angezeigt werden können, also sollte er als Beschreibung des Bildes dienen. Auch Suchmaschinen lesen diesen Text und verwenden ihn, um zu entscheiden, worum es auf der Seite geht und wo Ihre Website in den Listen platziert werden soll. Wenn Sie beispielsweise ein in Texas ansässiger Hochzeitsfotograf sind, sollten Sie sicherstellen, dass der Alt-Text für alle Ihre Blog-Bilder viel beschreibenden Text enthält, einschließlich Schlüsselwörtern wie „Hochzeitsfotograf“ und „Hochzeitsfotografie Texas“. Seien Sie jedoch gewarnt, dass es wie bei Ihrem Blogtext wichtig ist, Ihre Bildbeschreibungen nicht mit Schlüsselwörtern zu überladen.

Es kann verlockend sein, denselben Alt-Text in alle Ihre Bilder zu kopieren und einzufügen, um Zeit zu sparen, aber idealerweise sollte jedes Ihrer Bilder einen eindeutigen Alt-Text haben, der es richtig beschreibt.

3. Bildtitel

Der Bildtitel ähnelt dem Alt-Text, hat aber einen etwas anderen Zweck. Anstatt alternative Informationen zum Bild bereitzustellen, sollte der Titel zusätzliche Informationen bereitstellen. Der Bildtitel ist der „Tooltip“-Text, der in einem Popup-Fenster erscheint, wenn Sie mit der Maus über ein Bild fahren. Dieser Text ist sowohl für die Benutzerfreundlichkeit als auch für SEO wichtig und sollte schnell relevante Informationen über das Bild oder den Link liefern.

Der Bildtitel sollte sich leicht vom Alt-Text unterscheiden und wiederum für jedes Bild einzigartig sein.

4. Bildunterschrift

Eine Bildunterschrift ist Text, der normalerweise unter dem Bild angezeigt wird und eine zusätzliche Beschreibung oder unterstützenden Text enthält. Die Verwendung von Bildunterschriften ist optional, aber sie können nützlich sein, um zusätzliche Informationen zu Ihrem Bild bereitzustellen oder die Quelle zu zitieren, wenn Sie Bilder von einer anderen Website verwenden. Stellen Sie sich die Bildunterschrift wie ein Informationsetikett in einer Kunstgalerieausstellung vor.

Bildverknüpfung

Wenn Sie ein Bild in eine Seite oder einen Beitrag einfügen, verknüpft WordPress es standardmäßig mit einer neuen Seite, auf der sich nur das Bild befindet. Dafür gibt es keinen wirklichen Grund und es kann Ihrer Website in Bezug auf SEO sogar schaden.

Es kann auch ein großes Usability-Problem sein – wenn ein Benutzer mit der Maus über Ihr Bild fährt und sieht, dass es sich um einen Link handelt, kann er davon ausgehen, dass es auf eine Seite mit nützlichen Informationen verweist. Das Durchklicken zu diesen Nur-Bild-Seiten ist Zeitverschwendung für den Besucher und kann sogar dazu führen, dass Sie Besucher verlieren.

Um dieses Problem zu lösen, wählen Sie einfach „Keine“ als Feld „Link-URL“, wenn Sie ein Bild in WordPress hochladen, es sei denn, Sie möchten es tatsächlich mit einer bestimmten Seite verlinken. Stellen Sie in diesem Fall sicher, dass Sie den Bildtitel oder die Bildunterschrift verwenden, um anzugeben, wohin das Bild verlinkt.

Bildplatzierung

Neben der Sicherstellung, dass Ihre Bilder für SEO optimiert und benutzerfreundlich sind, ist es aus ästhetischen und lesbaren Gründen auch wichtig, darüber nachzudenken, wie sie in Ihren Text passen.

Möglicherweise bevorzugen Sie Inline-Bilder (kleiner als Ihre Hauptspalten, sodass der Text sie umschließt), Bilder in voller Breite oder eine Kombination aus beidem. Was Sie vermeiden sollten, ist die Verwendung von Einzelbildern, die nicht die volle Breite haben, oder eine Reihe von Bildern mit unterschiedlichen Breiten, da dies unprofessionell und unattraktiv aussieht.

Um dies zu erreichen, sollten Sie sicherstellen, dass Ihre Bilder im Hochformat die gleiche Breite haben wie Ihre Bilder im Querformat. Behalten Sie die Höhe Ihrer Bilder im Auge – wenn sie zu hoch sind, können sie auf Bildschirmen mit geringerer Auflösung überlaufen. Dies führt dazu, dass Benutzer scrollen müssen, um das vollständige Bild anzuzeigen, was vermieden werden sollte. Wenn Ihre Bilder zu groß sind, um sie im Hochformat in voller Breite anzuzeigen, können Sie eine Collage aus zwei oder mehr Hochformatbildern nebeneinander erstellen.

Inline-Bilder können Ihren Inhalten etwas Abwechslung verleihen und dabei helfen, große Textwände aufzubrechen. Sie sind auch eine gute Option für kleinere oder schmale Bilder, die nicht für die Anzeige in voller Breite geeignet sind.

Wenn Sie Inline-Bilder verwenden, ist es wiederum am besten, sich für eine festgelegte Breite für die visuelle Einheitlichkeit zu entscheiden. Dies sollte nicht mehr als die Hälfte der Breite der Textspalte sein, da breitere Bilder den Text zu stark komprimieren und die Lesbarkeit erschweren.

Inline-Bilder sollten immer rechts und nicht links vom Text ausgerichtet werden, um den linken Rand nicht aufzubrechen und die Lesbarkeit zu beeinträchtigen.

Verschönern Sie Ihren Blog mit Bildern

Die Verwendung von Bildern ist wichtig, um einen interessanten und visuell ansprechenden Blog zu erstellen, und sie sind sogar noch wichtiger, wenn es um die Vermarktung Ihres Kreativunternehmens geht.

Befolgen Sie die Tipps, die wir in diesem Artikel für gut optimierte, gut präsentierte Bilder behandelt haben, und Ihre Website wird nicht nur schön aussehen, sondern auch schnell geladen, angenehm zu lesen und für Suchmaschinen attraktiver sein. Viel Spaß beim Veröffentlichen!