5 Möglichkeiten, Bilder auf deiner Band-Website zu optimieren

Heutzutage können Websites auf Hunderten von verschiedenen Bildschirmgrößen angezeigt werden, sogar in verschiedenen Ausrichtungen auf demselben Gerät (Quer- oder Hochformat). Die Displays, auf denen Ihre Website angezeigt wird, können auf Mobilgeräten nur wenige hundert Pixel breit sein, auf neueren HD-Breitbildmonitoren bis zu Tausende von Pixeln.

Da neue Technologien eine Reihe von Bildschirmgrößen bereitstellten, mit denen Benutzer Ihre Website sehen können, erforderte dies auch eine neue Denkweise beim Website-Design, die dafür sorgte, dass Websites auf jedem Bildschirm gut aussahen – groß oder klein, hoch oder breit.

Hier kommt das Konzept des „responsiven“ Website-Designs ins Spiel!

Wie Responsive Design funktioniert

Eine reaktionsschnelle Website ist so aufgebaut, dass die Positionierung und Größe „relativ“ zu dem Bereich sind, in dem sie angezeigt werden. Wenn Ihre Website auf verschiedenen Displays angezeigt wird, passt sie sich an, indem sie sich dehnt oder verkleinert; sich bewegen, um in den verfügbaren Platz zu passen.

Jedes Foto, das Sie auf Ihre Bandzoogle-Website hochladen, wird gedehnt und skaliert, je nachdem, wie groß der „Raum“ des Bildes ist.

Bei Header-Bildern ist dies besonders wichtig, da responsive Bilder so gut wie möglich in den Rahmen „passen“. Weniger Arbeit beim Zuschneiden einer Reihe von Bildern bedeutet mehr Zeit, nun ja, Musik zu spielen, oder?

Schauen wir uns fünf Möglichkeiten an, wie Sie die Bilder auf Ihrer Band-Website optimieren können, um Ihr Design genau richtig zu machen.

1. Wählen Sie das richtige Bild

Responsive Design skaliert Seitenelemente wie Ihre Header-Bilder „proportional“ auf die Originalgröße der von Ihnen verwendeten Bilddatei und tut dies „relativ“ zu dem Platz, in dem das Bild auf der Seite platziert ist.

Das bedeutet, dass die Bildproportionen auf allen Geräten beibehalten werden und Bilder immer versuchen, den Raum, in dem sie sich befinden, so gut wie möglich zu „füllen“. Dies kann dazu führen, dass Header-Bilder Teile des Bildes „abgeschnitten“ erscheinen lassen – dies ist im responsiven Design unvermeidlich, aber die Wahl eines Bildes, das gut zugeschnitten werden kann, hilft.

Künstler: Tragödie Ann

Desktop und Breitbild

Auf einem Laptop werden Kopfzeilenbilder relativ zur Breite des Bildschirms skaliert. Auf einem mobilen Gerät würde das Bild basierend auf der Höhe des Bildschirms skaliert.

Mit anderen Worten, Ihr Bild wird immer in Bezug auf die längste Seite des Raums skaliert.

Stellen Sie sich das nun auf einem Bildschirm vor, der 1.000 Pixel breit ist – Desktop-/Laptop-Bildschirme sind breiter als hoch, und sagen wir, derselbe Bildschirm ist auch 570 Pixel hoch (ungefähr das 16:9-Verhältnis für viele Displays).

In diesem Szenario ist unser Bild auf diesem Display 1.000 Pixel breit, wurde aber auf 900 Pixel hoch skaliert, was bedeutet, dass in einem Raum, der nur 570 Pixel hoch ist, oben und unten über 300 Pixel abgeschnitten werden das Bild. Kopflose Bilder, yikes!

Mobil- und Hochformatausrichtung

Führen Sie die gleiche Berechnung mit dem Beispiel eines mobilen Bildschirms durch, der 600 Pixel hoch ist – sagen wir, dass dieselbe Anzeige nur etwa 320 Pixel breit ist. Wenn sich das Bild an diese Anzeige anpasst, wird mehr als die Hälfte des Bildes auf beiden Seiten abgeschnitten (denken Sie daran, dass das Bild auf einem 600 Pixel hohen Hochformatbildschirm auf 667 Pixel Breite verkleinert wird).

Dies ist eine gute Möglichkeit, den Schlagzeuger am Rande Ihres Bandfotos zu ärgern, was Spaß machen kann! Aber dennoch...

