Best Practices für Browserbilder in voller Breite?

Was sind die Best Practices für Bilder in größeren Ansichtsfenstern?

Für welche Browsergröße sollten wir entwerfen? Das heißt, wie gehen wir mit hochauflösenden Monitoren um und wie viel Prozent der Benutzer haben große Bildschirme?

Wie können wir am besten mit der Höhe von Heldenbildern umgehen, da wir wirklich entscheiden müssen, mit welcher Bildschirmauflösung wir arbeiten möchten?

All dies geschieht natürlich unter Einhaltung der 12-Spalten-Rasterphilosophie;)

Asprilla,

Während die obigen Kommentare sehr gute technische Punkte hervorheben, empfehle ich, Ihre Arbeit auf einen bestimmten Kunden zuzuschneiden. Beginnen Sie mit einem Blick auf Google Analytics - Berichterstellung / Technologie / Browser & Betriebssystem / Bildschirmauflösung der aktuellen Website. Auf diese Weise verbringen Sie Ihre Zeit und das Budget Ihres Kunden mit Bedacht, indem Sie auf die spezifischen Bedürfnisse Ihres Kunden eingehen und nicht allgemeine Richtlinien implementieren. Wir mussten unseren Kunden gelegentlich sogar davon abraten, vollständig reaktionsschnelles Design zu betreiben, nur weil ihr Nicht-Desktop-Verkehr die Kosten nicht rechtfertigen würde.

Beim Bereitstellen von Bildern für Betrachter sind verschiedene Dinge zu beachten.

1. Halten Sie das Bildverhältnis auf den ursprünglichen Abmessungen

Wir tun dies, um zu verhindern, dass das Bild verzerrt wird, und um zu verhindern, dass Bilder verschwommen werden. Wir können entweder das Maßverhältnis gleich halten oder Teile abschneiden, die nicht passen.

Wenn Sie ein <img>Element oder ähnliches verwenden, ist dies ziemlich einfach. Sie müssen lediglich eine Menge widthoder eine heightODER-Menge max-widthoder verwenden max-height.

Bei einem Bild mit voller Ansichtsfensterbreite ist dies jedoch etwas komplexer. Es gibt verschiedene CSS-Möglichkeiten, von denen die beste background-size:coverwie das erste verknüpfte Beispiel im Artikel und in der Antwortshow von Talkingrock ist .

Darüber hinaus haben wir jetzt die Möglichkeit, die Funktionen zu verwenden, die in der Antwortbildspezifikation enthalten sind, einschließlich srcsetund des <picture>Elements, die sehr nützlich sind. Ich spreche später in dieser Antwort mehr darüber.

2. Geben Sie den Zuschauern nur die Bilder, die sie benötigen

Um das Laden der Seite zu beschleunigen und zu verhindern, dass Benutzer mehr Daten übertragen müssen, ist es von entscheidender Bedeutung, dem Endbenutzer nur die Bilder bereitzustellen, die er benötigt, wenn er sie benötigt. Dies bedeutet, dass wir ihnen ein Bild liefern, das dieselbe Größe hat oder nur ein wenig größer ist als das Ansichtsfenster, das sie verwenden, und darauf warten, Bilder zu laden, die erst unmittelbar nach dem ersten Laden der Seite angezeigt werden.

Wir können ein Bild mit angemessener Größe mithilfe von CSS @mediabereitstellen, indem wir Abfragen verwenden, wenn wir Hintergrundbilder verwenden. Die Bilder, die nicht in der verwendeten Medienabfrage enthalten sind, werden nicht geladen . Ich würde empfehlen, mindestens drei Fotogrößen zu verwenden (was mindestens drei Medienabfragen bedeutet), aber ein paar mehr zu haben, könnte in Bezug auf die Leistung sehr hilfreich sein. Das Folgende ist ein Beispiel, sollte jedoch normalerweise mit einigen allgemeinen Haltepunkten für das Layout Ihrer Site übereinstimmen.

@media (max-width: 320px) { /* For phones (this breakpoint is the one I'm least sure about) */
    ... background-image(imageURLforPhones.png); ...
}
@media (min-width:501px) and (max-width: 1024px) { /* For tablets and such */
    ... background-image(imageURLforTablets.png); ...
}
@media (min-width: 1025px) { /* For large screens */
    ... background-image(imageURLforLargeScreens.png); ...
}

