Kleine Webseitenbilder erhöhen die Website Performance
SEO quickwins

Webseitengeschwindigkeit durch Bildoptimierung steigern

Wie bereits im ersten Beitrag in dieser Reihe ist es so, dass SEO nicht das grosse Ungeheuer ist, wie es von vielen Agenturen und Dienstleistern in diesem Bereich verkauft wird.

Es ist so, dass natürlich viele der Plug’n’Play Lösungen, die gerade bei Kleinunternehmern und Solopreneuren beliebt sind (wie zum Beispiel Jimdoo, Wix,…) technische Limitierungen haben, die man ohne Programmierer gar nicht erst SEO-optimiert bekommt.

Das heisst wir beschränken uns hier auf die Themen und Bereiche, die effektiv von jedem Mann und jeder Frau selbstständig auf der Webseite optimiert werden können. Bei meinen Kunden fokussiere ich dabei jeweils drei Themenbereiche. Das eine ist die Webseitengeschwindigkeit, das andere ist Vertrauenswürdigkeit und das dritte ist die Themenrelevanz.

Davon ist die Webseitengeschwindigkeit das am einfachsten zu optimierende Thema und diesem widmen wir uns jetzt in diesem Beitrag. Wenn man von Webseitengeschwindigkeit spricht, dann spricht man von der Zeit die eine Seite beim Nutzer braucht, um vollständig zu laden.

Bildoptimierung erhöht die Webseitengeschwindigkeit

Da wir heute in einem sehr grafischen Zeitalter sind, geht es hierbei vor allem um das Laden von Bilddateien, aber eben auch um das Laden von Frames, Java-Skripten,…. Die ganzen technischen Dateien, CSS-Dateien, Java-Skript-Files können von uns 08/15-Nutzern in den seltensten Fällen selbst angepasst werden, so dass sie für SEO optimiert werden.

Darum konzentrieren wir uns in diesem Beitrag ganz stark auf die Bildoptimierung. Jede und jeder von uns hat gelernt, dass ein Beitrag viel besser wirkt, wenn ein Bild hinzugefügt wird. Das heisst auf jeder Seite bzw. pro Post gibt es ein bis mehrere Bilder, frei nach dem Motto „Ein Bild sagt mehr als tausend Worte“.

Der Grossteil von uns hat auch gelernt, dass hochaufgelöst (high-res oder „HD“) ein ganz wichtiges Schlagwort im Umgang mit Bildern ist. Deswegen laden sich die meisten die Bilder mit der höchsten Auflösung runter oder verwenden Druckdateien bzw. verlangen diese bei ihren Grafikern. Für den Druckbereich ist das auch grundsätzlich richtig. Diese sind schliesslich für den Druck optimiert und haben eine Auflösung von 300 dpi (dots per inch), für den digitalen Bereich reichen aber schon 72 dpi aus. Aus diesem Grund sind Daten, die für den Druck optimiert wurden, für den Einsatz im Webbereich viel zu gross. Sie haben mehrere Megabyte und entsprechend belasten diese Bilder die Geschwindigkeit der Webseite enorm.

Darum gilt es hier ein bisschen Abhilfe zu schaffen. (Nichts desto trotz empfehle ich immer die höchste Auflösung runterzuladen, denn man weiss ja nie für was man das Bild nochmals brauchen sollte. Vielleicht für einen Flyerdruck, eine Webseite, eine Visitenkarte, für ein Poster oder was auch immer.) Aber bevor man dieses Bild auf die Webseite verwenden sollte und zu einem Beitrag hinzufügt muss es komprimiert und optimiert werden.

Bildformat, Bild- und Pixelgrösse, Komprimierung

Dabei gibt es drei Punkte die zu beachten sind. Das eine ist effektiv das Bildformat. Die häufigsten Formate sind PNG und JPG. PNG‘s haben von Natur aus eine höhere Kilobyte oder Megabyte Zahl, da sie den transparenten Hintergrund mitrechnen. PNG‘s werden aber auf Webseiten lediglich gebraucht, wenn man ein Bild hat, welches auf einem andersfarbigen Hintergrund, ohne weissen Rahmen platziert werden sollte (z.B. euer Logo ohne Weissraum). Wenn ihr zum Beispiel Logos oder ein Maskottchen habt, welche freigestellt auf eurer Webseite erscheinen sollen, dann werdet ihr nicht drumherum kommen ein Bild im PNG Format zu verwenden. Bei allen anderen Dateien empfiehlt es sich diese als JPG abzuspeichern, denn diese sind von Natur aus kleiner und bereits runtergerechnet, also komprimiert.

Das zweite ist die Bildgrösse. Brauche ich tatsächlich 4000 x irgendwas Pixel oder komme ich mit 800 x …… Pixel gut zurecht? Entweder fragt ihr euren Webdesigner wie gross das Bild auf eurer Webseite sein soll, verwendet einen Pixelruler oder den Seitenquelltext (rechts Klick auf die Webseite und „Seitenquelltext anzeigen“ auswählen), um zu sehen wie gross die Bilder sind die bereits auf der Webseite sind. Alternativ könnt ihr auch mit Daumenregeln arbeiten, die für eine Mehrheit der verfügbaren Layouts und Themes passt:

Wenn ihr Slider-Bilder über die ganze Breite des Bildschirms haben wollt, haben diese 1600 x die von euch gewünschte Höhe an Pixel. Für alle anderen, wie zum Beispiel Beitragsbilder, verwende ich meistens eine Auflösung von 500 oder 800 Pixel im quadratischen oder rechteckigen Format. Auch die vordefinierten Formate auf den kostenlosen Graphiktools wie canva oder crello können eine gute Orientierungshilfe sein. 

Um die Pixelgrösse anzupassen, hilft es ein Standardwerkzeug zu verwenden, welches auf den meisten Computer standardmässig installiert sind. Die meisten Fotoanzeigen oder -galerien haben heute eine Möglichkeit das Bild zu bearbeiten und dort dann auch die Bildgrösse zu verändern. Lasst da einfach das Skalieren drin, das heisst wenn ihr die eine Pixelzahl verwendet, rechnet das Programm automatisch proportional die anderen Pixel runter, damit es keine verzerrten Bilder gibt. Ihr könnt natürlich auch Photoshop oder eines der obengenannten Gratistools verwenden. 

Der dritte Schritt den ihr unbedingt tun solltet wenn ihr Bilder optimiert bevor ihr sie hochladet ist, wenn ihr ein PNG habt geht auf die Seite https://tinypng.com/, zieht da euer Bild rein und lasst es komprimieren. Wenn ihr ein JPG habt, gibt es die Seite http://www.jpegmini.com/, dort könnt ihr ebenfalls einzelne Bilder komprimieren – beziehungsweise auch ganze Alben, wenn ihr das Tool auf den Laptop zieht. 

Damit ist ein grosser Schritt zur kürzeren Ladezeit von Bildern gemacht. 

Ich würde euch für jedes Bild das ihr in Zukunft neu hochladet empfehlen, die oben genannten Punkte automatisch immer gleich zu machen und vielleicht Schritt für Schritt alle anderen Bilder dann anzupassen, wenn ihr sie so und so wegen irgendetwas in die Finger nehmen müsst.

Der ALT-Text ist Pflicht

Das hat jetzt zwar nichts mehr mit der Webseitengeschwindigkeit zu tun, aber wenn wir aber gerade beim SEO-Thema sind… Wenn ihr das Bild schon in der Hand habt für einen Upload, vergesst nicht den ALT-Text bei den Bildattributen hinzuzufügen. Gebt dem Bild zum einen einen sinnvollen Datei-Namen. Denn Google liest keine Bilder, sondern nur Text.  Zum anderen könnt ihr im Feld „ALT-Text“ eine kurze Volltext Beschreibung des Bildes verfassen. Diese wird angezeigt, wenn kein Bild angezeigt werden kann. Wenn ihr also für den Beitrag ein Keyword definiert habt, welches ihr fokussieren wollt, dann schreibt das auch in die ALT-Texte der Bilder in diesem Beitrag. Denn, wenn ihr Bilder mit einer kryptischen Beschriftung hochladet und diese keinen ALT-Text haben, werden sie nicht in der Suche indiziert. Das heisst, das hilft euch für die Suchmaschinenoptimierung dann sonst wieder nichts.

Kommentar verfassen

This site uses Akismet to reduce spam. Learn how your comment data is processed.