Gibt es eine einfache und saubere L\u00f6sung, um all diese Punkte zu erf\u00fcllen?<\/p>\n\n\n\n
Wer zur Auswahl des richtigen Motivs recherchiert oder eine svg-Datei als Hintergrund verwenden m\u00f6chte, sucht hier leider an der falschen Stelle. Wer aber auf der Suche nach einer fundierten Antwort f\u00fcr das geschilderte Problem ist, sollte diesen Artikel lesen. Und wer nur schnell eine L\u00f6sung braucht, um ein Hintergrundbild auf seine Seite zu zaubern, sollte gleich bis ganz nach unten scrollen.<\/p>\n\n\n\n
Das perfekte Bild<\/h2>\n\n\n\n
Bilder im Web haben sich mit der wachsenden Vielfalt der Bildschirmgr\u00f6\u00dfen und den damit einhergehenden responsiven Designs zu einer eigenen Wissenschaft entwickelt. Unter dem \u201cperfekten Hintergrundbild\u201d ist daher vielmehr eine Komposition aus Bildgr\u00f6\u00dfen zu verstehen, die f\u00fcr verschiedene Anforderungen optimiert sind. Aber welche Anforderungen m\u00fcssen \u00fcberhaupt erf\u00fcllt werden? Und wie kann ich diese erf\u00fcllen?<\/p>\n\n\n\n
Was muss alles beachtet werden?<\/h2>\n\n\n\n
Generell sollte die User Experience \u2013 also die Wahrnehmung der Web-Plattform durch den Nutzer \u2013 im Vordergrund stehen. Auch Google sieht das so und macht viele seiner Rankingfaktoren f\u00fcr Suchergebnisse daran fest.<\/p>\n\n\n\n
Hier die vier wichtigsten Punkte in Bezug auf Hintergrundbilder.<\/p>\n\n\n\n
1. Kurze Ladezeiten sind essentiell f\u00fcr die User Experience<\/strong><\/h3>\n\n\n\nWie eine Studie<\/a> zeigt, brechen 65% der Online-Shopper nach drei Sekunden Wartezeit ihren Einkauf ab und kommen in vielen F\u00e4llen nie zur\u00fcck. Dieses Ergebnis l\u00e4sst sich auch allgemein auf Webauftritte \u00fcbertragen. Bilder sollten daher m\u00f6glichst wenig Downloadzeit beanspruchen, also klein sein.<\/p>\n\n\n\n<\/div>\n\n\n\n2. Google rankt Seiten mit langen Ladezeiten schlechter<\/strong><\/h3>\n\n\n\nDas hei\u00dft, dass Dein Webauftritt in den Suchergebnissen weiter unten steht, je langsamer Deine Seite ist.<\/p>\n\n\n\n
<\/div>\n\n\n\n3. Das Ganze muss dann auch noch gut aussehen<\/strong><\/h3>\n\n\n\nBilder werden vom Gehirn schneller wahrgenommen als andere Inhalte und sprechen die Gef\u00fchle des Nutzers an. Au\u00dferdem l\u00e4sst sich ein Gef\u00fchl schwer durch Inhalte ausgleichen. Ein verpixeltes oder verzerrtes Bild wirkt sich negativ auf die Glaubw\u00fcrdigkeit Deines Webauftritts aus und f\u00fchrt dazu, dass ein Nutzer die Seite schnell wieder verl\u00e4sst, auch wenn die Performance stimmt.<\/p>\n\n\n\n
<\/div>\n\n\n\n4. Absprungrate ist Rankingfaktor<\/strong><\/h3>\n\n\n\nZwar pr\u00fcfen Suchmaschinen aktuell nicht, ob ein Bild optisch ansprechend ist, aber \u00fcber die Absprungrate kann sich ein Bild mit schlechter Qualit\u00e4t auch auf den Rang Deiner Plattform in den Suchergebnissen niederschlagen.<\/p>\n\n\n\n
<\/div>\n\n\n\nZusammenfassend hei\u00dft das:<\/strong><\/h3>\n\n\n\nDein Hintergrundbild sollte so klein wie m\u00f6glich, aber so gro\u00df wie n\u00f6tig sein.<\/p>\n\n\n\n
<\/div>\n\n\n\nWelches Dateiformat sollte ich nutzen?<\/h2>\n\n\n\n
F\u00fcr Fotos spielen im Web-Umfeld zwei Dateiformate eine wichtige Rolle: png und jpg. Das png-Format besitzt generell einen h\u00f6heren subjektiven Detailreichtum, da bei der Komprimierung nur die Menge der Farben reduziert wird. Zudem unterst\u00fctzt es den Alphakanal, das hei\u00dft, dass es durchsichtige Fl\u00e4chen erm\u00f6glicht. Der Vorteil von jpg liegt in der Komprimierung und der daraus resultierenden geringen Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n
Da f\u00fcr Hintergrundbilder selten viele Details oder Transparenz ben\u00f6tigt werden, es aber auf die Dateigr\u00f6\u00dfe ankommt, bietet sich in diesem Fall das jpg-Format an.<\/p>\n\n\n\n
<\/div>\n\n\n\nWelche Bildgr\u00f6\u00dfen brauche ich?<\/h2>\n\n\n\n
Eine abschlie\u00dfende Antwort auf diese Frage wirst Du erst im Abschnitt \u201cMedia Queries\u201d finden. Zun\u00e4chst gibt es aber einige Punkte, die in die Auswahl geeigneter Bildgr\u00f6\u00dfen einflie\u00dfen und so zu einem tieferen Verst\u00e4ndnis von Bildern im Web beitragen.<\/p>\n\n\n\n
Um das passende Hintergrundbild f\u00fcr jede Bildschirmgr\u00f6\u00dfe auszuliefern, nutzen wir Media-Queries zur Einordnung in Gr\u00f6\u00dfenbereiche. Jedem dieser Bereiche teilen wir dann ein f\u00fcr ihn optimiertes Bild zu. Nehmen wir z. B. einen Bereich, der Bildschirmbreiten von 320 bis 640 Pixel abdeckt. Ein Hintergrundbild f\u00fcr diesen Bereich sollte mindestens in der Breite von 640 Pixeln vorliegen. Die dots per inch (dpi) spielen dabei keine Rolle (72 dpi: Die gr\u00f6\u00dfte L\u00fcge des Webs<\/a>).<\/p>\n\n\n\nAuch das Verh\u00e4ltnis zwischen logischen und physischen Pixeln (Pixel-Verh\u00e4ltnis) sollte bei der Wahl der geeigneten Bildgr\u00f6\u00dfen einflie\u00dfen. Das Pixel-Verh\u00e4ltnis gibt an, aus wie vielen physischen Pixeln (Ger\u00e4tepixel) ein logischer Pixel (CSS Pixel) zusammengesetzt wird. Bei einem Wert von zwei wird jeder Bildpunkt Deines Hintergrundbildes mit vier Pixeln dargestellt (jeweils zwei in H\u00f6he und Breite). Das f\u00fchrt dazu, dass ein 640 Pixel breites Bild auf einem 640 Pixel gro\u00dfen Bildschirm verpixelt aussieht. Daher sollte Dein Hintergrundbild in diesem Fall in doppelter Gr\u00f6\u00dfe ausgeliefert werden.<\/p>\n\n\n\n
Aktuell tummeln sich Pixel-Verh\u00e4ltnisse zwischen eins und f\u00fcnf auf dem Markt. Theoretisch m\u00fcssten also Bilder in bis zu f\u00fcnffacher Gr\u00f6\u00dfe bereitgestellt werden. Das w\u00fcrde vor allem mit Verbindungen im 3G-Bereich zu langen Ladezeiten f\u00fchren. Allerdings kann das menschliche Auge bei einem Pixel-Verh\u00e4ltnis von eins ab einem Abstand von etwas mehr als der Bildschirmdiagonale keine Pixel mehr erkennen. Bei einem Pixel-Verh\u00e4ltnis von zwei wird dieser Abstand halbiert. Das hei\u00dft, dass man sich bei einem Pixel-Verh\u00e4ltnis von zwei schon die Nase an seinem Smartphone plattdr\u00fccken m\u00fcsste, um Pixel zu erkennen. F\u00fcr den Normalgebrauch reicht es also, Bilder in doppelter Gr\u00f6\u00dfe bereitzuhalten.<\/p>\n\n\n\n
Bleibt noch die Frage, bis zu welcher Bildgr\u00f6\u00dfe man geht. Momentan ist \u00fcberall von 4K-Monitoren (meist 3840\u00d72160 Pixel) die Rede und immer mehr Hersteller springen auf diesen Zug auf. Nat\u00fcrlich sind auch andere Gr\u00f6\u00dfen wie beispielsweise 5K (MacBook Pro 2016) und 8K (Dell UltraSharp 32 Ultra HD 8K) auf dem Markt zu finden. F\u00fcr welche Maximalgr\u00f6\u00dfe Du Dich entscheidest, liegt bei Dir. Dein Ausgangsbild sollte nat\u00fcrlich auch entsprechend gro\u00df sein.<\/p>\n\n\n\n
2. Google rankt Seiten mit langen Ladezeiten schlechter<\/strong><\/h3>\n\n\n\nDas hei\u00dft, dass Dein Webauftritt in den Suchergebnissen weiter unten steht, je langsamer Deine Seite ist.<\/p>\n\n\n\n
<\/div>\n\n\n\n3. Das Ganze muss dann auch noch gut aussehen<\/strong><\/h3>\n\n\n\nBilder werden vom Gehirn schneller wahrgenommen als andere Inhalte und sprechen die Gef\u00fchle des Nutzers an. Au\u00dferdem l\u00e4sst sich ein Gef\u00fchl schwer durch Inhalte ausgleichen. Ein verpixeltes oder verzerrtes Bild wirkt sich negativ auf die Glaubw\u00fcrdigkeit Deines Webauftritts aus und f\u00fchrt dazu, dass ein Nutzer die Seite schnell wieder verl\u00e4sst, auch wenn die Performance stimmt.<\/p>\n\n\n\n
<\/div>\n\n\n\n4. Absprungrate ist Rankingfaktor<\/strong><\/h3>\n\n\n\nZwar pr\u00fcfen Suchmaschinen aktuell nicht, ob ein Bild optisch ansprechend ist, aber \u00fcber die Absprungrate kann sich ein Bild mit schlechter Qualit\u00e4t auch auf den Rang Deiner Plattform in den Suchergebnissen niederschlagen.<\/p>\n\n\n\n
<\/div>\n\n\n\nZusammenfassend hei\u00dft das:<\/strong><\/h3>\n\n\n\nDein Hintergrundbild sollte so klein wie m\u00f6glich, aber so gro\u00df wie n\u00f6tig sein.<\/p>\n\n\n\n
<\/div>\n\n\n\nWelches Dateiformat sollte ich nutzen?<\/h2>\n\n\n\n
F\u00fcr Fotos spielen im Web-Umfeld zwei Dateiformate eine wichtige Rolle: png und jpg. Das png-Format besitzt generell einen h\u00f6heren subjektiven Detailreichtum, da bei der Komprimierung nur die Menge der Farben reduziert wird. Zudem unterst\u00fctzt es den Alphakanal, das hei\u00dft, dass es durchsichtige Fl\u00e4chen erm\u00f6glicht. Der Vorteil von jpg liegt in der Komprimierung und der daraus resultierenden geringen Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n
Da f\u00fcr Hintergrundbilder selten viele Details oder Transparenz ben\u00f6tigt werden, es aber auf die Dateigr\u00f6\u00dfe ankommt, bietet sich in diesem Fall das jpg-Format an.<\/p>\n\n\n\n
<\/div>\n\n\n\nWelche Bildgr\u00f6\u00dfen brauche ich?<\/h2>\n\n\n\n
Eine abschlie\u00dfende Antwort auf diese Frage wirst Du erst im Abschnitt \u201cMedia Queries\u201d finden. Zun\u00e4chst gibt es aber einige Punkte, die in die Auswahl geeigneter Bildgr\u00f6\u00dfen einflie\u00dfen und so zu einem tieferen Verst\u00e4ndnis von Bildern im Web beitragen.<\/p>\n\n\n\n
Um das passende Hintergrundbild f\u00fcr jede Bildschirmgr\u00f6\u00dfe auszuliefern, nutzen wir Media-Queries zur Einordnung in Gr\u00f6\u00dfenbereiche. Jedem dieser Bereiche teilen wir dann ein f\u00fcr ihn optimiertes Bild zu. Nehmen wir z. B. einen Bereich, der Bildschirmbreiten von 320 bis 640 Pixel abdeckt. Ein Hintergrundbild f\u00fcr diesen Bereich sollte mindestens in der Breite von 640 Pixeln vorliegen. Die dots per inch (dpi) spielen dabei keine Rolle (72 dpi: Die gr\u00f6\u00dfte L\u00fcge des Webs<\/a>).<\/p>\n\n\n\nAuch das Verh\u00e4ltnis zwischen logischen und physischen Pixeln (Pixel-Verh\u00e4ltnis) sollte bei der Wahl der geeigneten Bildgr\u00f6\u00dfen einflie\u00dfen. Das Pixel-Verh\u00e4ltnis gibt an, aus wie vielen physischen Pixeln (Ger\u00e4tepixel) ein logischer Pixel (CSS Pixel) zusammengesetzt wird. Bei einem Wert von zwei wird jeder Bildpunkt Deines Hintergrundbildes mit vier Pixeln dargestellt (jeweils zwei in H\u00f6he und Breite). Das f\u00fchrt dazu, dass ein 640 Pixel breites Bild auf einem 640 Pixel gro\u00dfen Bildschirm verpixelt aussieht. Daher sollte Dein Hintergrundbild in diesem Fall in doppelter Gr\u00f6\u00dfe ausgeliefert werden.<\/p>\n\n\n\n
Aktuell tummeln sich Pixel-Verh\u00e4ltnisse zwischen eins und f\u00fcnf auf dem Markt. Theoretisch m\u00fcssten also Bilder in bis zu f\u00fcnffacher Gr\u00f6\u00dfe bereitgestellt werden. Das w\u00fcrde vor allem mit Verbindungen im 3G-Bereich zu langen Ladezeiten f\u00fchren. Allerdings kann das menschliche Auge bei einem Pixel-Verh\u00e4ltnis von eins ab einem Abstand von etwas mehr als der Bildschirmdiagonale keine Pixel mehr erkennen. Bei einem Pixel-Verh\u00e4ltnis von zwei wird dieser Abstand halbiert. Das hei\u00dft, dass man sich bei einem Pixel-Verh\u00e4ltnis von zwei schon die Nase an seinem Smartphone plattdr\u00fccken m\u00fcsste, um Pixel zu erkennen. F\u00fcr den Normalgebrauch reicht es also, Bilder in doppelter Gr\u00f6\u00dfe bereitzuhalten.<\/p>\n\n\n\n
Bleibt noch die Frage, bis zu welcher Bildgr\u00f6\u00dfe man geht. Momentan ist \u00fcberall von 4K-Monitoren (meist 3840\u00d72160 Pixel) die Rede und immer mehr Hersteller springen auf diesen Zug auf. Nat\u00fcrlich sind auch andere Gr\u00f6\u00dfen wie beispielsweise 5K (MacBook Pro 2016) und 8K (Dell UltraSharp 32 Ultra HD 8K) auf dem Markt zu finden. F\u00fcr welche Maximalgr\u00f6\u00dfe Du Dich entscheidest, liegt bei Dir. Dein Ausgangsbild sollte nat\u00fcrlich auch entsprechend gro\u00df sein.<\/p>\n\n\n\n
3. Das Ganze muss dann auch noch gut aussehen<\/strong><\/h3>\n\n\n\nBilder werden vom Gehirn schneller wahrgenommen als andere Inhalte und sprechen die Gef\u00fchle des Nutzers an. Au\u00dferdem l\u00e4sst sich ein Gef\u00fchl schwer durch Inhalte ausgleichen. Ein verpixeltes oder verzerrtes Bild wirkt sich negativ auf die Glaubw\u00fcrdigkeit Deines Webauftritts aus und f\u00fchrt dazu, dass ein Nutzer die Seite schnell wieder verl\u00e4sst, auch wenn die Performance stimmt.<\/p>\n\n\n\n
<\/div>\n\n\n\n4. Absprungrate ist Rankingfaktor<\/strong><\/h3>\n\n\n\nZwar pr\u00fcfen Suchmaschinen aktuell nicht, ob ein Bild optisch ansprechend ist, aber \u00fcber die Absprungrate kann sich ein Bild mit schlechter Qualit\u00e4t auch auf den Rang Deiner Plattform in den Suchergebnissen niederschlagen.<\/p>\n\n\n\n
<\/div>\n\n\n\nZusammenfassend hei\u00dft das:<\/strong><\/h3>\n\n\n\nDein Hintergrundbild sollte so klein wie m\u00f6glich, aber so gro\u00df wie n\u00f6tig sein.<\/p>\n\n\n\n
<\/div>\n\n\n\nWelches Dateiformat sollte ich nutzen?<\/h2>\n\n\n\n
F\u00fcr Fotos spielen im Web-Umfeld zwei Dateiformate eine wichtige Rolle: png und jpg. Das png-Format besitzt generell einen h\u00f6heren subjektiven Detailreichtum, da bei der Komprimierung nur die Menge der Farben reduziert wird. Zudem unterst\u00fctzt es den Alphakanal, das hei\u00dft, dass es durchsichtige Fl\u00e4chen erm\u00f6glicht. Der Vorteil von jpg liegt in der Komprimierung und der daraus resultierenden geringen Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n
Da f\u00fcr Hintergrundbilder selten viele Details oder Transparenz ben\u00f6tigt werden, es aber auf die Dateigr\u00f6\u00dfe ankommt, bietet sich in diesem Fall das jpg-Format an.<\/p>\n\n\n\n
<\/div>\n\n\n\nWelche Bildgr\u00f6\u00dfen brauche ich?<\/h2>\n\n\n\n
Eine abschlie\u00dfende Antwort auf diese Frage wirst Du erst im Abschnitt \u201cMedia Queries\u201d finden. Zun\u00e4chst gibt es aber einige Punkte, die in die Auswahl geeigneter Bildgr\u00f6\u00dfen einflie\u00dfen und so zu einem tieferen Verst\u00e4ndnis von Bildern im Web beitragen.<\/p>\n\n\n\n
Um das passende Hintergrundbild f\u00fcr jede Bildschirmgr\u00f6\u00dfe auszuliefern, nutzen wir Media-Queries zur Einordnung in Gr\u00f6\u00dfenbereiche. Jedem dieser Bereiche teilen wir dann ein f\u00fcr ihn optimiertes Bild zu. Nehmen wir z. B. einen Bereich, der Bildschirmbreiten von 320 bis 640 Pixel abdeckt. Ein Hintergrundbild f\u00fcr diesen Bereich sollte mindestens in der Breite von 640 Pixeln vorliegen. Die dots per inch (dpi) spielen dabei keine Rolle (72 dpi: Die gr\u00f6\u00dfte L\u00fcge des Webs<\/a>).<\/p>\n\n\n\nAuch das Verh\u00e4ltnis zwischen logischen und physischen Pixeln (Pixel-Verh\u00e4ltnis) sollte bei der Wahl der geeigneten Bildgr\u00f6\u00dfen einflie\u00dfen. Das Pixel-Verh\u00e4ltnis gibt an, aus wie vielen physischen Pixeln (Ger\u00e4tepixel) ein logischer Pixel (CSS Pixel) zusammengesetzt wird. Bei einem Wert von zwei wird jeder Bildpunkt Deines Hintergrundbildes mit vier Pixeln dargestellt (jeweils zwei in H\u00f6he und Breite). Das f\u00fchrt dazu, dass ein 640 Pixel breites Bild auf einem 640 Pixel gro\u00dfen Bildschirm verpixelt aussieht. Daher sollte Dein Hintergrundbild in diesem Fall in doppelter Gr\u00f6\u00dfe ausgeliefert werden.<\/p>\n\n\n\n
Aktuell tummeln sich Pixel-Verh\u00e4ltnisse zwischen eins und f\u00fcnf auf dem Markt. Theoretisch m\u00fcssten also Bilder in bis zu f\u00fcnffacher Gr\u00f6\u00dfe bereitgestellt werden. Das w\u00fcrde vor allem mit Verbindungen im 3G-Bereich zu langen Ladezeiten f\u00fchren. Allerdings kann das menschliche Auge bei einem Pixel-Verh\u00e4ltnis von eins ab einem Abstand von etwas mehr als der Bildschirmdiagonale keine Pixel mehr erkennen. Bei einem Pixel-Verh\u00e4ltnis von zwei wird dieser Abstand halbiert. Das hei\u00dft, dass man sich bei einem Pixel-Verh\u00e4ltnis von zwei schon die Nase an seinem Smartphone plattdr\u00fccken m\u00fcsste, um Pixel zu erkennen. F\u00fcr den Normalgebrauch reicht es also, Bilder in doppelter Gr\u00f6\u00dfe bereitzuhalten.<\/p>\n\n\n\n
Bleibt noch die Frage, bis zu welcher Bildgr\u00f6\u00dfe man geht. Momentan ist \u00fcberall von 4K-Monitoren (meist 3840\u00d72160 Pixel) die Rede und immer mehr Hersteller springen auf diesen Zug auf. Nat\u00fcrlich sind auch andere Gr\u00f6\u00dfen wie beispielsweise 5K (MacBook Pro 2016) und 8K (Dell UltraSharp 32 Ultra HD 8K) auf dem Markt zu finden. F\u00fcr welche Maximalgr\u00f6\u00dfe Du Dich entscheidest, liegt bei Dir. Dein Ausgangsbild sollte nat\u00fcrlich auch entsprechend gro\u00df sein.<\/p>\n\n\n\n
4. Absprungrate ist Rankingfaktor<\/strong><\/h3>\n\n\n\nZwar pr\u00fcfen Suchmaschinen aktuell nicht, ob ein Bild optisch ansprechend ist, aber \u00fcber die Absprungrate kann sich ein Bild mit schlechter Qualit\u00e4t auch auf den Rang Deiner Plattform in den Suchergebnissen niederschlagen.<\/p>\n\n\n\n
<\/div>\n\n\n\nZusammenfassend hei\u00dft das:<\/strong><\/h3>\n\n\n\nDein Hintergrundbild sollte so klein wie m\u00f6glich, aber so gro\u00df wie n\u00f6tig sein.<\/p>\n\n\n\n
<\/div>\n\n\n\nWelches Dateiformat sollte ich nutzen?<\/h2>\n\n\n\n
F\u00fcr Fotos spielen im Web-Umfeld zwei Dateiformate eine wichtige Rolle: png und jpg. Das png-Format besitzt generell einen h\u00f6heren subjektiven Detailreichtum, da bei der Komprimierung nur die Menge der Farben reduziert wird. Zudem unterst\u00fctzt es den Alphakanal, das hei\u00dft, dass es durchsichtige Fl\u00e4chen erm\u00f6glicht. Der Vorteil von jpg liegt in der Komprimierung und der daraus resultierenden geringen Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n
Da f\u00fcr Hintergrundbilder selten viele Details oder Transparenz ben\u00f6tigt werden, es aber auf die Dateigr\u00f6\u00dfe ankommt, bietet sich in diesem Fall das jpg-Format an.<\/p>\n\n\n\n
<\/div>\n\n\n\nWelche Bildgr\u00f6\u00dfen brauche ich?<\/h2>\n\n\n\n
Eine abschlie\u00dfende Antwort auf diese Frage wirst Du erst im Abschnitt \u201cMedia Queries\u201d finden. Zun\u00e4chst gibt es aber einige Punkte, die in die Auswahl geeigneter Bildgr\u00f6\u00dfen einflie\u00dfen und so zu einem tieferen Verst\u00e4ndnis von Bildern im Web beitragen.<\/p>\n\n\n\n
Um das passende Hintergrundbild f\u00fcr jede Bildschirmgr\u00f6\u00dfe auszuliefern, nutzen wir Media-Queries zur Einordnung in Gr\u00f6\u00dfenbereiche. Jedem dieser Bereiche teilen wir dann ein f\u00fcr ihn optimiertes Bild zu. Nehmen wir z. B. einen Bereich, der Bildschirmbreiten von 320 bis 640 Pixel abdeckt. Ein Hintergrundbild f\u00fcr diesen Bereich sollte mindestens in der Breite von 640 Pixeln vorliegen. Die dots per inch (dpi) spielen dabei keine Rolle (72 dpi: Die gr\u00f6\u00dfte L\u00fcge des Webs<\/a>).<\/p>\n\n\n\nAuch das Verh\u00e4ltnis zwischen logischen und physischen Pixeln (Pixel-Verh\u00e4ltnis) sollte bei der Wahl der geeigneten Bildgr\u00f6\u00dfen einflie\u00dfen. Das Pixel-Verh\u00e4ltnis gibt an, aus wie vielen physischen Pixeln (Ger\u00e4tepixel) ein logischer Pixel (CSS Pixel) zusammengesetzt wird. Bei einem Wert von zwei wird jeder Bildpunkt Deines Hintergrundbildes mit vier Pixeln dargestellt (jeweils zwei in H\u00f6he und Breite). Das f\u00fchrt dazu, dass ein 640 Pixel breites Bild auf einem 640 Pixel gro\u00dfen Bildschirm verpixelt aussieht. Daher sollte Dein Hintergrundbild in diesem Fall in doppelter Gr\u00f6\u00dfe ausgeliefert werden.<\/p>\n\n\n\n
Aktuell tummeln sich Pixel-Verh\u00e4ltnisse zwischen eins und f\u00fcnf auf dem Markt. Theoretisch m\u00fcssten also Bilder in bis zu f\u00fcnffacher Gr\u00f6\u00dfe bereitgestellt werden. Das w\u00fcrde vor allem mit Verbindungen im 3G-Bereich zu langen Ladezeiten f\u00fchren. Allerdings kann das menschliche Auge bei einem Pixel-Verh\u00e4ltnis von eins ab einem Abstand von etwas mehr als der Bildschirmdiagonale keine Pixel mehr erkennen. Bei einem Pixel-Verh\u00e4ltnis von zwei wird dieser Abstand halbiert. Das hei\u00dft, dass man sich bei einem Pixel-Verh\u00e4ltnis von zwei schon die Nase an seinem Smartphone plattdr\u00fccken m\u00fcsste, um Pixel zu erkennen. F\u00fcr den Normalgebrauch reicht es also, Bilder in doppelter Gr\u00f6\u00dfe bereitzuhalten.<\/p>\n\n\n\n
Bleibt noch die Frage, bis zu welcher Bildgr\u00f6\u00dfe man geht. Momentan ist \u00fcberall von 4K-Monitoren (meist 3840\u00d72160 Pixel) die Rede und immer mehr Hersteller springen auf diesen Zug auf. Nat\u00fcrlich sind auch andere Gr\u00f6\u00dfen wie beispielsweise 5K (MacBook Pro 2016) und 8K (Dell UltraSharp 32 Ultra HD 8K) auf dem Markt zu finden. F\u00fcr welche Maximalgr\u00f6\u00dfe Du Dich entscheidest, liegt bei Dir. Dein Ausgangsbild sollte nat\u00fcrlich auch entsprechend gro\u00df sein.<\/p>\n\n\n\n
Zusammenfassend hei\u00dft das:<\/strong><\/h3>\n\n\n\nDein Hintergrundbild sollte so klein wie m\u00f6glich, aber so gro\u00df wie n\u00f6tig sein.<\/p>\n\n\n\n
<\/div>\n\n\n\nWelches Dateiformat sollte ich nutzen?<\/h2>\n\n\n\n
F\u00fcr Fotos spielen im Web-Umfeld zwei Dateiformate eine wichtige Rolle: png und jpg. Das png-Format besitzt generell einen h\u00f6heren subjektiven Detailreichtum, da bei der Komprimierung nur die Menge der Farben reduziert wird. Zudem unterst\u00fctzt es den Alphakanal, das hei\u00dft, dass es durchsichtige Fl\u00e4chen erm\u00f6glicht. Der Vorteil von jpg liegt in der Komprimierung und der daraus resultierenden geringen Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n
Da f\u00fcr Hintergrundbilder selten viele Details oder Transparenz ben\u00f6tigt werden, es aber auf die Dateigr\u00f6\u00dfe ankommt, bietet sich in diesem Fall das jpg-Format an.<\/p>\n\n\n\n
<\/div>\n\n\n\nWelche Bildgr\u00f6\u00dfen brauche ich?<\/h2>\n\n\n\n
Eine abschlie\u00dfende Antwort auf diese Frage wirst Du erst im Abschnitt \u201cMedia Queries\u201d finden. Zun\u00e4chst gibt es aber einige Punkte, die in die Auswahl geeigneter Bildgr\u00f6\u00dfen einflie\u00dfen und so zu einem tieferen Verst\u00e4ndnis von Bildern im Web beitragen.<\/p>\n\n\n\n
Um das passende Hintergrundbild f\u00fcr jede Bildschirmgr\u00f6\u00dfe auszuliefern, nutzen wir Media-Queries zur Einordnung in Gr\u00f6\u00dfenbereiche. Jedem dieser Bereiche teilen wir dann ein f\u00fcr ihn optimiertes Bild zu. Nehmen wir z. B. einen Bereich, der Bildschirmbreiten von 320 bis 640 Pixel abdeckt. Ein Hintergrundbild f\u00fcr diesen Bereich sollte mindestens in der Breite von 640 Pixeln vorliegen. Die dots per inch (dpi) spielen dabei keine Rolle (72 dpi: Die gr\u00f6\u00dfte L\u00fcge des Webs<\/a>).<\/p>\n\n\n\nAuch das Verh\u00e4ltnis zwischen logischen und physischen Pixeln (Pixel-Verh\u00e4ltnis) sollte bei der Wahl der geeigneten Bildgr\u00f6\u00dfen einflie\u00dfen. Das Pixel-Verh\u00e4ltnis gibt an, aus wie vielen physischen Pixeln (Ger\u00e4tepixel) ein logischer Pixel (CSS Pixel) zusammengesetzt wird. Bei einem Wert von zwei wird jeder Bildpunkt Deines Hintergrundbildes mit vier Pixeln dargestellt (jeweils zwei in H\u00f6he und Breite). Das f\u00fchrt dazu, dass ein 640 Pixel breites Bild auf einem 640 Pixel gro\u00dfen Bildschirm verpixelt aussieht. Daher sollte Dein Hintergrundbild in diesem Fall in doppelter Gr\u00f6\u00dfe ausgeliefert werden.<\/p>\n\n\n\n
Aktuell tummeln sich Pixel-Verh\u00e4ltnisse zwischen eins und f\u00fcnf auf dem Markt. Theoretisch m\u00fcssten also Bilder in bis zu f\u00fcnffacher Gr\u00f6\u00dfe bereitgestellt werden. Das w\u00fcrde vor allem mit Verbindungen im 3G-Bereich zu langen Ladezeiten f\u00fchren. Allerdings kann das menschliche Auge bei einem Pixel-Verh\u00e4ltnis von eins ab einem Abstand von etwas mehr als der Bildschirmdiagonale keine Pixel mehr erkennen. Bei einem Pixel-Verh\u00e4ltnis von zwei wird dieser Abstand halbiert. Das hei\u00dft, dass man sich bei einem Pixel-Verh\u00e4ltnis von zwei schon die Nase an seinem Smartphone plattdr\u00fccken m\u00fcsste, um Pixel zu erkennen. F\u00fcr den Normalgebrauch reicht es also, Bilder in doppelter Gr\u00f6\u00dfe bereitzuhalten.<\/p>\n\n\n\n
Bleibt noch die Frage, bis zu welcher Bildgr\u00f6\u00dfe man geht. Momentan ist \u00fcberall von 4K-Monitoren (meist 3840\u00d72160 Pixel) die Rede und immer mehr Hersteller springen auf diesen Zug auf. Nat\u00fcrlich sind auch andere Gr\u00f6\u00dfen wie beispielsweise 5K (MacBook Pro 2016) und 8K (Dell UltraSharp 32 Ultra HD 8K) auf dem Markt zu finden. F\u00fcr welche Maximalgr\u00f6\u00dfe Du Dich entscheidest, liegt bei Dir. Dein Ausgangsbild sollte nat\u00fcrlich auch entsprechend gro\u00df sein.<\/p>\n\n\n\n
Welches Dateiformat sollte ich nutzen?<\/h2>\n\n\n\n
F\u00fcr Fotos spielen im Web-Umfeld zwei Dateiformate eine wichtige Rolle: png und jpg. Das png-Format besitzt generell einen h\u00f6heren subjektiven Detailreichtum, da bei der Komprimierung nur die Menge der Farben reduziert wird. Zudem unterst\u00fctzt es den Alphakanal, das hei\u00dft, dass es durchsichtige Fl\u00e4chen erm\u00f6glicht. Der Vorteil von jpg liegt in der Komprimierung und der daraus resultierenden geringen Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n
Da f\u00fcr Hintergrundbilder selten viele Details oder Transparenz ben\u00f6tigt werden, es aber auf die Dateigr\u00f6\u00dfe ankommt, bietet sich in diesem Fall das jpg-Format an.<\/p>\n\n\n\n
Welche Bildgr\u00f6\u00dfen brauche ich?<\/h2>\n\n\n\n
Eine abschlie\u00dfende Antwort auf diese Frage wirst Du erst im Abschnitt \u201cMedia Queries\u201d finden. Zun\u00e4chst gibt es aber einige Punkte, die in die Auswahl geeigneter Bildgr\u00f6\u00dfen einflie\u00dfen und so zu einem tieferen Verst\u00e4ndnis von Bildern im Web beitragen.<\/p>\n\n\n\n
Um das passende Hintergrundbild f\u00fcr jede Bildschirmgr\u00f6\u00dfe auszuliefern, nutzen wir Media-Queries zur Einordnung in Gr\u00f6\u00dfenbereiche. Jedem dieser Bereiche teilen wir dann ein f\u00fcr ihn optimiertes Bild zu. Nehmen wir z. B. einen Bereich, der Bildschirmbreiten von 320 bis 640 Pixel abdeckt. Ein Hintergrundbild f\u00fcr diesen Bereich sollte mindestens in der Breite von 640 Pixeln vorliegen. Die dots per inch (dpi) spielen dabei keine Rolle (72 dpi: Die gr\u00f6\u00dfte L\u00fcge des Webs<\/a>).<\/p>\n\n\n\n Auch das Verh\u00e4ltnis zwischen logischen und physischen Pixeln (Pixel-Verh\u00e4ltnis) sollte bei der Wahl der geeigneten Bildgr\u00f6\u00dfen einflie\u00dfen. Das Pixel-Verh\u00e4ltnis gibt an, aus wie vielen physischen Pixeln (Ger\u00e4tepixel) ein logischer Pixel (CSS Pixel) zusammengesetzt wird. Bei einem Wert von zwei wird jeder Bildpunkt Deines Hintergrundbildes mit vier Pixeln dargestellt (jeweils zwei in H\u00f6he und Breite). Das f\u00fchrt dazu, dass ein 640 Pixel breites Bild auf einem 640 Pixel gro\u00dfen Bildschirm verpixelt aussieht. Daher sollte Dein Hintergrundbild in diesem Fall in doppelter Gr\u00f6\u00dfe ausgeliefert werden.<\/p>\n\n\n\n Aktuell tummeln sich Pixel-Verh\u00e4ltnisse zwischen eins und f\u00fcnf auf dem Markt. Theoretisch m\u00fcssten also Bilder in bis zu f\u00fcnffacher Gr\u00f6\u00dfe bereitgestellt werden. Das w\u00fcrde vor allem mit Verbindungen im 3G-Bereich zu langen Ladezeiten f\u00fchren. Allerdings kann das menschliche Auge bei einem Pixel-Verh\u00e4ltnis von eins ab einem Abstand von etwas mehr als der Bildschirmdiagonale keine Pixel mehr erkennen. Bei einem Pixel-Verh\u00e4ltnis von zwei wird dieser Abstand halbiert. Das hei\u00dft, dass man sich bei einem Pixel-Verh\u00e4ltnis von zwei schon die Nase an seinem Smartphone plattdr\u00fccken m\u00fcsste, um Pixel zu erkennen. F\u00fcr den Normalgebrauch reicht es also, Bilder in doppelter Gr\u00f6\u00dfe bereitzuhalten.<\/p>\n\n\n\n Bleibt noch die Frage, bis zu welcher Bildgr\u00f6\u00dfe man geht. Momentan ist \u00fcberall von 4K-Monitoren (meist 3840\u00d72160 Pixel) die Rede und immer mehr Hersteller springen auf diesen Zug auf. Nat\u00fcrlich sind auch andere Gr\u00f6\u00dfen wie beispielsweise 5K (MacBook Pro 2016) und 8K (Dell UltraSharp 32 Ultra HD 8K) auf dem Markt zu finden. F\u00fcr welche Maximalgr\u00f6\u00dfe Du Dich entscheidest, liegt bei Dir. Dein Ausgangsbild sollte nat\u00fcrlich auch entsprechend gro\u00df sein.<\/p>\n\n\n\n
![\"6](\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/05\/201703_Wirklich_perfekte_full_size_Hintergrundbilder_im_Web_1.jpg\")
<\/figure>\n\n\n\n![\"Beispiel](\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/05\/201703_Wirklich_perfekte_full_size_Hintergrundbilder_im_Web_3-1.gif\")
<\/figure>\n\n\n\n