Die besten Pixelgrößen für Bilder auf Webseiten

July 16

Die besten Pixelgrößen für Bilder auf Webseiten

Handys, Tablets und Computer-Monitore haben unterschiedliche Nutzungen, Benutzer und Dimensionen, Betteln für Website-Entwickler die Frage: welche Größe sollten meine Bilder sein? Wenn die Website von "Standardbenutzer" auf einem Breitbild-Monitor in 1680 von 1024 Pixelauflösung angezeigt und besucht werden entworfen wird, sollte die Webseite Größe zugeschnitten werden im Hauptfenster des Browsers. Wenn die Website für die Verwendung von mobilen Geräten vorgesehen ist, sollte es die Größe für einen viel kleineren Bildschirm.

Flüssigkeit vs. statische Layouts

Die erste Überlegung ist, ob Ihre Website eine Set Dimension in Pixel überhaupt benötigt. Prozentsätze stattdessen zu verwenden, erstellen Sie eine Layout "flüssige", die die Inhaltsbereiche Größen dynamisch, abhängig von der Größe des Benutzers Browserfenster wieder. Bei Verwendung in Kombination mit automatisch Umbrechen von Text können Flüssigkeit Layouts die beste Wahl sein, beim Erstellen einer Website für standardmäßigen Bildschirmauflösungen sowie mobile Browser. Fließenden Layouts werden erzielt mit "Breite = 100 %" in CSS-Deklaration des Inhalts statt "Breite = 960px," zum Beispiel.

Passende Standardbildschirm Größen

Um "Feste" oder statische Layouts zu erstellen, muss die Breite des Ihre wichtigsten Inhalte Divs, Umhüllungen oder Tabellen innerhalb eines Benutzers Browser-Fensters, unter Berücksichtigung sowohl der Bildlaufleiste passen und Browser-Symbolleiste. Sie möchten auch entwerfen für die Mehrzahl der Besucher. Im Jahr 2014, 99 Prozent der Web-Browser verwenden eine Bildschirmauflösung von 1024 x 768 Pixel oder höher. Dies bedeutet für 1680 von 1024 Pixel entwerfen könnte, aber es ist eine gute Idee, einen Mittelweg zu erreichen. 960 Pixel breit und 980 Pixel breit sind zwei narrensicher breiten verwendet, um Inhalte bequem im Browser für jeden mit einer Auflösung von 1024 x 768 Pixeln oder höher anzeigen. Dieses System skaliert auch gut auf Mobilgeräte vollwertige Websites darstellen können. Wenn dies zu eng ist, 1080 Pixel ist die nächstbeste Breite. Denken Sie daran die Höhe eines standard-Browser-Fensters in jeder gegebenen Auflösung um die wichtigsten Informationen über die "Falten" zu halten, oder der Punkt, an welchem Scrollen erforderlich ist.

Mobile Leinwände

Wenn Sie Ihre Website auf einer Vielzahl von mobilen Geräten gut aussehen wollen, müssen Sie speziell für das Gerät entwerfen oder erstellen ein spezielles Stylesheet, das von mobilen Browsern verwendet wird, um eine "mobile" Version Ihrer Webseite anzuzeigen. Eine Auflösung von 240 von 320 Pixeln ist aktuelle Norm für die meisten Smartphones und Internet-fähige mobile Geräte wie das iPhone. Es wird empfohlen, Prozentsätze oder 'Flüssigkeit' Layouts hier verwenden, da viele Geräte sowohl die Landschaft als auch im Hochformat-Modus unterstützen.

Das goldene Netz

Vielleicht ist das beste System zur Bestimmung der Layoutbemaßungen durch den Einsatz von Grid-System. Raster berechnen perfekt ausgewogene Regionen innerhalb einer bestimmten Breite um eine Leitlinie für wie Sie Elemente in Ihrem wichtigsten Layout oder einem Inhaltsbereich Größe zu schaffen. Diese Elemente können Promotion-Boxen, Seitenleisten, Werbefläche oder Absätze enthalten. Beispielsweise müsste ein Layout mit einer Gesamtbreite von 1080 Pixel und mit dem goldenen Raster aufgeteilt einen linken Bereich für Blog-Posts ist 739 Pixel breit und einer rechten Seitenleiste, die 311 Pixel breit, ist auch mit einem Vorsprung von 10 Pixel. Das Ergebnis ist eine perfekt ausgewogene und abgestimmte Layout. Sie können experimentieren mit unterschiedlichen Rastern, durch den Besuch des Raster-System-Generators (siehe Ressourcen).