Die richtige Bildgröße für Ihre Website: 10-Minuten-Montag

Das Video unten zeigt, wie ich die richtige Bildgröße für jedes Website-Projekt finde

Was? Keine Bilder?

Wenn Sie wie die meisten Leute sind, haben Sie sich beim Herunterladen Ihres ersten WordPress-Themes gefragt, was mit den Bildern passiert ist – die gleichen Bilder, die Sie dazu gebracht haben, dieses Theme zu kaufen.

Nachdem Sie über Ihre erste große Enttäuschung hinweggekommen sind, dass Ihr Theme NICHT mit Bildern geliefert wurde, war die nächste Frage, die Sie sich wahrscheinlich gestellt haben: ‚Wie zum Teufel bekomme ich mein WordPress-Theme dazu, so auszusehen wie die Demo?‘

Wenn Sie damit beginnen, herauszufinden, welche Bildgröße die Demo Ihres Themes verwendet hat, werden Sie bald eine Website haben, die besser ist als die Demo, weil sie Bilder haben wird, die Sie und Ihr Unternehmen am besten repräsentieren.

Die richtige Bildgröße

Wenn ich eine WordPress-Website für meine Kunden erstelle, benötige ich in der Regel vier Bilder in verschiedenen Größen:

  1. Homepage / Front Page Header Image (auch bekannt als Hero Image)
  2. Seitenkopf-Banner,
  3. Blog Post Images und
  4. Sidebar Images.

Wie Sie die richtige Größe finden

Die Informationen zu den MEDIENEINSTELLUNGEN unter ERSCHEINUNG sind ein guter Startpunkt, denn dort finden Sie…

  • die beste Bildbreite für einen Blogbeitrag (1024 ist für das Showcase Pro-Theme), und
  • welche Bildgröße am besten in der Seitenleiste Ihres Themes funktioniert (300)

…ABER es gibt Ihnen keine Abmessungen für Ihre HOME-Seite / Front Page Header Image oder Seitenkopf-Banner.

Sie finden die Größe für Ihre HOME-Seite / Front Page Header Image Größe unter APPEARANCE -> CUSTOMIZE -> FRONT PAGE HEADER IMAGE.

In diesem Beispiel beträgt die Größe 1600 px X 1050 px.

Seiten-Header-Banner

Diese Größe zu finden, ist ein bisschen kniffliger.

Zum Beispiel ist das TEAM-Seiten-Demo-Header-Banner von Showcase Pro viel dünner als das HOME / Front Page Header Image, ABER die Dokumentation des Themas sagt mir nicht, welche Größe ich für das TEAM-Seiten-Header-Banner wählen soll.

So finden Sie die Größe eines beliebigen Seiten-Header-Banner-Bildes

Geben Sie die URL der Demo Ihres Themes in den Firefox-Browser ein. Verwenden Sie Firebug, um die genauen Abmessungen der verwendeten Bilder zu ermitteln.

  1. Rechtsklick / Control + Klick (Mac) auf der Webseite
  2. Wählen Sie Seiteninfo anzeigen
  3. Wählen Sie Medien
  4. Scrollen Sie nach unten zu Hintergrund
  5. Wählen Sie das Bild aus, das mit dem Header-Banner übereinstimmt
  6. Abmessungen: Gibt Ihnen die exakte Bildgröße an, die in der Demo des Themes verwendet wird

Die Größe des TEAM-Header-Banners entspricht exakt den Abmessungen des Header-Banners der HOME-Seite (1600 px X 1050 px), auch wenn es dünner dargestellt wird.

Schauen Sie sich das Video unten an, um zu sehen, wie ich Firefox benutze, um die richtige Bildgröße zu finden.

Was?!!! Nicht jedes Header-Banner-Bild hat die gleiche Größe

Als ich das BLOG-Header-Banner überprüfte, war ich überrascht, dass es nicht die gleiche Größe hatte wie das TEAM-Head-Banner. Statt 1600 x 1050 war es 1800 px X 960px.

Die Header-Banner dieses Themes werden in der Größe angepasst, um das Aussehen auf der gesamten Website konsistent zu halten.

Ihre Design-Herausforderung wird darin bestehen, Bilder zu finden, die in langen und schmalen Bereichen gut aussehen.

Die „richtige“ Blogpost-Bildgröße

Die gleichen Schritte verwenden Sie, um die Größe des Demo-Blogposts Ihres Themes zu finden:

  • Rechtsklick / Control + Klick (Mac) auf der Webseite
  • Wählen Sie Seiteninfo anzeigen
  • Wählen Sie Medien
  • Scrollen Sie nach unten zu Hintergrund
  • Wählen Sie das Bild aus, das mit dem Header-Banner übereinstimmt
  • Abmessungen: Gibt Ihnen die genaue Bildgröße, die in der Demo des Themes verwendet wird
900 px X 600 px

Abschlusstipp

Bilder für das Web sollten 72 dpi und RGB sein.

Bilder für den Druck sollten 300 dpi und CMYK sein.

Zuschauen, wie ich mit Firefox die richtige Bildgröße in der Theme-Demo finde

Brauchen Sie Hilfe mit Ihren Bildern?

Machen Sie mit beim 10-Minuten-Montag, an dem ich Tipps und Tricks für Nicht-Designer verrate, die ihr professionelles Image verbessern wollen.

Sie können mich auch jederzeit anrufen oder eine E-Mail schreiben. Kontakt

Machen Sie mit bei meinem nächsten 10-Minuten-Montag

Erhalten Sie eine Einladung zu meinem nächsten 10-Minuten-Montag LIVE und erhalten Sie eine Liste meiner kostenlosen Lieblingsressourcen für großartige Fotografie, die Sie auf Ihrer Website oder in jedem Projekt verwenden können.

Es ist LIVE und nur 10 Minuten lang. Die Sitzungen sind kurz und konzentrieren sich auf ein Thema.

Und weil es LIVE ist, können Sie Fragen stellen. Ich versuche auch, die Sitzungen kurz zu halten, weil ich weiß, dass Sie beschäftigt sind und keine Zeit zu verschwenden haben.

Schreibe einen Kommentar

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