Beste Bildabmessungen für herunterladbare Hintergrundbilder für PC, HD, Handy und Tablet?

Angenommen, ich möchte eine Website erstellen, die es einem Benutzer ermöglicht, ein Hintergrundbild in Größen für PC, HD, Handy und Tablet herunterzuladen.

Was sind die am häufigsten verwendeten / besten Bildabmessungen, die ich hosten sollte?

Antworten (4)

Gängige Größen für Desktops sind 800 x 600, 1024 x 768, 1280 x 1024 und 1600 x 1200

HD bedeutet heutzutage normalerweise 1080p, also 1920 x 1080.

Siehe auch diese vorherige Frage

Und dieses Größendiagramm des Google-Browsers kann hilfreich sein

Sie müssen wahrscheinlich zuerst über die Proportion nachdenken.

Die klassische Proportion

Das klassische (Oldie-)Verhältnis für Desktops ist beispielsweise 4:3 .

  • 1024 x 768
  • 1280 x 960
  • 1600 x 1200

Einige Pads verwenden denselben Anteil, zum Beispiel das iPad:

  • 2048x1536

Vertikale Ausrichtung

Dies nimmt uns an, dass diese Pads, die in vertikaler Ausrichtung verwendet werden, uns ein Verhältnis von 3:4 geben, was die Werte invertieren würde.

  • 768x1024 zum Beispiel

Der Breitwand

Das Hauptverhältnis beträgt 16:9

  • 1920 x 1080
  • 1366 x 768
  • 1280 x 720

Sie haben den gleichen Fall, wenn Sie eine vertikale Ausrichtung 9:16 wünschen

Variationen

Es gibt viele Variationen in Proportionen und Auflösungen. Sie können sie sich auf diesem Bild aus der Wikipedia ansehen (die Kreise zeigen die Proportionen):

Die Wahrheit ist also, dass Sie Entscheidungen über das Ziel treffen müssen, auf das Sie abzielen.

Mit dieser Google-Suche https://www.google.com.mx/search?q=screen+resolution+statistics können Sie sich einige Trends ansehen

Best Practice ist es, die Auflösung + Verhältnis + Pixel pro Zoll (PPI) zu berücksichtigen.

Beispiel: Ich habe ein FHD 1080*1920-Display auf meinem 15-Zoll-Laptop-Display.

Ich muss für ein FHD 1080p 10-Zoll-Tablet mit der dreifachen Pixelanzahl bei 441 PPI entwerfen.

Wenn ich einen Hintergrund nur mit 1080p gestalte, wird meine Arbeit auf meinem Zielgerät nicht optimal angezeigt.

Gerade bei neuen Geräten spielt die Pixeldichte immer mehr eine Rolle.

Wenn Sie eine Leinwand für ein 1080p-Full-HD-Gerät erstellen, müssen Sie die Leinwand möglicherweise mit einer größeren Größe als 1080 * 1920 erstellen, wenn die Pixeldichte sehr hoch ist. Beispiel: Sie haben ein 1080p-Display mit sehr hohem (PPI). Sie benötigen eine Formel, um die Leinwandgröße zu berechnen, um alle diese Pixel abzudecken, ohne an Qualität zu verlieren. Auch wenn Sie Ihre Leinwand vielleicht mit der 3-fachen Größe von 1080 * 1920 entwerfen, wird die größere Leinwandgröße bei perfektem Maßstab wieder auf 1080 * 1920 verkleinert, da diese Leinwand auf dem Zielgerät nicht mehr größer ist, sie passt perfekt, Pixel für Pixel.

Es ist auch wichtig, einige Asset-Ordner mit einem Basis-PPI und einem für einen hohen PPI zu erstellen.

Dies gilt für native Design-Assets.

Beim Entwerfen für eine responsive Web-UI. Es gibt Bootstraps, UI-Layoutvorlagen, die im Browser richtig skaliert werden.

