Alles was du über Bildgrößen in Websites wissen musst

21.02.2014 von

Alles was du über Bildgrößen in Websites wissen musst

Falsche Bildgrößen auf Websites können dazu führen, dass sich das Layout verschiebt oder die Seite ungewollt lange läd. In diesem Artikel erfährst du, was du beim Einbinden von Bildern auf Websites beachten solltest und welche kostenlosen Programme du deinen Kunden empfehlen kannst, damit sie Bildgrößen einfach anpassen können.


Wichtige Fakten zu Bildgrößen

  • Ein großes bzw hochauflösendes Bild hat eine höhere Dateigröße und somit eine längere Ladezeit, als das selbe Bild mit geringeren Maßen.
  • Große Bilder können leicht und fast ohne Qualitätsverlust verkleinert werden. Wenn kleine Bilder vergrößert werden, entsteht dagegen immer ein Qualitätsverlust.
  • Bilder sollten immer proportional verkleinert werden, um Verzerrung zu vermeiden.

Anpassung von Bildgrößen in smooster CMS

smooster bietet standardmäßig die Möglichkeit bei jedem hochgeladenen Bild zwischen 4 verschiedenen Größen zu wählen: Klein, Mittel, Groß und Original. Die Maße für Klein, Mittel und Groß kannst du frei bestimmen. Wenn du deinen Entwurf von smooster umsetzen lässt, gibst du uns deine definierten Höhen oder Breiten für die drei Größen einfach gemeinsam mit deinem abgesegneten Entwurf. Wir passen die Einstellung dann an. Wenn du dein Design selbst mit HTML & CSS in smooster umsetzen möchtest, findest du Informationen zu den definierten Bildgrößen in der Template-Dokumentation.


Wenn du keine eigenen Werte für die drei Größen angibst, definieren wir sie automatisch so: Klein - 250px Breite, Mittel 400px Breite, Groß 600px Breite. Beim Hochladen des Originals werden zusätzlich zum Original diese drei Bildgrößen erzeugt, das bedeutet, dass auch die Dateigröße je nachdem verändert wird.

Hier drei Beispiele für die voreingestellten Bildgrößen mit einem Foto von Leon, dem Sonnenschein des smooster Teams:


smooster Standardgröße Groß 600 px

Groß - 600px


smooster Standardgröße Groß 400px

Mittel 400px


smooster Standardgröße Groß 250px

Klein 250px


smooster CMS unterstützt alle gängigen Bilddateitypen, die im Web verwendet werden. Du kannst deine Bilder als .jpg/.jpeg, .png oder .gif hochladen und einbinden. Vektorgrafiken im .svg-Format sind auch möglich, werden aber in der Darstellung nicht von allen Browsern unterstützt. Mehr Informationen dazu findest du hier.


Kostenlose Programme zur Anpassung von Bildgrößen

Wenn du ein Bild im Einzelfall in einer abweichenden Größe einfügen möchtest, solltest du das manuell entsprechend angepasste Bild im Editor mit der Bildgröße “Original” einfügen. Mit den folgenden vier kostenlosen Bildbearbeitungsprogrammen kann dein Kunde seine Bilder selbst einfach anpassen. Da sehr große Bilddateien mehr Zeit beim Hochladen benötigen, ist das besonders hilfreich, wenn eine große Anzahl von Bildern gleichzeitig hochgeladen werden soll.


GIMP

kostenlose Bildbearbeitung mit GIMP

Funktioniert mit: Windows, Mac OS X, Unix und weiteren Systemen

Website: gimp.org

Eine Anleitung zur Anpassung der Bildgröße mit GIMP findest du hier.



Picasa

Kostenlose Bildbearbeitung mit Picasa

Funktioniert mit: Windows, Mac OS X

Website: picasa.google.de

Eine Anleitung zur Anpassung der Bildgröße mit Picasa findest du hier.



Paint

Kostenlose Bildbearbeitung mit Paint

Paint ist standardmäßig bei Windows dabei.

Eine Anleitung zur Anpassung der Bildgröße mit Paint findest du hier.



Vorschau

Kostenlose Bildbearbeitung mit Vorschau

Vorschau ist standardmäßig bei Mac OS dabei.

Eine Anleitung zur Anpassung der Bildgröße mit Vorschau findest du hier.


Für alle Bildbearbeitungsprogramme gilt: Es ist wichtig die Bilder proportional zu verkleinern, damit das Bild bei der Anpassung nicht verzerrt wird.


Wie ist deine Erfahrung mit dem Einfügen von Bildern auf Websites? 


zurück
comments powered by Disqus