This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Datenschutzerklärung

Accept and continue

Report a bug

Cancel
1356 88
SEO Lesezeit 9 Minuten 2 May 2019

Wie du Bilder für mobile Webseiten optimierst

Wie du Bilder für mobile Webseiten optimierst

Ina Mewes
freie Texterin und PR-Beraterin, verhilft Kunden zu mehr Sichtbarkeit
Warum das nicht nur die Navigation und die grundsätzliche Seitengestaltung für Mobile gilt, sondern insbesondere auch für deine Bilder, erfährst du im folgenden Artikel. Und ein paar Lösungsvorschläge gibt es gleich noch dazu.

Mobile First

Smartphones sind aus unserem Alltag nicht mehr wegzudenken. Wir suchen mit ihnen die nächste Eisdiele, kaufen Autos und informieren uns über die Angebote des lokalen Fitness-Studios. 2017 überstieg die Anzahl der mobilen Seitenbesuche erstmals die der klassischen Desktop-Ansichten. Tendenz – stark steigend.

Das hat auch Google bemerkt und seit 2018 die Devise „mobile first" herausgegeben. Im Klartext bedeutet das: Die Optimierung für Mobilgeräte ist ein starker Rankingfaktor und entscheidet deutlich mit, wo deine Seite gefunden wird.

Du willst mehr Traffic? Dann vernachlässige nicht die Bildersuche! Viele User kommen mittlerweile über genau diese Google-Funktion auf die Seiten. Bei der Bildersuche am Smartphone werden allerdings deutlich weniger Ergebnisse sofort angezeigt als am Desktop. Schaffst du es, hier unter die Top-Rankings zu kommen, ist die Chance auf Besucher höher.
Selbst wenn du sagst, dir sind Suchmaschinen egal – deine Seitenbesucher willst du trotzdem erreichen. Und dafür sollte deine Homepage auch auf einem kleinen Bildschirm optimal funktionieren.

Das geht los bei schnellen Ladezeiten. Der Mensch wird immer ungeduldiger. Wo man am Desktop noch bereit war, ein wenig zu warten, bis die Seite lädt, klickt man am Handy deutlich schneller weg. Bilder machen im Schnitt 2/3 des Datenvolumens einer Website aus. Hier ist also das größte Potenzial zur Optimierung deiner Ladezeiten.

Darüber hinaus ist es einfach auch ein Unterschied, ob du Bilder auf Desktopgröße oder einem kleinen Bildschirm siehst. Je kleiner, umso weniger Details sind zu erkennen. Auch hier gibt es Tipps und Tricks, wie du Bilder so optimierst, dass sie auch auf dem Handy Spaß machen.

Ladezeiten optimieren – Bildgröße, Auflösung und Format

Nutzt du ein Responsive Design? In dem Fall ist dein HTML schon so angepasst, dass Bilder auf den jeweiligen Bildschirm in optimaler Größe dargestellt werden. Der Browser lädt aber trotzdem erstmal die Originaldatei und passt sie dann entsprechend an. Das kann ordentlich Datenvolumen ziehen. Daher solltest du die Größe, Qualität und das Format grundsätzlich richtig einstellen.

Für eine vernünftige Ladezeit sollten Dateien kleiner als 2000 Pixel pro Seite sein. Ich stelle mir für Fotos als Standardwert 1920 Pixel auf der längeren Seite ein. Diese Größe ist für Desktops geeignet und reicht auch gut für hochauflösende Mobilbildschirme. Lass dich nicht täuschen, die neuen Displays stellen die gleiche Anzahl an Bildpunkten dar, wie ein normaler Monitor!

Die Auflösung ist der nächste Schritt. 300 dpi (dots per inch) brauchen nur ideale Druckdateien. Für das Netz ist dieser Wert deutlich zu hoch und verbraucht unnötigen Speicherplatz. Mit 72 dpi werden Bilder eigentlich klar und scharf dargestellt. Auf neuen hochauflösenden Displays, wie dem Retinadisplay von Apple, können diese Bilder aber leicht verschwommen wirken. Um hier auf Nummer sicher zu gehen, empfehle ich die doppelte Auflösung einzustellen, also 144 dpi. Hast du die Größe angepasst, sollte die Dateigröße trotzdem noch klein genug sein.

