Bei der Pflege der Website eines kleinen oder mittleren Unternehmens wird die Bildgröße oft übersehen, obwohl sie eine große Wirkung hat. Zu große Bilder verlangsamen das Laden der Seite und Besucher verlieren die Geduld; zu kleine Bilder wirken unscharf und unprofessionell. Dieser Artikel bietet anhand typischer Einsatzszenarien eine praktische Anleitung zur Auswahl und Optimierung von Bildgrößen, um die richtige Balance zwischen Schärfe und Performance zu finden.
Zunächst den Verwendungszweck klären
Je nach Position auf der Website gelten unterschiedliche Anforderungen an Größe und Schärfe. Bevor Sie die Größe festlegen, sollten Sie die Hauptverwendungszwecke der Bilder auf Ihrer Website erfassen:
- Karussell- oder große Bannerbilder: Diese befinden sich meist oben auf der Startseite, sind breit und benötigen eine hohe Schärfe. Eine Breite von etwa 1920 Pixeln ist empfehlenswert, die Höhe richtet sich nach dem Design und liegt häufig zwischen 400 und 600 Pixeln.
- Produkt- oder Fallbeispielbilder: Sie dienen der Darstellung von Produktdetails oder Projektergebnissen. Eine Breite von 800 bis 1000 Pixeln ist sinnvoll, die Höhe wird proportional angepasst, damit die Bilder auch nach einer Skalierung scharf bleiben.
- Bilder in Artikeln: Diese ergänzen den Inhalt. Eine Breite von 600 bis 800 Pixeln reicht aus; größere Bilder verlangsamen das Laden der Leseseite unnötig.
- Thumbnails oder Listenbilder: Sie werden in Artikel- oder Produktlisten verwendet. Eine Breite von 200 bis 300 Pixeln ist ausreichend, und die Dateigröße sollte so gering wie möglich sein, da viele solcher Bilder gleichzeitig geladen werden.
Im Backend oder Code der Website lässt sich in der Regel die Anzeigegröße festlegen, aber die tatsächliche Dateigröße (Pixelmaße und Dateigröße) ist entscheidend für die Ladezeit. Es wird empfohlen, die Bilddateien in der doppelten Anzeigegröße bereitzustellen, um hochauflösende Bildschirme zu unterstützen, aber unnötig große Dateien zu vermeiden.
Bildkomprimierung ist ein Muss
Viele Unternehmen exportieren Bilder direkt aus der Kamera oder aus Designprogrammen – die Dateigrößen liegen dann oft bei mehreren Megabyte. Ein direkter Upload führt zu langsamen Seitenladezeiten. Durch Komprimierung lässt sich die Dateigröße erheblich reduzieren, während die Bildqualität für das menschliche Auge akzeptabel bleibt.
Zwei gängige Methoden sind:
- Verwendung von Bildbearbeitungswerkzeugen: Wie Photoshop oder Online-Komprimierungsdienste. Beim Export sollte das JPEG-Format gewählt und die Qualität auf 70–80 % eingestellt werden. Dadurch lässt sich die Dateigröße oft um mehr als 70 % reduzieren.
- Nutzung der Komprimierungsfunktion im Backend der Website: Einige Baukastensysteme bieten eine automatische Bildoptimierung beim Upload an. Es ist jedoch ratsam, die Bilder vor dem Upload manuell zu komprimieren, um optimale Ergebnisse zu erzielen.
So erkennen Sie eine übermäßige Komprimierung: Vergrößern Sie das Bild auf 100 %. Wenn deutliches Rauschen oder Unschärfe sichtbar ist, wurde zu stark komprimiert und die Einstellungen sollten angepasst werden.
Einheitliche Bildstandards etablieren
Für eine langfristig einfache Pflege empfiehlt es sich, einfache Bildstandards festzulegen, einschließlich Dateibenennung, Größenrichtlinien und Speicherorten. Zum Beispiel:
- Dateibenennung: Verwenden Sie englische Begriffe oder Pinyin, inklusive Datum und inhaltlichem Stichwort, z. B. „20250115-produkt-rot-stuhl.jpg“, um die Suche zu erleichtern.
- Größenrichtlinien: Halten Sie die gängigen Größen in einem Dokument fest, z. B. Karussell 1920×600, Produktbild 800×800, Thumbnail 300×300.
- Speicherorte: Legen Sie im Backend oder auf dem Server Ordner nach Kategorien oder Datum an, damit nicht alle Bilder an einem Ort liegen.
Mit einheitlichen Standards kann auch ein neuer Mitarbeiter schnell einsteigen und die Einarbeitungszeit wird verkürzt.
Prüfung und Anpassung
Nach dem Hochladen der Bilder sollten Sie folgende Punkte überprüfen:
- Öffnen Sie die Seite und prüfen Sie, ob die Bilder scharf und nicht verzerrt sind.
- Nutzen Sie die Entwicklertools des Browsers (F12), um die Ladezeit der Bilder zu messen. Wenn ein einzelnes Bild mehr als 200 KB hat, sollten Sie es weiter komprimieren.
- Betrachten Sie die Seite auf einem Mobilgerät, um sicherzustellen, dass die Bilder responsiv sind und keine horizontale Scrollleiste erscheint.
Wenn Sie feststellen, dass einige Bilder ungeeignet sind, ersetzen Sie sie zeitnah und notieren Sie den Grund, um ähnliche Fehler in Zukunft zu vermeiden.
Die Optimierung der Bildgrößen ist keine einmalige Aufgabe, sondern Teil der regelmäßigen Website-Pflege. Wenn Sie bei jedem neuen Bild diesen Ablauf befolgen, verbessern sich langfristig Ladezeit und Nutzererlebnis Ihrer Website.
