Optimierung von Helden-/Intro-Fotos auf mobilen und XXL-Displays

Das sind ziemlich viele Fragen. In umgekehrter Reihenfolge dann:

• Es gibt kein automatisiertes Tool, das Ihr Urteilsvermögen ersetzt.

• Sie sollten ein scharfes (scharfes, feines Detail) Bild nicht über seine natürliche Auflösung hinaus vergrößern. Wenn das Bild 1024 px breit ist, sollte Ihr Haltepunkt bei oder vor 1024 px liegen. Weiche Bilder (verschwommen, Himmel, neblige Landschaften) können in vielen Fällen auf 150 % oder mehr gedrückt werden. An kontrastreichen Rändern sieht das Auge leicht eine Bildverschlechterung, sonst nicht.

• Definitiv Ernte. Es gibt keinen Grund, dies nicht zu tun, und Sie können die Dateigröße einfacher optimieren.

Ihre Stichpunkte, nicht in der Reihenfolge:

• Dateigrößen sind immer eine Überlegung, aber weiche Bilder werden viel besser komprimiert als scharfe. Sie werden feststellen, dass ein auf eingestelltes Hintergrundbild coverimmer von Natur aus weich ist oder einen streng begrenzten Bereich hat, in dem es scharf ist (wie in Ihrem Beispiel). Das ist jedoch nicht der einzige Grund, weiche Bilder zu verwenden:

• Weichzeichnerhintergrund und sorgfältige Auswahl von Schriftfarbe, Schriftgröße und Schriftfamilie sorgen für Lesbarkeitsprobleme. Verwenden Sie keine Kombination aus Text und Bild, die Probleme mit verschwindendem Text verursacht. Ihr Beispiel mit der Shopify-Site zeigt dies recht gut.

• Sie werden etwas ausschneiden, wenn sich die Bildschirmgröße und das Seitenverhältnis radikal ändern. Das ist unvermeidlich, und es spielt keine Rolle. Wichtig ist , dass die Seite in dieser Größe gut aussieht. Beachten Sie, dass Ihr mobiles Shopify-Beispiel das Mädchen ausschließt. Das ist eigentlich eine richtige Designentscheidung, denn bei dieser Bildschirmgröße würde sie den Bildschirm überwältigen und/oder sehr ungeschickt von wichtigen Site-Elementen überlagert werden.

• Für ein Hintergrundbild benötigen Sie keinen Alt-Text. Es ist ein Hintergrund. Per Definition enthält es keine wichtigen Site-Informationen. (Wenn ja, dann sollte es nicht der Hintergrund sein.)

Ich hoffe das hilft. Lassen Sie sich nicht von technischen Details von der wichtigen Sache ablenken: dem eigentlichen Design der Website und ob sie bei jeder Größe gut mit dem Besucher kommuniziert . Versuchen Sie nicht, die Website bei all diesen unterschiedlichen Größen gleich aussehen zu lassen. Es wird nicht, es kann nicht, und wenn Sie versuchen, es zu erzwingen, setzen Sie sich auf Enttäuschung und viel verlorene Zeit ein.

Lassen Sie es gut aussehen und bei jeder Größe und jedem Seitenverhältnis gut funktionieren. Lassen Sie gemeinsame Elemente wie Schriftfamilie, Farben und einen Hinweis auf das Hintergrundbild sie alle zusammenhalten, aber denken Sie daran, dass Sie so ziemlich die einzige Person sind, die sich alle Versionen der Website in schneller Folge ansieht. Ein normaler Besucher sieht nur die, die zu seinem Gerät und seiner Viewport-Größe passt.

Um Ihre eingekochte Frage zu beantworten, ist dies zwar oft nicht erforderlich - oder erfordert tatsächlich mehr Design- / Entwicklungszeit -, aber in Ihrem Beispielfall kann es einfach zu einem engen Ausschnitt des Bildes kommen (auch mit Retina @ 2x-Versionen). für das mobile Layout. Das ist das Schöne an CSS-Medienabfragen, dass Sie bestimmte Versionen des Bildes auf einer breiteren Palette von Geräten einschließen können und normalerweise langsameren Internetverbindungen erlauben, nur die erforderlichen Bilder zu laden.

Es gibt keine festen Regeln für all das, oder Design wäre eine Wissenschaft und keine Kunst (und kein Handwerk), aber die Faustregel, an die ich mich halte, lautet: Wenn es scharfe Merkmale gibt, gehen Sie niemals darüber hinaus 100 % und bei verschwommenen oder weichen Bildern können 120 - 150 % in Ordnung sein , aber ymmv .

Was die Tools angeht, mache ich das alles mit meinem Chrome + Web Inspector + Window-Resizer (Chrome-Erweiterung) . Ich habe gesehen, dass Adobe an etwas namens Edge Reflow arbeitet, aber ich bin kein CC-Abonnent, also habe ich es nicht ausprobiert.