Optimieren Sie und laden Sie dann Ihre Dateien hoch

Eine gute Metapher, die Sie verwenden können, ist sich vorzustellen, Sie wären in einer Kunstgalerie, die Bilder einrahmt - wenn Sie die Landschaft von Monet in einen Porträtrahmen von "Whistler's Mother" stecken, wird dieser Rahmen viele wirklich schöne Seerosen an der Seite abschneiden dein Gemälde.

Hier kann es schwierig werden – Website-Ersteller können die Bilder, die Sie verwenden möchten (oder was darin angezeigt wird), nicht vorhersehen, aber es ist ein guter erster Schritt, wählerisch zu sein, welche Bilder hinzugefügt werden sollen.

Ein paar einfache Tipps zur Auswahl des richtigen Bildes für Ihren Header:

• Vermeiden Sie die Verwendung von Bildern, die „eng beschnitten“ wurden – je mehr Platz oder Abstand Sie um den „Fokus“ Ihres Bildes haben, desto unwahrscheinlicher ist es, dass der Fokus auf verschiedenen Displays abgeschnitten wird.
  
• Verwenden Sie große Bilder – 2000 x 1800 bei einer Größe von 72 dpi funktionieren normalerweise gut für die meisten Bandzoogle-Designs und tragen dazu bei, dass Ihre Bilder auf jedem Display gut aussehen.
  
• Versuchen Sie, Bilder zu verwenden, die in der Ausrichtung nahezu „quadratisch“ sind – es muss kein perfektes quadratisches Bild sein, aber so nah wie möglich an gleiche Höhe und Breite in Ihrem Bild herankommt, wird normalerweise auf jedem Display gut funktionieren. Dieser zusätzliche Platz gibt Ihnen Raum zum Atmen, egal in welcher Ausrichtung Ihre Website betrachtet wird.
  
• Vermeiden Sie es, Bilder mit Text oder Logos im Bild selbst zu verwenden - Sie möchten auf keinen Fall, dass wichtiger Text oder Ihr Branding für Ihre Besucher abgeschnitten wird!
  
• Fügen Sie stattdessen Ihr Logo unter der Option „Titel / Logo“ Ihres Bandzoogle-Theme-Editors hinzu. Fügen Sie dann beliebigen Text in der Kopfzeile zur Funktion „Call-to-Action-Kopfzeile“ hinzu. Auf diese Weise werden Ihre wichtigen Botschaften nicht vom Displayrand abgeschnitten.

Künstler: Martin und James

2. Zuschneiden, um zu Ihrem Thema zu passen

Wenn Sie bereits Bilder hochgeladen haben, bietet Bandzoogle einige großartige Tools, um sie noch besser anzuzeigen!

Einige unserer Vorlagendesigns zeigen beim Laden „Vollbild“ an, haben einstellbare Header-Höhen, können Header-Bilder auf begrenztem Raum in verschiedenen Formen anzeigen (z. B. die Spotlight-Vorlage) oder sogar Ihr Header-Bild als Hintergrund festlegen Ihre Seiten (z. B. Slice).

Es ist einfach, verschiedene Designs mit unterschiedlichen Header-Optionen auszuprobieren – Sie können das Design des Designs über „Design bearbeiten“ > „Designs anzeigen“ ändern, das gewünschte Design auswählen, dieses Design im Design-Editor anpassen, auf „Speichern“ klicken und Ihr Design veröffentlichen Änderungen.

Vorausgesetzt, das Thema legt Ihre Kopfzeile nicht als ganzseitiges Hintergrundbild fest, können Sie auch den relativen Zoom und die Positionierung der hinzugefügten Bilder anpassen.

Klicken Sie unter „Inhalt bearbeiten“ auf das Kopfzeilenbild auf der Registerkarte „Inhalt bearbeiten“ und dann im Kopfzeilen-Editor auf den Link „Zuschneiden“ unter der Miniaturansicht des Kopfzeilenbilds.

Sie können dann den Zoom mit dem Zoom-Schieberegler anpassen und das Bild an eine relative Position klicken/ziehen.

3. Setzen Sie einen Schwerpunkt

Wenn Sie Ihr Header-Bild im Header-Editor zuschneiden, bemerken Sie möglicherweise auch einen kleinen blauen Punkt über dem Bild – dies dient zum Festlegen Ihres „Fokus“. Dadurch wird sichergestellt, dass überall dort, wo dieser Punkt auf dem Bild positioniert ist, immer „scharf“ ist, unabhängig von der Größe oder Ausrichtung Ihres Bildes.

