Kleine Fotos auf großen Bildschirmen

Fotos können auf kleinen Bildschirmen hervorragend aussehen, aber auf großen Displays kümmerlich erscheinen. Vorsicht ist beim automatisierten Beschneiden und Skalieren von Fotografien geboten. Schließlich kann dabei der Sinn der Elemente verloren gehen. Im schlimmsten Fall überlappen sich Fotos und Bedienelemente auf bestimmten Bildschirmen. Daher informieren wir Sie über Gefahren, die beim Einbinden von Elementen wie Fotos und Grafiken bestehen. Wir klären über Lösungen auf, die das Design von Internetseiten vereinfachen.

Große Monitore nutzen: Grafiken einbinden

Eine Strategie, die zunächst auf mobile Endgeräte (Mobile First) setzt, steht beim Design heutiger Internetseiten oftmals im Fokus. Allerdings sehen Webinhalte, die für Smartphones und Tablets entstehen, auf großen Bildschirmen nicht zwangsläufig gut aus. Größere Laptops und Desktop-Monitore sollten Sie beim Design von Webinhalten aber nicht vergessen, damit Sie die Nutzer derartiger Ausgabegeräte ebenso erreichen. Daher empfehlen wir zunächst eine Analyse, durch die Sie die Qualität der Fotografien überprüfen. Schließlich sollten Sie nur digitale Daten verwenden, die auch auf aktuellen Bildschirmen, die mit sehr hohen Auflösungen arbeiten, gut aussehen und verwendbar sind.

Probleme des Webdesigns: Skalieren und Zuschneiden

Manche Designer legen, um eine Darstellung auf größeren Bildschirmen zu ermöglichen, skalierte Varianten an, die sie in separaten Ordnern ablegen. Häufig führt diese automatisierte Prozedur zu Fotos, die im Vergleich zu umgebenden Seitenelementen - wie zum Beispiel Überschriften oder Texten - viel zu groß sind. Manchmal überlappen sich Elemente, wodurch sich die Bedienung der Webseite erschwert. Bei der automatisierten Skalierung von Fotos kommt es häufig zu drei Grundproblemen, die sich vermeiden lassen.

1. Niedriger Informationsgehalt: Wenn die Fotos zu wenige Informationen enthalten, besteht die Gefahr, dass solche Elemente auf großen Bildschirm sehr unansehnlich wirken.
2. Scrollen: Um das große Foto zu umsteuern, müssen Nutzer die Maus oder ein Touchpad nutzen. So ist das Foto ein störendes Hindernis, das auf großen Monitoren zusätzliche Interaktionen erfordert.
3. Geringe Fotoqualität: Pixel-Artefakte und verschwommene Inhalte sind das Resultat, wenn Sie ein Foto von schlechter Qualität verwenden. Grundsätzlich verstärkt sich jede Schwäche, je größer das Element erscheint.

Durch Zuschneiden schützen Sie das Foto davor, ungewöhnlich groß zu erscheinen. Manche Designs fokussieren auf die Höhe eines Fotos, andere Webanwendungen bevorzugen die Breite. Bei automatisierten Verfahren besteht die Möglichkeit, dass das Foto falsch gestreckt wird. Dafür bleiben umgebende Elemente sichtbar. Allerdings leidet die Wirkung von Digitalfotos, wenn Sie beim Zuschneiden nicht mit Vorsicht vorgehen. Die Gefahr, dass das Element seine Bedeutung verliert, weil Fotos nicht mehr mit anderen Seitenelementen harmonieren, besteht auch in diesem Fall.

Lösungen für Webseiten: Skalieren und Beschneiden

Achten Sie beim Skalieren und Beschneiden von Fotos unbedingt auf die Details. In den meisten Fällen sollten Sie das Foto nicht einfach in der Höhe oder in der Breite verändern, um es für größere Monitore zu optimieren. Das Resultat wäre ein schlecht vergrößertes Foto. Stattdessen gilt es, die Höhe und die Breite so anzupassen, dass das ursprüngliche Seitenverhältnis bestmöglich erhalten bleibt. Stoppen Sie in jedem Fall, bevor Ihr Foto unangemessen groß erscheint, weil der Inhalt ansonsten für den Nutzer schwer zu verstehen ist. Danach integrieren Sie das Foto in die Website, wodurch Sie den Umfang der Webanwendung vergrößern.

Nutzen Sie idealerweise Fotografien, die sich für unterschiedliche Auflösungen eignen - und daher auf verschiedenen Bildschirmen gut aussehen. Berücksichtigen Sie nur die Dateien, die sich in mehreren Variationen nutzen lassen. Wählen Sie ausschließlich diejenigen Fotos aus, die auf unterschiedlichen Monitoren von Endgeräten funktionieren. Achten Sie dabei darauf, dass die Grafik in größeren und kleineren Auflösungen ansprechend aussieht. Stellen Sie sich am besten die folgenden Fragen, um einen effektiven Auswahlprozess einzuleiten:

• Sieht das Foto bei einer Vielzahl unterschiedlicher Größenverhältnisse gut aus?
• Ist das Foto groß genug, dass es von oben, von unten und seitlich zu beschneiden ist und ohne dass der Inhalt leidet?
• Existiert ein zentrales Fotoelement, dass bei Nutzung aller gängigen Bildschirm-Größen sichtbar ist?
• Ist das Foto für jede Design-Variante nötig?
• Besitzt es genügend Wirkung, um die Integration zu rechtfertigen?

Gute Beispiele für die gelungene Nutzung eines einzelnen Fotos sind verschiedene Reise-Portale. Die Anbieter verwenden ein malerisches Reise-Foto, das in unterschiedlichen Größen und verschiedenen Seitenverhältnissen funktioniert. Das mobile Foto skaliert sich auf größeren Bildschirmen bis zu einem Maximum. Je größer der Bildschirm ist, desto mehr Bilddetails offenbaren sich. Tropische Inseln funktionieren als Panorama-Bild oder als vertikale Version, die auf kleineren Displays von Smartphones und Tablets erscheinen.

Lösungen für Anwender: Grenzen für Fotos definieren

Es gibt den Punkt, an dem Fotos trotz hoher Qualität eine Dimension erreichen, an dem sie nicht mehr ansprechend aussehen. In solchen Fällen können Sie die Größe des Fotos innerhalb von Internetseiten definieren. Skalieren Sie das entsprechende Element am besten so lange, bis es an Bedeutung oder an Qualität verliert. Durch diese Grenze entsteht auf größeren Monitoren freier Raum, der durch den Hintergrund oder zusätzlichen Content befüllbar ist.

Ein Beispiel bietet die Internetseite der Hotelkette Marriott. Die Webseite erhöht die Größe von Fotos bis zu einem definierten Maximum. Danach fügt das Webportal graue Balken hinzu, die das Foto umranden.

Lösungen für Anwender: Entfernung oder Austausch von Fotos

Eine weitere Option, die aktueller Bildschirm-Vielfalt gerecht wird, ist die Nutzung von verschiedenen Fotos für unterschiedliche Displaygrößen. Wählen Sie Fotos, die mit den spezifischen Variationen der Internetseite funktionieren. Vielleicht stoßen Sie auf Bildschirm-Größen, bei denen Ihre Internetseite besser aussieht, wenn Sie gar kein Foto verwenden. Ein Beispiel ist die aktuelle Variante der bereits erwähnten Webseite von Marriott. Die sieht zwar auf größeren Bildschirmen gut aus, weil eine horizontale Ausrichtung existiert, funktioniert aber nicht auf kleineren Displays von Tablets und Smartphones.

Die vertikale Darstellung solcher Internetseiten macht integrierte Bilder zu Quadraten. Anpassung wirkt sich auf diesen Inhalt aus, der quadratische Formen annimmt. Oftmals scheint es Unternehmen zu aufwendig, verschiedene Fotografien zu verwenden. Wenn Ihr Betrieb allerdings eine größere Anzahl an repräsentativen Fotos besitzt, sollen Sie unbedingt über eine vielfältige Nutzung nachdenken, die aktuelle Monitore von Nutzern berücksichtigt. Wenn Sie unterschiedliche Fotografien verwenden, finden Sie bestimmt optimale Grafiken, die zur jeweiligen Auflösung aktueller Bildschirme passen.

Lösungen für Entwickler: Designs für alle Bildschirm-Größen

Designer und Entwickler können die Probleme verstehen, die wir in diesem Artikel anreißen. Sie vergrößern sich, wenn die Entwicklung einer Internetseite über einen einzigen Monitor erfolgt. Ähnliche Gefahren existieren, wenn zur Entwicklung nur ein einziges Endgerät verwendet wird. Schließlich besitzen Rechner natürliche Grenzen, wodurch sie sich von anderen Endgeräten unterscheiden. Grundsätzlich müssen Sie bei der Entwicklung von Websites darauf achten, wie das Design auf ungewöhnlichen Displays aussieht. Denken Sie zudem an die Widescreen-Monitore, die recht populär sind.

Während Sie eine Webanwendung für unterschiedliche Bildschirme optimieren, gilt es zugleich darauf zu achten, dass ein nützliches und sinnvolles Design mit schönen Fotos entsteht. Die Vorzüge des entstehenden Designs sollten sich auf allen Endgeräten bemerkbar machen, wobei die Bildschirm-Größe keine Rolle spielt. Bei der Entwicklung von Internetseiten, die auf allen Monitoren hochwertig wirken, stehen wir Ihnen gerne zur Seite. Wir beraten Sie umfassend, wenn Sie ein Webprojekt lancieren wollen, das sich durch außergewöhnliche Fotos und Grafiken von der Masse der Internetseiten abhebt.