Hero-Bildgröße und Optimierung [duplizieren]

Größe:
Welche Größe wäre gut für das Hero-Bild in Pixellänge und Gewicht für Laptop und Desktop?

Desktop-Bilder sind eher rechteckig und die Bilder von Mobilgeräten quadratisch, dies muss berücksichtigt werden. Angenommen, der Desktop ist etwa 1688 Pixel breit oder 1366 Pixel breit oder 1920 Pixel breit – einige sagen, dass die größere Größe aufgrund des großen Monitors erforderlich ist – was ist üblich, am besten?

Was wäre eine gute Länge?
Ich möchte nicht, dass es so lang ist, dass es schwer zu erkennen ist, was sich unter dem Banner befindet, oder dass viel gescrollt werden muss. Vielleicht ist es gut, etwas zu zeigen, das direkt unter dem Banner angezeigt wird. Was wäre das Verhältnis für das Heldenbild, das funktionieren würde?

Für Ladezeit optimieren
Irgendwann wird es ein GIF oder eine Datei sein, die etwas Bewegung ermöglicht.

Irgendwelche Gedanken darüber, wie ein Programmierer mit der Datei arbeiten kann, damit sie schneller geladen wird?

Gibt es eine Möglichkeit für einen Programmierer festzulegen, dass das Bild manchmal statisch sein soll – je nach Gerät? zu anderen relevanten Themen?

Ich möchte vielleicht, dass das Bannerbild auf Mobiltelefonen statisch ist, da die Ladezeit schnell sein muss, damit die Bewegung auf der Desktop-Version sichtbar ist. Gibt es einen Code, um dies zu tun, oder wie?

@Scott - Ich denke, Sie haben diese ziemlich unhandliche Frage gut bearbeitet, obwohl immer noch viel zu viel Zeug darin ist.
Ich bin nicht anderer Meinung, @BillyKerr, und habe aus genau diesem Grund für das Schließen (die ursprüngliche Frage) gestimmt.
@Scott - ja, das OP wäre besser gewesen, die ursprüngliche Frage zu bearbeiten und zu verlangen, dass sie erneut geöffnet wird, anstatt sie einfach erneut zu posten.

Antworten (1)

Das sind viele Fragen, eigentlich zu viele, aber ich werde trotzdem einen kurzen Überblick über meine Gedanken geben.

  1. Gestalten Sie es in der größten Größe, die Sie Ihrer Meinung nach benötigen werden. Vielleicht wäre eine Breite von 1920 Pixeln ein guter Anfang. Rasterbilder können leicht verkleinert werden, sehen aber vergrößert nicht gut aus. Beginnen Sie mit einer größeren Größe, und Ihr Webentwickler sollte in der Lage sein, dieses Bild zu nehmen und die Größe für verschiedene Geräte anzupassen und die Dateigrößen für das Web zu optimieren. Beachten Sie jedoch, dass die Details feiner Linien bei kleineren Größen verloren gehen können.

  2. Es gibt keine "beste" Größe. „Am besten“ ist höchst subjektiv. Heutzutage ist die gebräuchlichste Größe wahrscheinlich ein Mobiltelefon, aber das ist irrelevant, da Sie wahrscheinlich möchten, dass die Website auf jedem Gerät, auf dem sie angezeigt wird, gut aussieht.

  3. Das Seitenverhältnis hängt davon ab, wie viel des Bildschirms Sie füllen möchten. Ohne das Design zu sehen, kann ich nicht sehen, wie dies wirklich im Detail beantwortet werden kann. Sie müssen sich Ihre eigene Meinung bilden. Erstellen Sie vielleicht einige Skizzen oder erstellen Sie einige grobe Mockups, um Ihnen bei der Entscheidung zu helfen.

  4. GIFs eignen sich nicht für sehr große animierte Bilder. Das Format wurde für kleine Webanimationen entwickelt. Vielleicht wäre eine Videoschleife besser geeignet - fragen Sie Ihren Webentwickler nach der Implementierung.

  5. Fragen zur Codierung/Webentwicklung sind hier im Allgemeinen nicht zum Thema. Es gibt jedoch Techniken, bei denen die Größe/der Typ des verwendeten Geräts erkannt wird, damit dem Browser Bilder in angemessener Größe bereitgestellt werden können. Dies ist ein Job für Ihren Webentwickler.