Die Best Full Screen Hintergrund Bildgrößen für Web-Design

Die Best Full Screen Hintergrund Bildgrößen für Web-DesignDie Best Full Screen Hintergrund Bildgrößen für Web-Design

Retina-Geräte

Retina-Displays werden immer häufiger und haben ihre eigenen Sonderausgabe&# 8211; die Bildklarheit wir hoffen zu halten, muss das Bild 2-fach größer sein. Dies gilt für Hintergrundbilder sowie Standard-Bildelemente wahr.

Retina-Displays, wie sie auf dem iPad 3. Generation und höher, iPhone 4 und höher, und viele andere, verwenden mehr Pixel pro Zoll als ein Standard-Bildschirm (hier einige gute Detail auf, dass aus Wikipedia). Dies macht in Standardgröße Bilder sehen ein wenig unscharf, wenn sie auf den High-Density-Bildschirmen angezeigt. Web-Entwickler überwinden dies durch Bilder, die doppelt so groß wie normal zu schaffen und sie dann mit der halben Größe angezeigt werden. Das Endergebnis ist ein Bild, das die gleiche Größe ist, dass Sie es in erster Linie sein wollte, aber es sieht gut aus auf Standard- und High-Density-Bildschirme.

Dies kann für einige wirklich große Bilder machen, wenn Sie Vollbild-Hintergründe redest über. Wenn Sie nicht vorsichtig sind, können diese Ihre Seite Downloadgröße zu erhöhen und somit die Download-Geschwindigkeit. Die gute Sache über Hintergründe, ist jedoch, dass sie nicht in der Regel von Ihrem Gerät abgerufen werden, sofern sie nicht auf dem Bildschirm sichtbar sind. Also, wenn Sie einen Hintergrund in einer Medienabfrage gestellt, die nie von der Seite aufgerufen wird, wird das Bild nie abgerufen, um die Bandbreite zu sparen.

Ich habe eine schnelle Fallstudie apple.com/iphone verwenden und sie behandelt sie einfach durch die Größe ihrer Hintergrundbilder auf drei verschiedenen Bildschirmauflösungen zu verdoppeln. Sehen Sie diese Diskussion in den Kommentaren unten für den vollständigen Details und CSS-Code.

Apple-ging diese mit für Nicht-Retina:

  • 1440px x 678px für Bildschirme 1024 und bis
  • 1068px x 648px für weniger als 1024
  • 736px x 460PX für weniger als 768

Für Retina ( „-webkit-min-device-Pixel-Verhältnis: 1,5“ mit Medienanfragen), gingen sie mit:

  • 2880px x 1356px für Bildschirme 1024 und bis
  • 2136px x 1296px für weniger als 1024
  • 1472px x 920px für weniger als 768

Jeder der Hintergrundbilder werden für Retina verdoppelt. Also, wenn Sie Apple als einen guten Standard vertrauen, dann würde ich mit Doppel gehen sagen.

Downloadgeschwindigkeit / Ladezeit der Seite

Es gibt ein paar größere Studien (gomez.com und akamai.com) diskutieren, wie Ladezeit beeinflusst Umsatz. Sie schließen daraus, dass:

Langsamer Ladezeit = unglücklich Benutzer = weniger Umsatz

Also, wie viel ist das perfekte Hintergrundbild auf Ihrem Design wert? Und, wenn Sie mehrere Hintergrundbilder für einen Schieber oder Fader sind, wie groß ist gerade groß genug, um die Ladezeiten bissig zu halten?

Wenn ich eine Seite kennen große Bildelemente haben muss, ich schießen in der Regel die gesamte Seite stets auf den unter 1 MB Gesamtgröße. (Dies ist zu groß, meiner Meinung nach, aber immer noch machbar für die meisten Besucher heute.) Ich versuche, weniger für ein einzelnes Bild zu halten, als 100 KB.

Eine weitere Überlegung ist, ob oder ob nicht das gleiche Hintergrundbild (n) werden während der Stelle wiederverwendet werden. Wenn Sie den gleichen großen Hintergrundbild auf alle verwenden, oder auch mehrere, Seiten Ihrer Website, können Sie es sich leisten, eine höhere Auflösung zu verwenden, da nach der ersten Belastung, wird es in Ihrem Browser des Besuchers im Cache gespeichert werden. Wenn Sie jedoch ein anderes Bild auf jeder Seite oder jedem neuen Abschnitt verwenden, wird Ihre Besucher müssen jeden einzelnen Download, längere Ladezeiten verursacht.

