Auf die Größe kommt es an: Wie Sie Ihre WordPress-Website optimieren Hero Image

Machen wir uns nichts vor: Wir leben in einer Welt der sofortigen Befriedigung. Die Menschen sind so ungeduldig; wenn sie Ihre Website besuchen und die Bilder nicht schnell geladen werden, verlassen sie sie. Es scheint, dass diejenigen, die ein mobiles Gerät benutzen, eine noch kürzere Aufmerksamkeitsspanne haben. Wenn Ihr Blog oder Ihre Website nicht innerhalb von fünf Sekunden geladen ist, gehen sie weg.

Bilder in Ihrem WordPress-Blog oder auf Ihrer Website sind unverzichtbar; sie verleihen dem Inhalt visuelle Attraktivität und machen die Beiträge oder Artikel auf den Websites angenehm zu lesen. Ohne den Einsatz von Bildern sind viele Websites langweilig. Wenn Besucher nur einen Textblock sehen, neigen sie dazu, die Seite schnell wieder zu verlassen. Bilder sind dafür bekannt, dass sie die Suchmaschinenoptimierung von Websites verbessern. Das Sprichwort „Ein Bild sagt mehr als tausend Worte“ trifft voll und ganz zu, denn das Gehirn kann Fotos schneller verarbeiten als Text.

Wir werden einen Blick auf die Größe von Bildern werfen und wie sie für die Reaktionsfähigkeit einer Website wichtig sind. Wir werden auch lernen, wie man die Bilder für die beste Benutzererfahrung auf Ihrem WordPress-Blog oder Ihrer Website optimiert.

Die Größe spielt eine Rolle

Für die Suchmaschinenoptimierung ist die Geschwindigkeit, mit der eine Seite geladen wird, von großer Bedeutung. Ihre Website braucht Bilder, die von hoher Qualität sind, aber trotzdem schnell laden. Das gilt vor allem dann, wenn Sie möchten, dass Suchmaschinen-Crawler Ihre Website aufspüren.

Warum ist die Ladegeschwindigkeit Ihrer WordPress-Website langsam?

Es ist nicht ratsam, ein Bild zu verwenden, dessen Größe noch nicht angepasst wurde. Die meisten Bilder, die direkt von einer Kamera kommen, sind etwa 48″ x 32″ groß und haben 72 PPI. Das ist viel zu groß für die Verwendung auf Ihrer Website. Selbst wenn Sie versuchen, die Größe in WordPress zu ändern, wird es seine ursprüngliche Größe beibehalten, aber einfach kleiner erscheinen. Wenn Sie keine entsprechend optimierten Bilder erstellen, nehmen die ungeraden Größen mehr Platz oder Bandbreite in Anspruch als nötig. Dies führt zweifellos zu einer langsamen Ladezeit, insbesondere auf mobilen Geräten. Dies ist der Grund, warum manche Websites nicht so schnell geladen werden, wie sie sollten, und als Folge davon wird eine andere Website besucht.
Eine gute Quelle, um die Leistung Ihrer Website zu testen, finden Sie hier.

Was ist also die richtige Größe für ein Bild?

Vergewissern Sie sich, dass das Bildformat nicht nur die richtige Größe hat, sondern auch zu dem von Ihnen veröffentlichten Inhalt passt.

Die meisten Browser neigen dazu, jedes Bild, das größer als normal aussieht, zu verkleinern, aber dann ist die Auflösung der Fotos nicht mehr so gut. Bevor Sie also ein Bild auf Ihre WordPress-Plattform hochladen, sollten Sie ein Bildbearbeitungsprogramm wie Photoshop, FotoFlexer, Pixlr, PicMonkey oder eines der unzähligen Online-Fotobearbeitungsprogramme verwenden, die es gibt. Einige davon sind im Internet kostenlos oder zu äußerst niedrigen Kosten erhältlich.

Wie finde ich die richtige Passform?

Wussten Sie, dass das wichtigste Element bei der Größenänderung eines Fotos seine Breite ist? Jedes Fotobearbeitungsprogramm, das Sie verwenden, passt normalerweise sowohl die Höhe als auch die Breite eines Bildes an. Das bedeutet, dass unabhängig vom Verhältnis, in dem Sie die Breite des Bildes einstellen, auch die Höhe entsprechend angepasst wird.

Was aber, wenn Sie die Pixelgröße des Bereichs, in dem Sie Ihre Inhalte veröffentlichen möchten, nicht kennen? Es gibt ein Verfahren, das Sie befolgen können, auch wenn es etwas kompliziert ist, da wir mit Codes auf Ihrer WordPress-Plattform herumspielen. Führen Sie die unten beschriebenen Schritte sorgfältig aus:

Starten Sie Ihr Stylesheet und klicken Sie auf der Registerkarte „Erscheinungsbild“ auf dem Dashboard auf die Schaltfläche „Editor“. Es erscheint ein Bildschirm mit dem Titel „Themes bearbeiten“ und auf der rechten Seite sehen Sie eine Liste von Dateien.
Suchen Sie fleißig nach einer Zeile mit dem Wort „posts“, die mit diesen Symbolen /* beginnt und endet. Wenn Sie jedoch das Wort „posts“ nicht finden, suchen Sie nach div# oder div, auch bekannt als „div id“ oder „class“.
Die div-Klasse trägt die Bezeichnung „posts“. Suchen Sie unter „posts“ nach einer Zeile mit der Angabe width: 640px. Das ist der Abstand von einer Seite oder Kante des Textbereichs zur anderen. Sie sollten darauf achten, dass die Breite Ihres Bildes nicht größer oder breiter als diese Zahl ist. In WordPress würde der Code wie folgt aussehen:

Die Qualität des Bildes, auch bekannt unter dem Begriff „Auflösung“.

Eines sollte immer klar sein: Das Hauptziel eines Bildes, wenn es auf einer Website verwendet wird, ist es, die Seite so schnell wie möglich zu laden, während es seine Qualität beibehält.

Bildformat

Bilder können in einem dieser verschiedenen Formate gespeichert werden: JPEG (.jgp), PNG (.png) und GIF (.gif). Das JPEG-Format wird zum Speichern von Fotos verwendet, die in der Regel eine geringe Größe haben und trotzdem auf den Bildschirmen der Geräte klar und deutlich zu erkennen sind. Die in diesem Format gespeicherten Bilder sind anpassungsfähig und benötigen nicht allzu viel Zeit zum Laden.

Wenn Sie ein gutes Format benötigen, um grafische Texte, Screenshots oder Strichzeichnungen zu präsentieren, dann ist das Speichern im PNG-Format die beste Wahl. Dieses Format unterstützt auch Transluzenz und wird für Bilder mit geringer Auflösung verwendet, aber es lädt schnell.

Für Animationen, Icons, einfache Logos oder Symbole benötigen Sie das GIF-Format. Dieses Format wird für animierte Bilder verwendet und hat meist eine geringe Größe.

Es gibt viele Argumente dafür, welches Format am besten für eine WordPress-Website geeignet ist. Bevor Sie sich für ein bestimmtes Format entscheiden, sollten Sie bedenken, wie Ihre Besucher die Bilder genießen werden.

Wie Sie Ihre Bilder benennen

Viele Blogger haben die Erfahrung gemacht, dass sie nach einem Bild suchen müssen und es nicht finden, weil es nicht richtig benannt wurde. Das kann frustrierend sein. Der Hauptgrund, warum Sie jedes der Bilder, die Sie auf Ihrer WordPress-Website verwenden, benennen sollten, ist die Optimierung. Daher müssen Sie Bildnamen erstellen und verwenden, die stichwortreich (siehe: NICHT stichwortreich) und beschreibend sind. Suchmaschinen-Bots durchsuchen nicht nur den Text einer Website, sondern auch die Namen der verwendeten Bilder. Denken Sie deshalb daran, jedem Bild einen passenden, relevanten Namen zu geben.

Verwendung von Alt-Tags

Textersatz für Bilder wird als „Alt-Tags“ bezeichnet und wird immer dann angezeigt, wenn ein Webbrowser die Bilder nicht richtig wiedergibt. Sie werden auch angezeigt, wenn ein Webbesucher die Bildfunktionalität seines Browsers absichtlich ausgeschaltet hat. Wenn Sie Ihre Bilder mit geeigneten Alt-Tags versehen, können Sie Ihr Suchmaschinen-Ranking erheblich verbessern.

Wenn es um Alt-Tags geht, sollten Sie daran denken:

Ihre Bilder müssen mit einfachen Worten beschrieben werden.
Es ist nicht ratsam, Ihre Alt-Tags mit Schlüsselwörtern vollzustopfen, da Ihre Website sonst abgestraft werden könnte.3
Es ist nicht gut, Alt-Tags für jedes Bild auf Ihrer Website zu verwenden, da die Suchmaschinen Sie sonst der Überoptimierung bezichtigen könnten.

Fazit

Jetzt wissen Sie, dass es bei der Verwendung von Bildern in Ihrem WordPress-Blog oder auf Ihrer Website auf die Größe ankommt. Nutzen Sie diese Informationen, um die Ladezeit Ihrer Website zu verbessern, während Sie an Ihren Bildern arbeiten, um eine maximale Leistung und ein angenehmes Benutzererlebnis zu erzielen.

Important!

Mobiteam is helping young startups and established companies to expand their online presence, user acquisition and conversion by connecting them to our many daily readers and network.

Now you can get your article published on Mobiteam.de and let your company be seen, discovered and used by thousands of monthly readers.

According to Google, Mobiteam is the #1 Web Agency in Berlin for the queries (page 1, position 1)

"Top Web Design Agencies in Berlin"
"Top Web Development Companies in Berlin"
More details Mobiteam GmbH

Sie sind hier in guter Gesellschaft
Beginnen Sie mit einem kostenlosen Angebot