Bildformate gibt es viele. JPEG (JPG) und PNG-Dateien sind am gängigsten und laufen auf allen Browsern problemlos. Bei der Formatierung ins JPEG-Format werden deine Dateien komprimiert und verlieren etwas an Qualität. Je nach Einstellung ist das aber zu vernachlässigen.

Eine Komprimierung auf 60 – 70 % verringert die Dateigröße deutlich, macht aber kaum einen Unterschied in der Ansicht. PNG-Dateien sind die andere gängige Speichermethode und laufen auch sauber auf allen Systemen. Sie haben gegenüber dem JPEG-Format den Vorteil, dass sie auch Transparenzen speichern können, lassen sich aber nicht so gut komprimieren.

Wie sehr die genannten Schritte helfen, zeige ich dir am folgenden Beispiel. Hier nutze ich eine Originaldatei von der Digitalkamera. Sie beläuft sich auf 5 MB bei einer Auflösung von 72 dpi – der Upload würde ewig dauern. Auf 1920 Pixel Kantenlänge zugeschnitten und mit einer Auflösung von 144 dpi bin ich bei knapp 1,3 MB, immer noch zu groß.
Komprimierung durch Bildgröße
Bekomme einen schnellen Überblick und spare deine Zeit

Möchtest du persönliche Serpstat-Demonstration, die Testversion oder erfolgreiche Use-Cases bekommen? Sende eine Demo-Anfrage und unser Support-Team kontaktiert dich ;)
Nach der Komprimierung in JPEG auf 60 % bin ich bei 295 kb und einer voraussichtlichen Ladezeit deutlich unter 3 Sekunden, auch bei einem 3G-Funknetz. Und schon passt es.
Ladezeitverringerung durch Komprimierung
Das Ergebnis lässt sich dabei auf dem Smartphone und sogar auf dem Rechner immer noch gut sehen.
Optimierte Katze

Grafische Aspekte – Bildinhalt, Aufbau und Zuschnitt

Nicht nur Ladezeiten machen Bilder mobil-freundlich, auch die Erkennbarkeit der Inhalte sollte überprüft werden. Am einfachsten geht das in einem Bildbearbeitungsprogramm.

Verkleinere die Ansicht ungefähr auf die Größe deines Handy-Displays. Wie sieht das Foto im kleinen Format aus? Ist dein Hauptmotiv groß genug? Erkennt man noch die gewünschten Details?

Smartphones werden oft draußen genutzt. Dabei kommt es häufig zu unerwünschten Spiegelungen. Damit deine Bilder auch bei ungünstigen Lichtverhältnissen gut erkennbar sind, sollten sie kontrastreich sein. Wenn du große Weißflächen (wie bei Produktbildern) hast, schneide Bilder zu und konzentriere dich auf das Wesentliche.

Auf dem Desktop ist der Bereich above the fold (also der Teil, den man sieht, ohne scrollen zu müssen) im Querformat. Die meisten Bilder werden daher auch so gewählt. Beim Smartphone ist das anders. Oft werden Seiten in der klassischen Handy-Ansicht besucht und die ist im Hochformat. Schneide also deine Bilder so zu, dass sie entweder schon im Hochformat sind oder zumindest in dieser Ansicht auch erkennbar bleiben.
 

Im Hintergrund – Metadaten und Co.

Zur Bildoptimierung gehören auch immer die beigefügten Daten. Sie haben in mehrerer Hinsicht Einfluss auf die Suchergebnisse. Die sogenannten EXIF-Daten werden bei den meisten Fotos automatisch mitgespeichert. Sie beinhalten Informationen zum Kameratyp, dem Standort, dem Aufnahmedatum und vieles mehr. Diese Meta-Daten sind irrelevant und sollten deshalb gelöscht werden.

