sssupers ist ein in Münster beheimatetes Webdesign Studio mit Website Boutique, das vom Fotografen und Designer Rasmus Schübel geführt wird. "Ich helfe meinen Kunden, ihre Website als sicheren Hafen der Selbstdarstellung im Internet zu erleben und verkaufe in meiner Boutique schlüsselfertige, maßgeschneiderte Websites an qualitätsbewußte Kunden mit Stil."

 

CHECKLISTE für Bildgrößen auf Websites

 

Checkliste für Bildgrößen auf Websites

Die Frage, in welcher Größe Bilder auf die Website hochgeladen werden sollten, um diese an ihrem Platz in bester Qualität wiederzugeben, lässt sich durchaus mit einigen Faustregeln beantworten. Natürlich betrachten wir diese Frage mit Blick auf Squarespace, aber im Grunde stellen diese Empfehlungen einen guten Ausgangspunkt für jede Web-Anwendung dar. 

Was passiert, nachdem ich ein Bild hochgeladen habe?
Wenn Sie ein Bild hochladen, erstellt Squarespace bis zu sieben Versionen dieses Bildes mit jeweils einer anderen Breite. Diese Breiten ändern sich stets relativ zur Breite, um das Seitenverhältnis des Bildes zu bewahren:

Webdesign Münster gesucht? Preiswerte Webdesigns von der Webdesign Agentur Münster. ✓Kostenfreie Erstberatung ➞ Angebot jetzt anfordern.

100 Pixel
300 Pixel
500 Pixel
750 Pixel
1000 Pixel
1500 Pixel
2500 Pixel

HINWEIS: Bilder, die über den Style-Editor hochgeladen wurden, z. B. Hintergrundbilder, werden immer bei ihrer ursprünglichen Bildbreite angezeigt. Die lange Seite dieser Bilder darf bei 72 dpi Auflösung aber maximal 2500 Pixel an ihrer längsten Kante betragen. 


BILDANFORDERUNGEN & kleines Glossar

Beim Hochladen von Bildern auf Ihre Website folgen Sie idealerweise diesen Richtlinien:


Datentypen
Speichern Sie nur Bilder im Format .jpg, .gif oder .png. AN ALLE: .pdf-, .psd-, .tif- und .doc-Dateien sind fürs Internet nicht geeignet.

Dateiname
Verwenden Sie nur Buchstaben, Zahlen, Unterstriche und Bindestriche in Dateinamen. Andere Zeichen (wie Fragezeichen, Prozentzeichen und Bezeichnungen) können beim Hochladen falsch übersetzt werden und unerwartetes Verhalten in Galerien verursachen. Auch können Suchmaschinen aus Bildnamen wie "bildgrÖßen-für-squarespace.jpg" wenig erfahren.

Dateigröße
Es gibt eine 20 MB Beschränkung für alle Bild-Uploads, aber wir empfehlen die Verwendung von Bilddateien von weniger als 500 KB für beste Ergebnisse. Wie so oft ist größer nicht immer auch besser, dieses gilt eben auch bei der Bildgröße.

Farbmodus
Bilder im RGB-Farbmodus, die ein cmyk-Druckprofil enthalten, werden in den meisten Browsern nicht richtig dargestellt –was zum Teil zu höchst sonderbaren Farben führen kann. 

Farbprofil
Bilder sind stets im sRGB-Farbprofil abzuspeichern. Wenn Bilder (insbesondere auf mobilen Geräten) sonderbar aussehen, kann das sehr gut daran liegen, daß diese ein anderes als das sRGB-Farbprofil haben.

Webdesignbraucht gute Farben. Aktuelles zum Thema Farbtrends gibt´s in unserem Blog. Interessiert den neusten Farben? ➞ Hier entlang.

BEWÄHRTE VORGEHENSWEISEN

Bildbreite
Die Abmessungen des Originalbildes, das Sie auf Ihre Website hochladen, können einen großen Einfluss darauf haben, wie es angezeigt wird. Wir empfehlen die Verwendung von Bildern, die zwischen 1500 und 2500 Pixel breit sind. Bilder, die kleiner als 1500 Pixel sind, können verschwommen oder pixelig erscheinen, wenn sie bei der Ausdehnung auf die Breite eines Banners 'aufgeblasen' werden.

Style Editor
In den meisten Fällen wird Squarespace große Bilder auf eine maximale Breite von 2500 Pixeln herunterrechnen. Allerdings werden Bilder, die durch den Style Editor hinzugefügt wurden (Hintergrundbilder und standortweite Bannerbilder), in ihren ursprünglichen Dimensionen geladen. Dies kann zu einem langsamen Aufbau der Seite führen, wenn das Bild über 2500 Pixel entlang seiner längsten Kante liegt. Es ist also besser, wenn Sie auch über den Style Editor gleich die richtigen Größen hochladen.

Bildformat
Das meistvertretene Bildformat JPG zeichnet sich insbesondere dadurch aus, daß die Bilddaten komprimiert werden (können). Dieses geschieht am Besten in einem hochwertigen Bildbearbeitungsprogramm wie Adobe Photoshop, aber es gibt auch online bereitstehende Tools, mit denen Sie hervorragende Ergebnisse erzielen. 
Der Vorgang der Kompression unterliegt einigen Gesetzmäßigkeiten: je stärker ein Bild komprimiert wird, um so stärker treten sogenannte Artefakte auf, die diffuse Unschärfen und eine pixelige Wiedergabe hervorrufen. Je kleiner die Zahl, um so weniger bleibt vom Bild übrig, könnte man sagen. Also 80 = hohe Qualität, 20 = miese Qualität. 

Kompression
Auf dieser Skala erreichen Sie bei einem Wert von etwa 75 eine nach menschlichem Ermessen verlustfreie Wiedergabe, ab einem Wert unterhalb von 50 dürfen Sie mit sichtbaren Verschlechterungen rechnen. Sofern Sie also die Kontrolle über den Grad der Kompression haben, stellen Sie einen mittleren Wert von 50-55% Kompression ein.


HILFREICHE WERKZEUGE

Erstklassige Ergebnisse erzielen Sie mit einer Reihe von online angebotenen Werkzeugen, die keinerlei Installation benötigen. Als besonders empfehlenswert sind die beiden kostenlosen Tools JPEGMINI.COM und COMPRESSOR.IO zu nennen. Beide sind einen regelmäßigen Besuch wert.

Zu Ihrer schnellen Übersicht haben wir Ihnen eine praktische Checkliste zusammengestellt, auf der Sie neben den beschriebenen Faustregeln auch die wichtigsten Bildgrößen für soziale Netzwerke wie Facebook, Twitter, Google+ und Xing gelistet haben. 

Diese Checkliste stellen wir Ihnen kostenlos zum Download zur Verfügung:

Sie möchten Kontakt zur Webdesign Boutique aufnehmen? Gern können Sie uns telefonisch wie auch per Email erreichen. Wir freuen uns auf Sie.

Zum Download bitte hier entlang, es freut uns sehr, wenn Sie diesen Beitrag liken, kommentieren oder teilen möchten. Dankeschön!