Und falls Sie ein einzelnes Hintergrundbild verwenden, können Sie natürlich eine höhere Auflösung als sich leisten, wenn Sie mehrere Bilder für einen Hintergrund Schieber laden.

Implementierung

Feste Größe vs Flüssigkeit vs Responsive

Vielleicht der größte Teil der Implementierung ist, ob Ihre Website eine statische Größe ist. Wenn Sie eine Flüssigkeit Layout-Website oder eine Website, die Medienanfragen zu dienen unterschiedlichen Strukturen verwendet, werden Sie unterschiedliche Bedürfnisse haben.

Auf einer festen Größe Website, Sorgen Sie sich um die Ränder des Hintergrundbildes in Bezug auf die Bildschirmgröße. Werden Sie halten das Bild zentriert, nach links oder nach rechts? Wird es strecken, werden abgeschnitten, ausgeblendet, oder wiederholen? Wenn es reicht, sind die Elemente im Vordergrund noch lesbar? Etc.

Auf einer Flüssigkeit Website, müssen Sie in allen möglichen Bildschirmgrößen alle festen großen Website Fragen berücksichtigen. Wird das Hintergrundbild mit dem Inhalt zu bewegen? Wird es zu schrumpfen oder dehnen die Größe? Wenn es zu klein oder riesig ändert die Größe wird es lächerlich aussehen oder weiße Ränder haben?

Auf einer ansprechenden Website, die Medien-Anfragen verwendet, sollten Sie die fester Größe Fragen, sondern haben eine „out frei Gefängnis erhalten ‚Karte … naja vielleicht nicht“ frei „. Mit Medien-Anfragen haben Sie die Möglichkeit, aus dem Hintergrundbild (s) zu tauschen, die genauen Bedürfnisse der einzelnen Bildschirmgröße passen Sie möchten. Erstellen von Hintergrundbilder für verschiedene spezifische Bildschirmgrößen kann eine Menge Arbeit, aber es bedeutet, dass Sie die Website zu halten suchen, wie Sie es möchten.

CSS und JavaScript