Aufgrund meiner Ablehnung möchte ich erklären, dass das weltweit beliebteste Betriebssystem Android ist, das eine bestimmte DPI-Formel verwendet, die auf der Android-Entwickler-Website zu finden ist. Aus diesem Grund erstelle ich immer Asset-Ordner und designe immer mit PPI als Ziel, damit alle Android-Geräte abgedeckt sind.

Es stimmt zwar, dass es am besten ist, die größte Größe zu entwerfen und dann von dort aus herunterzuskalieren, wenn Sie etwas in der genauen Größe Ihres Bildschirms entwerfen, ist das das Beste, was Sie bekommen werden; es wird nicht besser, weil du es größer gestaltet hast. Ihr Computer wird es auf die Auflösung Ihres Bildschirms herunterskalieren, wenn das Bild größer ist, also hier kein Vorteil. Und wenn Sie dies auf mehrere Bildschirmgrößen verteilen möchten, ist es besser, mehrere Bilder zu hosten - lassen Sie uns nicht die Bandbreite des Benutzers verschwenden, indem wir ein Bild bereitstellen, das größer ist, als sein Bildschirm verarbeiten kann.
@Luciano Sie müssen sich demütigen und nicht so schnell korrigieren, wenn klar ist, dass Sie einige Dinge lernen müssen. Wenn Sie die Frage richtig gelesen haben, ging es nicht um einen "Computer", sondern um skalierbare Hintergrundbilder / Bilder für alle Geräte. In diesem Fall müssen Sie das DP-Verhältnis für Android befolgen. Sie gehen NICHT nach der Auflösung, da 1080p auf einem Tablet eine geringere Pixeldichte als 1080p auf einem 5-Zoll-Telefon hat. Aus diesem Grund erstellen Sie Asset-Ordner und haben ein Bild für hdpi bis xxxhdpi. Es scheint, dass Sie nichts darüber wissen, und ich rate Ihnen um es zu lernen, da Android nur das am häufigsten verwendete Betriebssystem der Welt ist!
1080p bedeutet 1920×1080 unabhängig von der Bildschirmgröße des Geräts. Das ist also die Pixelgröße des Bildes, das Sie allen 1080p-Geräten zur Verfügung stellen müssen, wenn Sie das beste Ergebnis erzielen möchten.
Sie liegen falsch. Ich werde nicht hier sitzen und mit jemandem streiten, der offensichtlich nicht gelernt hat, was DPI bedeutet. Ich würde Sie sicherlich nicht einstellen, da Sie lieber argumentieren würden, als einfach zu gehen und zu lernen, wie Sie Ihre Fähigkeiten verbessern können. Wen kümmert es, wenn Sie falsch liegen ... Lernen Sie etwas Neues
Aus diesem Grund ist es besonders wichtig, auf einer Leinwand zu entwerfen, die größer ist als die Auflösung. Die Auflösung von 1080p misst nicht die Anzahl der Pixel pro Zoll (PPI). Wenn wir ein 56-Zoll-Full-HD-1080p-Display und ein 15-Zoll-Notebook-Display mit derselben Auflösung haben, unterscheiden sich die beiden in PPI, wobei das kleinere Display eine höhere Pixeldichte aufweist. Beim Erstellen einer Leinwand müssen Sie Pixel pro Zoll (PPI) sowie das Verhältnis berücksichtigen. Es gibt Formeln dafür und sie funktionieren sehr gut. Dadurch wird sichergestellt, dass Ihre Arbeit richtig auf das Display passt und gestochen scharf und optimal aussieht.

1920 x 1080. Dies ist der Standardhintergrund für Computer, nicht mehr und nicht weniger.

Außer meiner, die 2560 x 1600 unterstützt ... oder mein Laptop mit 1600 x 1480 ...... Und ja ... lass uns nicht einmal auf Handy- und Tablet-Größen eingehen ....