Aber seien wir ehrlich: Wir sind nicht gut darin, Haltepunkte auszuwählen, und wir sind auch nicht perfekt darin, Bildabmessungen bei einer bestimmten Bildschirmgröße auszuwählen. Wäre es nicht großartig, wenn wir das etwas "magisch" für uns tun lassen könnten?

Die gute Nachricht ist, dass wir jetzt können !

Mit der reaktionsschnellen Bildspezifikation können wir den Browser all dies für uns entscheiden lassen, vorausgesetzt, wir helfen ein wenig. Die sehr nützliche srcsetEigenschaft kann mit einem <img>oder einem <picture>Element verwendet werden. Für die Auflösungsumschaltung wie hier sollten wir ein <img>Element verwenden.

Das Folgende ist ein Beispiel für den HTML-Code, der benötigt wird, um srcsetseine Arbeit zu erledigen. Weitere Informationen finden Sie in Yoav Weiss ' großartigem Artikel zu diesem Thema. Das Beispiel wird daraus gezogen.

<img src="cat_500px.jpg"
     srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
     width="500" alt="lolcat">

_{Randnotiz: Wenn Sie dasselbe Bild mit bestimmten Abmessungen bei bestimmten Ansichtsfenstergrößen bereitstellen müssen, können Sie das sizesAttribut verwenden.}

Ich sage nicht, dass die Verwendung srcsetnotwendigerweise besser ist als die Verwendung eines CSS-Hintergrundbilds. Ich habe selbst nicht genug damit gearbeitet, um dies sicher zu sagen, aber es ist möglicherweise ein besserer Weg.

Um die Leistung zu verbessern, können wir auch Bilder "verzögert laden", die anfangs nicht sichtbar sind. Dies bedeutet, dass wir verhindern, dass sie anfänglich geladen werden, aber mit dem Laden beginnen, sobald die erste Seite geladen ist. Auf diese Weise können wir den Betrachter dazu bringen, die Seite so schnell wie möglich zu sehen und später einige Details einzugeben. Hier ist eine Möglichkeit , dies zu tun. Ich werde im Moment nicht auf Details eingehen.

3. Stellen Sie sicher, dass der Inhalt des Bildes, das Sie anzeigen möchten, angezeigt wird

Wenn wir die richtigen Abmessungen und eine hervorragende Leistung haben, ist das fantastisch, aber wenn der Betrachter nicht sieht, was er sehen soll, hat das keinen Sinn. Wenn wir das Bild die ganze Zeit vollständig anzeigen, ist dies kein Problem, aber wenn wir das Bild zuschneiden müssen, kann dies ein Problem sein.

Wir können background-images mit CSS zuschneiden, indem wir background-sizeund verwenden background-position(und eine Art von Verwendung clip, aber das wird normalerweise für künstlerischere, komplexere Formen verwendet). Die genauen Details variieren von Bild zu Bild, je nachdem, wie es implementiert wird.

Die zweite Option ist die Verwendung des <picture>Elements. Wir verwenden dies, wenn wir nur einen Teil des Bildes zeigen möchten, wie hier gezeigt , aber hier ist ein einfaches Beispiel dafür in der Praxis (entnommen aus Jason Grigsbys großartigem Artikel zu diesem Thema).

<picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 32em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
</picture>

Ich möchte wiederholen, wenn Sie nur die Auflösung umschalten müssen, verwenden Sie das <picture>Element nicht , sondern nur das <img>Element mit srcset. Das einzige Mal, dass wir das <picture>Element brauchen , ist für diese Kunstrichtung, dh Clipping usw.

Es besteht auch die Möglichkeit, Server-Seiten zu beschneiden, eine SVG-Maske zu verwenden oder einige Dinge mit Canvas zu tun, aber das liegt etwas außerhalb des Rahmens dieser Antwort.

Einige andere Notizen

Bestimmte Haltepunkte sind nicht so wichtig. Wie bei allen reaktionsschnellen Designs ist es wichtig, für alle Ansichtsfenster das Beste zu geben , aber es gibt keine Medienabfragen, die für alle Websites perfekt sind.

Die Ladezeit der Seite ist sehr wichtig , und Bilder können die anfängliche Ladezeit erheblich verlangsamen. Stellen Sie sicher, dass Sie Bilder laden, die sofort angezeigt werden, dann andere. Versuchen Sie zu verhindern, dass Bilder (wie JPEGs) einen Teil des Bildes anzeigen, während der Rest geladen wird. Optimieren Sie außerdem alle Ihre Bilder so, dass sie die kleinstmögliche Dateigröße haben und dennoch die von Ihnen gewünschte Qualität aufweisen.

Es ist wichtig, sich daran zu erinnern, dass Bilder in den meisten Fällen ein Zubehörteil und keine Notwendigkeit sein sollten. Ich empfehle immer zu testen, wie eine Webseite ohne Bilder aussieht, um sicherzustellen, dass sie verwendbar ist.

Hinweis : Wir können eine Polyfüllung namens Picturefill verwenden , um ältere Browser zu bedienen, die die Spezifikation für reaktionsfähige Bilder nicht unterstützen.

Richtlinien für die Auswahl der Abmessungen Ihres Browserbilds in voller Breite

Ich habe diese durch Forschung im letzten Jahr und durch Experimente in den letzten Tagen für diesen speziellen Anwendungsfall gelernt.

• Wählen Sie ein Bild mit einem einzigen oder gar keinem Brennpunkt.

• Ihre Quellbilddatei muss sehr groß sein (mindestens 5000 x 5000), wenn Sie viele auflösungsabhängige Bilder bereitstellen möchten.

• Für die Hochformatversion sollten Sie ein Seitenverhältnis von verwenden 9w:16h.

• Für die Querformatversion sollten Sie ein Seitenverhältnis von verwenden 4w:3h.

• In beiden Bildern gibt es einen inhaltssicheren Bereich, in dem Sie sicherstellen können, dass ein Teil des Bildes gesehen wird oder über dem Falz liegt, wie es auf Klingonisch heißt.

• Die Inhalte sichere Bereiche für beide Bilder auf der Grundlage dieser fünf Seitenverhältnisse: 3:2, 4:3, 5:3, 16:10und 16:9ist in etwa die oberen drei Viertel der beiden Bilder.

  

• srcsetist der Heilige Gral der Umsetzung von reaktionsschnellen Bildern. <picture>wird wahrscheinlich in Zukunft noch besser sein, ist aber srcsetvorerst König. Überprüfen Sie Zach Saucier Antwort für weitere Informationen zu diesem Thema .

Hier ist ein Beispiel, das ich nach ausgiebigen Experimenten erstellt habe.

Diese Bilder sollten fast jeden Bildschirm abdecken. Ändern Sie die Größe des Vorschaufensters, um die verschiedenen Bilder anzuzeigen. Der Fallback sollte sich auf eines der Bilder im mittleren Bereich beziehen, aber ich habe auf die Seite verlinkt, auf der ich das Bild stattdessen als eine Art geringfügige Zuordnung bezogen habe.

Ich habe versucht, diese Antwort kurz zu halten (dreimal umgeschrieben), obwohl ich die Rechtfertigungen für meine Behauptungen liefern kann, habe ich dies nicht getan, weil dies diese Antwort sehr aufblähen würde. Ich hoffe, Sie können die Rechtfertigungen aus dem obigen Bild ableiten und die Beweise aus meinem Beispiel jsFiddle sehen.

Auf einem 4:3Bildschirm:

Auf einem Super-Breitbildschirm:

Auf einem Porträtmobil:

Hier sind einige zusätzliche Informationen, die Sie möglicherweise nützlich finden.

Bildschirmgrößenstatistik

Die gängigen Bildschirmgrößen variieren. Daher finden Sie hier einige Statistikseiten, auf denen die Bildschirmgrößenauslastung in Prozent, Browsertrends, Betriebssysteme und mehr aufgeführt sind.

1. http://www.w3schools.com/browsers/browsers_display.asp
2. http://www.netmarketshare.com/

Held und große Bilder

Für Hero und andere große Bilder gibt es eine großartige, einfache CSS-Lösung. Es ist background-size:cover. Dies ist nützlich, da es das gesamte Div abdeckt, ohne das Bild bei verschiedenen Bildschirmgrößen zu verzerren, oder wenn das übergeordnete Div seine Form ändert (mehr / weniger Text ...). Es funktioniert, indem Teile des Bildes abgeschnitten werden, um die richtigen Proportionen beizubehalten. Sie können den Hintergrund auch so positionieren, dass die wichtigen Teile immer angezeigt werden (Mitte Mitte, rechts unten ...).

