Profi-Homepage-Webdesign

Bildgröße im Web
Welche Bildgröße ist für Ihre Website ideal?

Bilder sind für das Internet wie das Salz für die Suppe: einfach unverzichtbar. Doch welche Auflösung und welches Format sind eigentlich ideal für Ihre Website?

Die ideale Bildauflösung für Ihre individuelle Website

Manche Websites brauchen unendlich lange um sich zu laden. Eigentlich schade, denn der Nutzer klickt höchstwahrscheinlich weiter und wartet nicht, bis alle Inhalte korrekt dargestellt werden. Häufig wurzelt die lange Ladezeit in einer zu groß gewählten Bildgröße. Das hat zwar den Vorteil, dass diese Bilder garantiert scharf dargestellt werden. Doch vermutlich wird keiner die lange Ladezeit abwarten. Die Kür liegt folglich darin, sowohl das Format als auch die Bildauflösung korrekt an die individuelle Website anzupassen.

Das Bildformat richtig auswählen

Sie kennen diese Dateiendungen wahrscheinlich: JPG, PNG und GIF. Als Bildformate bieten sie unterschiedliche Vor- und Nachteile. So eignet sich das JPG-Format aufgrund seiner hohen Farbauflösung besonders gut für Fotos und findet daher auch in Digitalkameras Verwendung. Das PNG-Format überzeugt durch seine Fähigkeit, Transparenzen darzustellen. Aus diesem Grund wird es vorwiegend für Grafiken, Icons und Logos verwendet. Das GIF- Format eignet sich hingegen hervorragend für Animationen und findet daher sein Haupteinsatzgebiet in animierten Grafiken. Haben Sie das richtige Format für Ihre unterschiedlichen Bildinhalte gefunden, dann müssen Sie nur noch die richtige Bildgröße auswählen.

Die ideale Bildgröße für Website-Bilder

Die Herausforderung bei der Auswahl der idealen Dateigröße für Ihre Website-Bilder liegt darin, die Bildgröße so gering wie möglich und die Bildauflösung so gut wie nötig zu wählen. Haben Sie diesen schmalen Grat für die ideale Darstellung der Bildinhalte auf Ihrer Website herausgefunden, dann können Sie sicher sein: Ihr Unternehmensauftritt bietet Qualitätsbilder bei besten Ladezeiten. Doch wie wird die Bildauflösung überhaupt berechnet?

Berechnung der Bildauflösung in dpi/ppi

Die Bildauflösung gibt die Anzahl der linear aufeinanderfolgenden Bildpunkte eines Bildes an. Das heißt, ein Bild in der Auflösung 1280 x 720 hat eine Bildbreite von 1280 Bildpunkten und eine Bildlänge von 720 Bildpunkten. Diese Bildpunkte werden im digitalen Bereich in Pixel umgerechnet: Ein Pixel entspricht dabei der Anzahl der Bildpunkte auf einer Strecke von 1 Inch (= 2,54 cm) und wird in dpi (dots per inch = Bildpunkte pro Inch) oder auch in ppi (pixel per inch = Pixel pro Inch) angegeben. Eine Auflösung von 72 dpi oder ppi bedeutet also, dass pro 2,54 cm 72 einzelne Bildpunkte dargestellt werden. Das kann ideal sein, muss es aber nicht. Denn die Auflösung sollte auch immer individuell an die Bildschirmgröße angepasst werden. Wird sie zu gering gewählt, dann tritt der bekannte Effekt des „Verpixelns“ auf. Wird sie zu groß gewählt, dann lädt die Bilddatei entsprechend langsamer. Doch wie bestimmen Sie nun, welche Bildauflösung zu den unterschiedlichen Monitorgrößen Ihrer Seitenbesucher am besten passt?

Komprimierung: Ideale Bildergröße für jede Monitorgröße

In Zeiten von responsiven Websites passen sich Online-Inhalte fließend an unterschiedliche Monitorgrößen an – auch Bilder. Die „richtige“ Größe für Ihre Website-Bilder ist daher nicht fix, sondern unterliegt einem Darstellungstrick: der Komprimierung. Insbesondere das JPG-Format lässt Komprimierungen von bis zu 99 % zu. Doch bedenken Sie:
Je höher der Komprimierungsgrad desto schlechter wird die Qualität des Bildes aber desto kleiner wird die Größe und dadurch wird die Ladezeit der Seite schneller.

© Antonioguillem – fotolia.com

Empfohlene Durchschnittsgrößen von Website-Bildern

Gerade wenn Sie Bilder direkt von einer hochauflösenden Digitalkamera verwenden, dann können diese gerne einmal 4 MB (Megapixel) groß sein. Das ist für den Online- Einsatz deutlich zu viel „Dateiballast“ um noch ein schnelles Laden zu ermöglichen. Daher ist es ratsam, die Originalbilder entsprechend zuzuschneiden. Diese allgemeinen Größenempfehlungen für unterschiedliche Einsatzzwecke geben Ihnen dabei erste Orientierung:

Kleine Bilder im Fließtext: Seitenlänge von circa 300 px
Galeriebilder OHNE Großansichten: Seitenlänge von circa 500 px
Galeriebilder MIT Großansicht: Seitenlänge von circa 1000 px

Wie groß die Bilder für Ihre individuelle Website jedoch tatsächlich sein sollten, das verrät Ihnen nur das Design Ihrer Website.

So finden Sie heraus, wie groß ein Bild auf Ihrer Website ist

Klicken Sie einfach einmal mit der rechten Maustaste auf das gewünschte Bild. Verwenden Sie Google Chrome, dann erhalten Sie über den Menüpunkt Untersuchen die entsprechenden Größenangaben des gewählten Bildes. Im Firefox gibt es dazu hingegen den Menüpunkt Grafik-Info anzeigen und der Internet Explorer liefert diese Informationen zur Bildgröße über Eigenschaften.

Fazit

Das beste Verhältnis von Bildqualität zu Dateigrößer erhalten Sie, indem Sie die Bilder für Ihre Website grob auf die gängigen Durchschnittsgrößen von Online-Bildern zuschneiden. Danach bietet Ihnen das Format JPG die Möglichkeit, die zugeschnittenen Bilder weiter zu komprimieren. Dafür gibt es entsprechende Bildbearbeitungsprogramme oder auch kostenlose Tools im Internet. Da die Qualität des Bildes jedoch mit zunehmender Komprimierung leidet, sollte ein mittlerer Komprimierungswert zwischen 40 % und 70 % gewählt werden. Auf diese Weise erhält Ihre Website Bilder, die sowohl auf unterschiedlichen Endgeräten ideal dargestellt als auch schnell geladen werden.

Kategorien

Profi Homepage Konstanz Icon

Erfolgreiche Homepage: Tipps für mehr Erfolg

Profi Homepage Konstanz Icon

Marketing: Möglichkeiten Ihre Kunden zu erreichen

Profi Homepage Konstanz Icon

Design: Moderne und funktionale Gestaltung

Technik

Technik:
Informationen rund um die Technik

Thema vorschlagen

Vorschlag

Kontakt

Bitte lasse dieses Feld leer.

Das könnte Sie auch interessieren: Was ist WordPress

Keine Artikel mehr verpassen

Melden Sie sich zu unserem Newsletter an und erhalten Sie regelmäßig die neuesten Beiträge sowie Tipps und Tricks rund um Online-Themen direkt in Ihr Postfach.

Kontakt

Bitte lasse dieses Feld leer.

Neueste Beiträge

Neuestes Projekt