Dies kann sehr praktisch für Bilder sein, bei denen der „Fokus“ Ihres hochgeladenen Bildes nicht vollständig zentriert ist – das Klicken/Ziehen des Fokuspunkts über den Bildfokus stellt sicher, dass der Fokus immer vorne und in der Mitte liegt, egal was auf verschiedenen Bildschirmen abgeschnitten wird .

Nachdem Sie Ihre Zuschneide-, Zoom- und Fokuspunkte festgelegt haben, klicken Sie einfach auf „Speichern“, um den Zuschnitt anzuwenden, und klicken Sie dann im Header-Editor erneut auf „Speichern“, um Ihre Änderungen zu übernehmen.

Künstler: Anna Bassy

4. Passen Sie die Höhe der mobilen Kopfzeile an

Die Grenze zwischen einem mobilen Bildschirm und einem nicht mobilen Bildschirm verschwimmt ständig – nehmen Sie zum Beispiel ein Tablet-Gerät. Nicht groß genug, um ein „Desktop“ zu sein, aber nicht ganz klein genug für einen mobilen Bildschirm.

Wenn Sie Websites auf vielen Tablets im Querformat anzeigen, wird die Website möglicherweise ähnlich wie auf einem Desktop- oder Laptop-Bildschirm angezeigt. Drehen Sie das Tablet jedoch als „Porträt“ zur Seite, und alles kann sich ändern. Durch die Reduzierung der Bildschirmbreite können mehr „mobile“ Elemente näher an dem angezeigt werden, was Sie möglicherweise auf einem Telefon sehen.

Die meisten Bandzoogle-Designs sind standardmäßig so eingestellt, dass sie in hochformatigen Bildschirmen eine Kopfzeile in voller Höhe anzeigen – dies kann problematisch sein, wenn Ihr Kopfzeilenbild den Fokus auf die linke und rechte Seite enthält.

Vorausgesetzt, Ihr Design legt Ihre Kopfzeile nicht als Hintergrundbild für Ihre Seiten fest, können Sie dazu die Option „Benutzerdefinierte mobile Kopfzeilenhöhe“ in den „Kopfzeilen“-Einstellungen über die Registerkarte „Design bearbeiten“ aktivieren.

Klicken Sie nach der Aktivierung auf das Symbol „Vorschau für Mobilgeräte“ im Design-Editor und passen Sie den Schieberegler „Kopfzeilenhöhe (mobil)“ an – dies kann helfen, den Platz Ihres Bildes anzupassen, damit es besser zu Ihren Bildproportionen passt und mehr davon zeigt Bild. Klicken Sie einfach auf "Speichern", nachdem Sie dies festgelegt haben!

5. Filter hinzufügen

Schließlich können Sie Ihren Header-Bildern einige wirklich erstaunliche Vibes hinzufügen, indem Sie einen Filter festlegen. Bringen Sie den Blues zum Vorschein, verleihen Sie Ihrem Bild einen 70er-Jahre-Film-Look oder setzen Sie auf Vintage-Schwarzweiß. Hier gibt es viele Möglichkeiten!

Klicken Sie einfach auf die Registerkarte „Design bearbeiten“ in Ihrem Bandzoogle-Bedienfeld, und unter den „Kopfzeilen“-Optionen können Sie einen vorgefertigten Filter auswählen oder Ihren eigenen benutzerdefinierten Filterstil erstellen.

Künstler: Carleen Williams

Auch wenn es manchmal etwas umständlich sein kann, ist der allgemeine Konsens unter Webdesignern, dass Responsive der bessere Weg in Bezug auf Ihre Website ist.

Es garantiert, dass Ihre Website großartig aussieht und auf jedem verfügbaren Bildschirm lesbar ist, jetzt und in Zukunft, und Websites wie Google werden Sie besser platzieren, wenn Ihre Website gute responsive Praktiken verwendet.

Auf lange Sicht ist es auch eine große Zeitersparnis für diejenigen unter Ihnen, die Ihre eigenen Websites verwalten - den besten Weg zu kennen, um Ihre Bilder und Inhalte zu optimieren, ist der erste Schritt, und Bandzoogle kümmert sich um den Rest!

Erstellen Sie mit nur wenigen Klicks eine Musik-Website mit ansprechenden Bildern. Erstellen Sie noch heute Ihre Website mit Bandzoogle!