Ein weiterer Teil der Beantwortung der Frage, denkt über, wie du gehst, es geschehen zu lassen. Es gibt derzeit mindestens ein halbes Dutzend Möglichkeiten, um ein Vollbild-Hintergrundbild oder Schieberegler zu implementieren. Abgesehen von Plugins und vorgefertigten Schieberegler, die sich darum kümmern uns gibt es diese relativ einfache Methoden:

      • CSS3: Hintergrund-Größe. Abdeckung
      • CSS3: Hintergrund-size: enthalten
      • CSS angewendet lt; imggt ;: Breite: 100%; height: auto; min-height: 100%; min-width: 1440px
      • CSS angewendet lt; imggt ;: top: 0; links: 0; position: fixed; min-Breite: 100%; min-height: 100%;
      • jQuery: Sehen Sie diese CSS-Tricks Artikel

      Jede dieser Methoden hat ihre Stärken und Schwächen, aber Sie müssen zu sortieren, durch die man geht, am besten für jeden bestimmten Ort zu sein.

      Besonderer Hinweis für Slider Implementierung

      Wenn Sie mehrere Bilder verwenden in den Hintergrund zu drehen, empfehle ich die Bilder Javascript faul Last verwenden. Die Idee ist, zu warten, bis die Seite vollständig geladen ist, bevor Sie die Hintergrund Schieber Laden von Bildern (mit Ausnahme der ersten, die sich zunächst geladen werden soll). Andernfalls müssen die Besucher geduldig warten, während die großen Bilder herunterladen … und wer in diesen Tagen Patienten.

      Entwurfsüberlegungen

      In vielen Designs kann das Hintergrundbild stehen abgesehen von den Vordergrundelementen. Oft werden die Navigation und Hauptinhaltsblöcke haben genug visuelle Trennung vom Hintergrundbild, das Sie mehr Flexibilität, wie das Hintergrundbild haben aussieht. Wenn das Bild ein wenig oder abgeschnitten, um ein wenig gestaucht oder rechts bzw. links verschoben ein wenig es hat keinen Einfluss auf das Gesamtdesign.

      Manchmal aber ist das Hintergrundbild in das Design integriert und erfordert spezielle Dimensionierung und Positionierung. Nehmen wir zum Beispiel, dass Sie einen großen Swoosh in dem Hintergrundbild haben, dass der Header eine genau die richtige Stelle überqueren muss. Oder sagen Sie ein Gesicht oder eine Person, die völlig fehl am Platz aussehen würde, wenn es von einem Vordergrundelement verschoben oder bedeckt ist. In diesen Fällen haben Sie viel weniger Flexibilität im Hintergrund Bildgröße. Die Entscheidung wird im Wesentlichen durch das Design vorgegeben und Sie tun, was sie es passt zu machen braucht. Oft „, was es braucht“ ist Medienanfragen zu liefern das gleiche Bild in verschiedenen Größen mit unterschiedlichen Bildschirmgrößen zu passen.

      Abschließende Gedanken

      Mit all diesen Bildschirmauflösungen, Download-Zeiten, und Implementierungen zu prüfen, wie finden Sie die passende Größe Hintergrundbild solide die User Experience zu halten? Viele Entwickler für etwas in der Mitte zu schießen, eine Bildgröße Kommissionierung, die groß genug ist, um pixely nicht bekommen, klein genug, um schnell zum Herunterladen und korrekt arbeiten, und mit einem Verhältnis, das so wenig Verzerrung verursacht&# 8211; zerquetschen oder Strecken&# 8211; oder Zuschneiden wie möglich.

          1. Zusammen Menschen ein 1,6-Verhältnis den größten Teil der aktuellen Nutzer bilden mit
          2. Es gibt immer mehr Beliebtheit und Verfügbarkeit von 16: 9 (1,78-Verhältnis)
          3. Doch immer noch Millionen von Menschen sind mit good ol ‚1024 x 768 (1,33-Verhältnis)
          4. Ich möchte in der Regel alles, was auf dem Bild zu sehen&# 8211; es gibt werfen nicht oft weg Portionen auf meine Bilder
          5. Sein um 100KB in meiner Erfahrung Ein optimiertes Farb jpg Bild von 1440 x 900 endet, die groß ist, aber nicht riesig für die meisten Geräte und heute Download-Geschwindigkeiten.

        Da alles, was habe ich gewählt, um ein Verhältnis von 1,6 zu verwenden heutigen Nutzer zu dienen, zu wissen, dass meine Bilder oft abgeschnitten werden werden oder durch neuere Monitore und Geräte zerquetscht.

        Der 1,6-Verhältnis macht normalerweise meine Bilder haben alles zeigt, wenn der Größe verändert, wenn ich auf einer Website bin arbeiten, die nicht das Seitenverhältnis nicht beibehalten oder erfordert ein Teil des Bildes in ein unviewable Bereich drängen. Ich wähle 1440 breit, um die meisten neuen Bildschirme anzupassen.

        Also dann

          • 1440 x 900 ist meine magische Zahl für die allgemeine Vollbildhintergründe.
          • Wenn es sich um eine Teilbildschirmhöhe Design ist, dann halte ich 1440 und tun, was Höhe genannt wird.
          • Wenn es sich um eine volle Breite Hintergrund Schieber mit mehr als 3 oder 4 Bildern, ich Größe so weit unten wie 960 x 600 auf die Ladezeit zu sparen zu viel, ohne Verminderung der Bildqualität, wenn sie dehnen.
          • Wenn Sie können, Medien-Anfragen verwenden aus einem Pool von 3 oder 4 perfekt große Bilder für jedes Bild in den Hintergrund zu dienen

          Andere Beiträge können Sie genießen:

          gt; @media nur alle und (max-width: 1024px) und (max-height: 768px) lt;
          Körper lt;
          -moz-Hintergrund-size: 1024px 768px;
          Hintergrund-size: 1024px 768px;
          gt;

          Mit einem Hintergrund-position: fixed Erklärung sollten Sie müssen nur den Hintergrund-size: Abdeckung (und es ist Anbieter Varianten wie -moz-background-size). Denn es sieht aus wie Sie zum Hintergrund wollen den gesamten Bildschirm auf allen Bildschirmgrößen zu füllen, sollten Sie keine Medien-Abfrage für die 1024px Größe verwenden müssen. Stattdessen wird der nicht medien Abfrage bodylt; gt; Erklärung sollte kümmern sich um alles.

          Ich bin nicht vertraut mit allen spezifischen Fragen, die es anders auf dem Android-Tablet machen würde verhalten. Es scheint, wie die folgenden sollte für Sie arbeiten:

          danke für die Info, war hilfreich, aber im noch stecken, wie mein Hintergrund in Dreamweaver genau platzieren alle Bildschirme (Auto-Größe) zu passen. mein erstes attemp wqas high res bei 2880&# 215; 1800, die ich denke, ist zu groß, hey. im CS5.5
          alle Codes ive versucht, nicht arbeiten und und scrollen müssen, um zu Bildschirm passen dosnt, die ich als meine Boden zurück Homepage gar nicht wollen. können Sie mir bitte? Also ich denke, 1440&# 215; 900 ist meine beste Wette, wie Sie sagen.

          vielen Dank und gute Infos! &# 128578;

          Meine Freude Shea.

          Um einen Hintergrund nicht mit der Seite blättern&# 8211; an Ort und Stelle bleiben, während alles andere über die Oberseite der es sich bewegt&# 8211; Sie müssen ihre CSS background-position, „wie dies behoben zu setzen:

          In Bezug auf Größe, werden Sie den Anruf als zu dem, was am wichtigsten ist machen müssen: dass das Bild das Seitenverhältnis zu halten – nicht quetschen oder strecken; oder dass das Bild den gesamten Bildschirm ausfüllen.

          Um es den gesamten Bildschirm ohne harte Kanten an den Seiten zu füllen, können Sie die Hintergrund-size-Eigenschaft verwenden, und wählen Sie das Beste aus "enthalten" oder "Abdeckung" für Sie. Oder, wenn Sie ein Bild verwenden hinter alles eingestellt (im Gegensatz zu einem technischen Gegensatz "Hintergrundbild"), Dann können Sie die Breite auf 100% und die Höhe auf Auto gesetzt und eine Größe auswählen, die vertikal abgehackt für die meisten Bildschirme werden nicht.

          Beachten Sie, dass dies alles in der CSS durchgeführt wird. Also, in Dreamweaver müssen Sie die Hilfedateien zu suchen, wie die CSS für Ihre Seite zu bearbeiten, sei es Inline-CSS oder eine separate Sheet.

          Große Artikel und so wertvolle Informationen. Ich Kommentar so gut wie nie auf Artikel konnte aber nicht verlassen, ohne zu sagen „Job gut gemacht. Ich mit einem Lesezeichen versehen werde und studieren Ihre Beratung. Vielen Dank.

          Meine Freude Fran, froh, dass Sie fand es hilfreich.

          Ihre Frage eine Menge Variablen hat zu prüfen, um eine gute Antwort zu erhalten (merke ich sagen „gut nicht“ richtig, weil ich nicht davon überzeugt bin, gibt es eine richtige Antwort hier). Zum Beispiel wird die Hauptzielgruppe für eine schnelle Verbindung oder langsam mit? Seien Sie auf einem Desktop oder mobilen Gerät? Tablet oder Handy? Oder alle der oben genannten? Ist der Standort als meist Broschüre oder für E-Commerce einrichten? Ist es Informationen schwer oder Bild schwer? Wie wichtig sind die Hintergrundbilder zum Branding und Botschaft der Website? Ist Speicherplatz auf dem Server, Bandbreite, CPU, etc. eine Überlegung?

          Zu beantworten, werde ich denke an eine „typische“ Prospekt-Art Website, die vor allem Desktop-Besucher mit einem kleineren Teil der mobilen Besucher und ohne Einschränkungen für den Server-Bandbreite erhält.

          Da diese, meine Faustregel, dass die gesamte Seite unter 1 MB groß sein sollte. Dies ist eine Zahl, die ich im Laufe der Zeit gekommen sind, und wird nur durch anekdotische Beweise, nicht wirklich harten Daten. 1MB scheint heute für die meisten Menschen schnell genug, um zu laden, dass sie nicht hüpfen, dass sie zu einem langsamen Ladestelle nicht verärgert sind, und dass die Besucher nehmen immer noch die Aktionen, die Sie wollen, dass sie. Ich benutze 1MB als absolute Obergrenze, kein Ziel zu erreichen. Im Idealfall würden alle Seiten 1/10 sein, dass Größe. So, abhängig von den anderen Seitenbilder, Skripts, usw., die Dateigröße des Hintergrundbildes kann größer oder kleiner sein.

          Super Artikel, danke für die Buchung!

          Ich kaufte ein WordPress-Theme, das einen flächendeckenden Hintergrund hatte. Ich wollte den Hintergrund ein Bild zu sein, wenn ich das Bild hochgeladen es funktionierte großartig auf meinem 15&# 8242; Zoll-Laptop. Wenn ich meine Website auf einem größeren Bildschirm versucht, hat der Hintergrund nicht den ganzen Bildschirm passen und die Seiten sah schrecklich aus. Also fragte ich einen Weg, um es jede Bildschirmgröße fit zu machen, und ich habe den folgenden Code

          Jetzt ist der Hintergrund sieht gut aus und passt auf alle Bildschirmgrößen, sondern ein Problem in der Kopfzeile entsteht nach diesem Code. Als ich nach unten scrollen, werden die Sachen in der Kopfzeile unter meinem Namen bekommen, weil es transparent ist. Ich will nicht einen anderen Hintergrund für die Kopfzeile zu verwenden. Haben Sie eine Lösung dafür? Ich kann das Hintergrundbild machen so groß, jede Bildschirmgröße angepasst, ohne den Code oben angegebenen verwenden, aber die Größe des Bildes geht um 400 KB zu sein, die keine gute Idee ist. Kannst du mir bitte helfen?

          Vielen Dank für Ihre Frage Ouss.

          Nach einem kurzen Blick auf Ihrer Seite, sehe ich das Problem Sie beschreiben. Es sieht aus wie Ihr Thema für die gleiche Hintergrundbild setzt sowohl für den Körper und den Header und verwendet dann Positionierung, um es richtig aussehen.

          Andere Möglichkeiten könnten sein:
          ein. Machen Sie das Hintergrundbild groß genug, um den größten Bildschirm mit Ihnen aufnehmen möchten, passen (wie Sie bereits erwähnt)
          b. Erstellen Sie eine separate Hintergrundbild für die #header div dass nicht klar ist,
          c. Verwenden Sie eine Hintergrundfarbe für #header die Ihr Thema Komplimente und sieht okay den oberen Bereich Füllung zu verstecken Scrollen

          Es funktionierte! Aaron Sie sind ein Genie! Ich bat 3 Web-Designer, einschließlich der Person, die tatsächlich mit dem Thema gemacht und keiner von ihnen gedacht, um die Positionierung der Anpassung. Ich schätze Ihre Hilfe. Vielen Dank! &# 128578;

          Ich habe noch eine Frage, es ist nicht in den Hintergrund verwandt, aber ich wusste nicht, wo ich es im Blog veröffentlichen sollte, so bin ich im Voraus leid, wenn ich es nicht hier posten sollte.
          Ich versuche, Beschriftung auf jedem Foto in den Schieber mit dem gleichen Stil / Position zu schaffen, wie es in diesem Thema gemacht hat http://theme.semicolonweb.com/pageflow/
          Es funktioniert nicht. Ist es etwas, das Sie mit mir helfen kann?

          Ich bin mit dem Thema nicht vertraut, aber es scheint, dass in dem Beispiel, das sie verwenden, was sie den „ei-Slider, während Sie die verwenden“ nennen flex-Slider. Haben Sie die Möglichkeit, innerhalb des Themas einen anderen Schieberegler für die Homepage zu wählen? Wenn ja, ich vermute, es gibt Möglichkeiten spezifisch für den Titel und Untertitel Text für Sie da.

          Wie Sie aus dem Beispiel sehen können, ist hier das Format, das sie für die Folie Textbereich verwenden:

          lt; div class ="ei-Titel"gt;
          lt; h2 style ="Opazität: 1; Bildschirmsperre; margin-right: 0px;"gt; lt; spangt; Text des printinglt; / spangt; lt; / h2gt;
          lt; h3 style ="Opazität: 1; Bildschirmsperre; margin-right: 0px;"gt; lt; spangt, Lorem Ipsum ist einfach Dummy-Text der Druck und Satz industry.lt; / spangt; lt; / h3gt;
          lt; / divgt;

          Quelle: www.webmalama.com

          Read more

          Schreibe einen Kommentar

          Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

          vier × 1 =