Die IPTC-Daten kannst du hingegen ergänzen. Hier findet sich die Bildbeschreibung und der Urheber wird genannt. Da so die Einheit zwischen Werk und Namensnennung sichergestellt ist, bist du in puncto Urheberrecht besser abgesichert. Die Daten kannst du in den gängigen Grafikprogrammen leicht anpassen.

Ändere den Dateinamen, wenn er nicht beschreibt, was du zeigst. Mit der Bezeichnung „img00160683.jpg" kann Google nichts anfangen. Steht dort aber „Tomatensuppe.jpg", ist klar, was wohl auf dem Bild zu sehen ist und die Chance, in der Bildersuche aufzutauchen deutlich höher. Das Gleiche gilt für den Bildtitel. So optimierte Bilder haben auch den Vorteil, dass sie bei der Suche per Spracheingabe eher gezeigt werden, da Google so „erkennt", was abgebildet ist.

Das Alt-Attribut ist ein weiterer Aspekt, den du keinesfalls vernachlässigen solltest. Dieser Teil der Meta-Daten wird angezeigt, wenn dein Bild nicht geladen werden kann. Er ist außerdem wichtig für Nutzer, die die Sprachausgabe nutzen. Dabei werden die Webseiteninhalte vorgelesen. Ist im Alt-Attribut nichts enthalten, fehlen dem Besucher die Informationen.

Beachte in jedem Fall, dass diese Meta-Daten tatsächlich mit dem dargestellten Inhalt übereinstimmen. Die Bilderkennung der Suchmaschinen wird immer besser. Wenn sich Inhalt und Angaben widersprechen, führt das zu einem negativen Rankingsignal und damit zur Abwertung der Seite.

Fazit

Mobile Endgeräte erobern immer mehr das Internet. Wenn du deine Website auch in Hinsicht auf Bilder optimierst, verbesserst du damit nicht nur die Nutzerfreundlichkeit, sondern auch dein Ranking bei Google und Co.

Dafür sollten die Bilddateien in Größe, Dateiformat und Auflösung angepasst sein. Den Inhalt erkennt man auch „in Klein" und die Metadaten sind vernünftig gepflegt. Damit hast du die Grundvoraussetzungen für deinen mobilen Auftritt gesichert.

Erfahre, wie du Serpstat mit bestmöglicher Effizienz verwendest

Möchtest du persönliche Produktdemonstration, die Testversion oder erfolgreiche Use-Cases bekommen?

Sende eine Anfrage und unser Support-Team kontaktiert dich ;)

Die Beiträge der Gastautoren können nicht mit der Meinung der Serpstat-Redaktion übereinstimmen.

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Hast du einen Fehler gefunden? Markiere diesen und betätige Ctrl + Enter, um es uns mitzuteilen

Teile den Artikel in sozialen Netzwerken :)

Einloggen Registrieren

Вы исчерпали лимит запросов.

Or email
Забыли пароль?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code queriesLeft

smthWentWrong

contactSupport
telegramVerification telegramBotLink
Choose the project to view data on it

Persönliche Produktdemonstration

Serpstat hilft dir, noch mehr Zeit zu sparen! Bitte fülle das Formular vollständig aus — du wirst schnellstmöglich von einem unserer Produktspezialisten kontaktiert.

Persönliche Demonstration umfasst den Testzeitraum des Services, umfangreiche Anleitungen und Webinare, individuelle Beratung von Serpstat-Experten. Wir machen alles, damit du mit Serpstat zurechtkommst.

Name

Email

Telefonnummer

Wir freuen uns auf deine Kommentare

Upgrade your plan

Export is not available for your account. Please upgrade to Plan A or higher to get access to the tool. Learn more.

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
Просмотр Редактирование

E-mail
Message
Optional
E-mail
Message
Optional

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов