Erstellung einer Webseite – Bilder optimieren und komprimieren

erstellung-einer-webseite-bilder-optimieren-und-komprimieren

Erstellung einer Webseite – Bilder optimieren und komprimieren

Erstellung einer Webseite – Bilder optimieren und komprimieren

Zu der vorbildlich gestalteten Webseite gehören Bilder. Allerdings beherrschen zu viele Bilder und zu große Bilder das Gesamtbild, während die Ladegeschwindigkeit beeinträchtigt wird. Bilder reduzieren grundsätzlich die Geschwindigkeit. Die Optik der Webseite ist ebenfalls ein wichtiger Faktor. Jede Webseite profitiert von Bildmaterial, es kommt allerdings auf das Format und die Menge der Bilder an. Online-Shops präsentieren selbstverständlich ihre Produkte in Form von Bildern. Die Firmen-Webseite präsentiert Einblicke ins Unternehmen mit Bildern. Informative Inhalte sorgen mit Bildern und Grafiken zur Veranschaulichung und zum besseren Verständnis. 

 

Die Anzahl der Bilder ist relevant. Mit wenigen Worten geschildert: Je mehr Bilder verwendet werden, desto länger ist die Ladezeit. Es ist sinnvoll, vorher zu entscheiden, welche Bilder verwendet werden. 

erstellung-einer-webseite-bilder-optimieren-und-komprimieren

Sind Bilder überhaupt wichtig?

Richtige Bilder helfen dem Nutzer, den Text besser zu verstehen. Ein Bild ohne Text ist nicht optimal, ein Text ohne Bild jedoch ebenfalls nicht. Daher ist es signifikant, dass Bild und Text kombiniert auf der Webseite erscheinen. 

 

Die Frage ist nun, wie kommen die Bilder auf die Webseite? 

Vorerst ist das Rohmaterial zu überprüfen. Es gibt Bilder aus PDF, JPG, PNG oder EPS. Die Dateigrößen sind selbstverständlich nicht einheitlich. Wenn die vorhandene Webseite behalten wird, ist zu entscheiden, welche vorliegenden Bilder und Logos übernommen werden. Die Bilder müssen in puncto Qualität und Ausgabegröße geeignet sein. Die empfehlenswerten Bildformate sind:

  • JPEG optimal für Fotos und Grafiken, die über mehr Farbe verfügen können.
  • PNG eignet sich für Grafiken, die allerdings mit weniger Details und einfarbigen Flächen präsentiert werden. Einfache Bilder eignen sich zur Verarbeitung mit PNG. 
  • Kurze Videos sind mit GIF zu bearbeiten. Es werden 256 Farben verwendet. 
  • Von Google entwickelt und flexibel verwendbar ist WebP, für die reduzierte Dateigröße optimal einsetzbar. 

Pixelgrößen sind sehr wichtig. Empfehlenswert sind:

  • 1920 Pixel für die komplette Bildschirmanzeige,
  • 1200 Pixel für die volle Bildschirmhöhe.

Um zu demonstrieren, dass ein Text folgt, ist das Format 1920 x 700 Pixel optimal. 

Querformate enthalten maximal 900 Pixel und Hochformate sind mit maximal 700 Pixel angepasst. 

 

PNG erzeugt die Bilder in bester Qualität. Es gibt nicht viele Wahlmöglichkeiten, da PNG die Bilder automatisch verkleinert.

 

JPEG sorgt für die ausgewogene Balance zwischen Qualität und Dateigröße. Die Komprimierungstechnik JPEG ist fortschrittlich. Mit dieser Technik werden Bildpunkte entfernt, die vom menschlichen Auge kaum wahrzunehmen sind. Das Bild ändert sich in der Abmessung, benötigt weniger Kilobyte. Für den Verwender bedeutet dies die angepasste Ladegeschwindigkeit. 

 

Ist es notwendig, die Bilder zu komprimieren?

Das Ziel ist, die Speichermenge und die Ladezeit zu reduzieren. Es ist bekannt, je größer die Bilder, desto mehr Zeit benötigt die Seite zum Laden. Die Geschwindigkeit ist ein nicht zu unterschätzender Faktor, denn kein Kunde akzeptiert eine lange Ladezeit, die sich außerdem auf dem Ranking negativ auswirkt. Der Kunde verlässt genervt die Webseite. Adobe Photoshop ist behilflich, die Bilder optimal zu komprimieren. 

 

Die Abmessung, anders ausgedrückt die Länge und Breite des Bildes sind unter Umständen zu bearbeiten. Die Auflösung ist ebenfalls relevant, je enger die Pixel auf der Fläche aneinandergedrängt werden, desto klarer und präziser ist das Bild. 

 

Die Verkleinerung ist einfach durchzuführen. Es gibt einige Tools, die durchaus preisgünstig sind:

  • Squoosh arbeitet mit Drag’n Drop. Bilder können mit Squoosh im speziellen Googles WebP-Dateiformat gespeichert werden. 
  • Tinypng, 
  • Compressjpeg,
  • Imagecompressor,
  • GIMP,
  • Erwähnenswert ist IrfanView zum Downloaden. 

Für eine Standard-Webseite dient die Bildgröße 200 KB als Basis. Einige Eigenschaften der Bilder sind zu berücksichtigen:

  • Die Helligkeit, der Kontrast, Schatten,
  • schiefe Bilder werden in die gerade Lage gebracht,
  • Form und Farbe sind anzupassen. 

Die Bildqualität auf mobilen Endgeräten ist ebenfalls zu bearbeiten. Hier ist auf die kleinere Darstellung zu achten, einige Bilder sind im Querformat besser anzuschauen. Das Gleichgewicht zwischen der Dateigröße und der Bildwiedergabe ist zu berücksichtigen, abhängig vom Dateiformat. 

 

Die Farbe und die Form der Bilder sind per CSS anzupassen. Zu bearbeiten sind die Farbe, die Konturen und Schatten. 

 

Das farbige Bild ist mit JPG bestens zu bearbeiten. Das Logo, welches über weniger Farben verfügt, ist mit GIF und den 256 Farben anzupassen. Für das vielfarbige Logo eignet sich JPG. 

erstellung-einer-webseite-bilder-optimieren-und-komprimieren

Die richtige Dateigröße

Tinypng verwendet Komprimierungstechniken mit dem Ergebnis, dass die Dateigröße erheblich reduziert wird. Durch die minimierte Anzahl der Farben werden weniger Bytes benötigt, die nicht in puncto Bildqualität maßgebend sind, jedoch die Dateigröße wesentlich verringern.  

 

Bilder komprimieren führt zu einem schnelleren Ladevorgang, nicht nur der Besucher ist erfreut, auch der User im mobilen Bereich ist zufrieden. Das Suchmaschinenranking ist außerdem ein wichtiger Faktor, der für den Traffic auf der Webseite verantwortlich ist. 

 

Testkriterien sind die Dateigröße, die Bildqualität und die Ladezeit. 

 

Die Bildqualität ist immens wichtig

Verpixelte Bilder wirken amateurhaft. Der Adobe Photoshop bietet das professionelle Bildbearbeitungsprogramm. Bilder-SEO ist wichtig. Es geht hier um die Verbesserung der Webseite mit Bildern. Die Google-Bildersuche vergibt höhere Ränge. Schlecht optimierte Bilder sind für längere Ladezeiten verantwortlich. Die Optimierung ist daher unbedingt durchzuführen. Eine gute Webseite ist notwendig; der Aufbau, die Gestaltung, die Optimierung und Komprimierung der Bilder sind zu berücksichtigen. 

 

Haben Sie noch Fragen? Kontaktieren uns.
Es gibt keine Kommentar noch

Unverbindliche Anfrage

Wir unterbreiten Ihnen gerne ein individuell erstelltes Angebot. Oder rufen Sie ganz unverbindlich unter: 0515 1877 9856 an.

main contact

KostenkalkulatorKostenkalkulator