Es gibt keine einheitliche Norm für Bildgrößen auf Unternehmenswebsites, aber die Wahl angemessener Größen sorgt für schnellere Ladezeiten und schärfere Darstellung, während vermieden wird, dass zu große Bilder die Website verlangsamen oder zu kleine Bilder unscharf wirken. Kurz gesagt: Das praktische Prinzip für Bildgrößen ist, sie basierend auf der tatsächlichen Anzeigegröße und dem Verwendungszweck des Bildes auf der Seite festzulegen – nicht jede Position benötigt dieselbe Größe. Im Folgenden geben wir konkrete Empfehlungen für verschiedene Szenarien.
Banner und Hero-Bilder
Banner werden in der Regel 100% der Seitenbreite angezeigt, mit einer Höhe zwischen 400px und 600px. Es wird empfohlen, die Breite mit 1920px zu erstellen, da viele Monitore ein breites Seitenverhältnis haben, um weiße Ränder oder Verzerrungen zu vermeiden. Die Höhe hängt vom Inhalt ab: Wenn Sie mehr Informationen im oberen Bereich zeigen möchten, kann die Höhe etwa 500px betragen; bei einem minimalistischen Stil reichen 300-400px. Die Dateigröße von Bannerbildern sollte unter 200KB liegen, wenn möglich auf 100-150KB komprimiert werden.
Produkt- und Portfolio-Bilder
Produktbilder werden oft in Rastern mit 2-4 Bildern pro Zeile angeordnet. Übliche Größen sind 800x800px oder 600x600px, um ein quadratisches Verhältnis zu gewährleisten und auf verschiedenen Geräten scharf zu bleiben. Bei rechteckigen Produktbildern (z. B. Laptops, Smartphones) wird eine Breite von 600px empfohlen, die Höhe passt sich automatisch an. Alle Produktbilder sollten ein einheitliches Seitenverhältnis haben, sonst wirkt die Liste unordentlich. Die Dateigröße sollte unter 100KB liegen, Thumbnails können kleiner sein, etwa 50KB.
Teamfotos und Avatare
Teamfotos werden meist rund oder quadratisch zugeschnitten, mit einer Breite von 300-400px. Bei Porträt- oder Ganzkörperaufnahmen wird ein Seitenverhältnis von 4:3 oder 3:2 empfohlen, mit einer Breite von 400-500px. Avatarbilder müssen nicht groß sein, unter 200KB reichen in der Regel aus. Achten Sie darauf, dass alle Teamfotos einheitliche Proportionen und Größen haben, um einen professionellen Eindruck zu hinterlassen.
Bilder in Artikeln und Textabschnitten
Bilder im Text sollten die Inhaltsbreite nicht überschreiten, normalerweise unter 800px. Bei vollbreiten Layouts kann die Bildbreite 1200px betragen, aber die Höhe sollte 800px nicht überschreiten, um zu vermeiden, dass das Bild zu viel Platz beim Scrollen einnimmt. Die Dateigröße sollte unter 80KB liegen, um schnelle Ladezeiten zu gewährleisten. Bei Diagrammen oder Screenshots mit hoher Informationsdichte kann die Schärfe erhöht werden, aber die Dateigröße sollte unter 200KB bleiben.
Icons und dekorative Elemente
Icons werden am besten im SVG-Format verwendet, das keine festen Pixelgrößen erfordert. Falls PNG notwendig ist, sollte die Größe das Doppelte der tatsächlichen Anzeigegröße betragen, z. B. 48x48px für eine Anzeige von 24x24px, um auf Retina-Displays scharf zu bleiben. Dekorative Hintergrundbilder oder Texturen können größer sein, aber die Dateigröße sollte kontrolliert werden, meist im JPEG-Format mit 80% Qualität komprimiert.
Allgemeine Tipps zur Bildoptimierung
Unabhängig vom Bildtyp sollte es unter Beibehaltung der visuellen Qualität komprimiert werden. Verwenden Sie Online-Tools oder Bildbearbeitungssoftware, um Bilder im Web-Format zu exportieren. JPEG eignet sich für Fotos, PNG für Icons oder Grafiken mit transparentem Hintergrund, und WebP kann bei guter Kompatibilität verwendet werden, um die Dateigröße weiter zu reduzieren. Fügen Sie außerdem jedem Bild ein geeignetes Alt-Attribut hinzu, um Suchmaschinen das Verständnis des Bildinhalts zu erleichtern, ohne Keywords zu überladen.
Zusammenfassend lässt sich sagen: Bildgrößen auf Unternehmenswebsites sind nicht kompliziert. Der Kern besteht darin, sie an die tatsächliche Anzeigegröße anzupassen, die Dateigröße zu kontrollieren und einheitliche Proportionen beizubehalten. Durch die Wahl angemessener Größen basierend auf dem Seitenlayout und der Geräteanpassung können Sie Ästhetik und Leistung in Einklang bringen. Wenn Sie Ihre Website überarbeiten oder neu erstellen, legen Sie zunächst das Design für jede Position fest und setzen Sie dann die Bildgrößen gemäß den obigen Referenzen, um spätere Anpassungen zu vermeiden.