Ein weiterer Vorteil ist, dass das Bild als Hintergrund angezeigt wird, sodass Text und andere Informationen problemlos zum div hinzugefügt werden können. Es funktioniert auch als Hintergrund in voller Größe. Hier ist ein JSFiddle-Beispiel zum Spielen mit Hintergrundgröße: Cover als Vollbildhintergrund und ein anderes mit Hero Div . Ändern Sie die Größe des JSFiddle-Fensters und bearbeiten Sie die CSS-Positionierung, damit sie funktioniert.

background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;

Die Browserunterstützung für die Hintergrundgröße (CanIUse.com) ist sehr gut, und hier ist ein Fix für IE7 und IE8 .

Eine beliebte Lösung für alle unterschiedlichen Anzeigegrößen von Geräten (Desktop / Tablet / Handheld) besteht darin, eine Responsive-Site zu erstellen, die sich neu positioniert, um den verschiedenen Bildschirmgrößen vom Großbildfernseher bis zum Handheld zu entsprechen. Wenn Sie daran interessiert sind, finden Sie hier ein gutes Tutorial für Fortgeschrittene: http://www.elated.com/articles/responsive-web-design-demystified/ .

Responsive Designs funktionieren mit Rasterlayouts. Wenn die Site pixelbasiert ist, gibt es eine Formel, mit der die Pixelgröße in Prozent umgerechnet wird. Eine schnelle Suche mit den Begriffen "Responsive 12-Spalten-Raster" und "Responsive-Spaltenraster-Rechner" ergab viele nützliche Ressourcen wie Responsive 12-Spalten-Drahtgitter, Taschenrechner und mehr. Hier ist ein Beispiel: http://onepcssgrid.mattimling.com/

Die Kurzversion

Versuchen Sie, die Kompatibilität mit der kleinsten Auflösung des Ansichtsfensters zu gewährleisten:

Desktops: 800 x 600/1024 x 768 (in Pixel)

ältere Handys: 320x480 (in Pixel)

Tablets: 800 x 1280 (in Pixel)

Durch Auswahl der niedrigsten Auflösung stellen Sie sicher, dass das Design sowohl für Personen mit kleineren als auch für größere Auflösungen geeignet ist.

Die lange Version

Für mich klingt es so, als ob Sie beide eher an den Ansichtsfenstern für verschiedene Geräte als an der Browsergröße interessiert sind.

Der Browser ist das vollständige Fenster, das zum visuellen Surfen im Internet verwendet wird. Dieser Bereich enthält die Eingabe der Navigations-URL, Registerkarten und Symbolleisten.

Das Ansichtsfenster ist der Bereich des Browsers, in dem eine gerenderte Website angezeigt wird. Dies befindet sich normalerweise unter Symbolleisten und URL. Dies ist der Bereich, an dem Designer normalerweise mehr interessiert sind.

Um sich für eine Bildschirmauflösung zu entscheiden, müssen Sie sich zunächst folgende Fragen stellen: Worauf wird sie hauptsächlich angezeigt? Wenn es für den internen Gebrauch in einem Unternehmen bestimmt ist, können wir davon ausgehen, dass es höchstwahrscheinlich auf einem Laptop oder Desktop verwendet wird. Wenn es für die Verwendung unterwegs gedacht ist, können wir davon ausgehen, dass es hauptsächlich auf Mobilgeräten verwendet wird.

Der aktuelle Trend für Webdesign ist "Mobile First". Hier wird eine Website für Mobilgeräte entwickelt, bevor sie auf andere Plattformen reagiert. Dies liegt daran, dass immer mehr Menschen mobile Geräte für den Internetzugang verwenden, anstatt Desktops oder Laptops.

Möglicherweise sind Ansichtsfenstergrößen sehr hilfreich, um Informationen zu Ansichtsfensterabmessungen zu erhalten. Diese Site bietet das Ansichtsfenster für viele mobile Geräte und einige Desktops. Es sollte Ihnen ermöglichen, die verschiedenen Größen von Ansichtsfenstern zu erkunden.