Nehmen wir an, Sie haben eine Webseite gestaltet und verwenden ein vollflächiges Hintergrundbild. Sie mögen die Art und Weise, wie die Seite mit diesem Hintergrundbild aussieht, wirklich. Es sieht fantastisch aus. Aber das Bild ist 350 KB groß. Sie haben beschlossen, dass es sich trotz des Wissens, dass dies viel ist, lohnt.
Aber dann denken Sie über Mobilgeräte nach. Dieses große Hintergrundbild trägt auf dem kleinen Bildschirm nicht viel zum Design bei, und 350 KB sind besonders umständlich für das Gerät, das wahrscheinlich eine geringere Bandbreite und generell langsamere Leistung hat. Berücksichtigen Sie dann, dass mobile Browser oft einen viel begrenzteren Cache haben, sodass selbst das nicht hilft. Mobiler Datenverkehr macht 2 % Ihres gesamten Datenverkehrs aus.
Sie könnten natürlich Media Queries verwenden, um das Hintergrundbild nicht anzuzeigen, wenn ein Bildschirm schmal ist, aber das hilft nicht viel, da diese Ressource immer noch heruntergeladen wird. Sie stecken also in der Klemme.
Verwenden Sie das 350 KB große Bild und genießen Sie die Schönheit, akzeptieren Sie die erheblichen Konsequenzen für 2 % Ihrer Nutzer? Oder verzichten Sie auf das Bild und nehmen Sie in Kauf, dass die Seite etwas hässlicher, aber schneller ist?
Die Umfrage (in der Seitenleiste) wird nur die beiden Optionen enthalten, die Sie zur Auswahl zwingen. Wenn Sie jedoch eine dritte Option haben, die Sie bevorzugen würden, hinterlassen Sie diese bitte als Kommentar.
Update
Irgendwie war ich fest davon überzeugt, dass Hintergrundbilder, auf die in CSS verwiesen wird, selbst wenn sie sich unter einer nicht aktivierten @media-Abfrage befinden, immer noch vom Browser heruntergeladen werden. Ich habe das Gefühl, dass ich Testfälle durchgeführt und mit Leuten darüber gesprochen habe, aber entweder habe ich geträumt oder die Browser haben dieses Problem behoben. In diesem Testfall von Leser Ruben können Sie testen, dass selbst Hintergrundbilder, die durch @media-Abfragen entfernt werden, nicht geladen werden.
Diese Umfrage ist also im Grunde ungültig… die richtige Antwort wäre, dass Sie das 350 KB große Bild *immer* über @media-Abfragen entfernen.
Interessante Frage. Ich habe dafür gestimmt, es zu behalten, aber ich denke wirklich, es hängt davon ab, wofür die Website ist. Wenn es sich um eine Galerie-Website handelt, auf der die Leute auf große Grafiken warten müssen, dann halte ich es für in Ordnung. Wenn es sich jedoch um eine Website handelt, auf der die Leute schnell Informationen benötigen… dann würde ich es vermeiden.
„Sie könnten natürlich Media Queries verwenden, um das Hintergrundbild nicht anzuzeigen, wenn ein Bildschirm schmal ist, aber das hilft nicht viel, da diese Ressource immer noch heruntergeladen wird.“
Wenn das Bild als Hintergrundbild über CSS angewendet wird, können Sie Ihre Media Queries so einrichten, dass sie mobile zuerst berücksichtigen. Wenn das Bild nur in der Desktop-Media-Abfrage angewendet wird, wird es auf einem Mobilgerät nicht heruntergeladen. Problem gelöst?
Ich bin ziemlich sicher, dass das nicht stimmt. Alle Ressourcen in CSS, unabhängig davon, ob die Media-Abfrage in Kraft ist oder nicht, werden heruntergeladen. Ich glaube, das ist absichtlich so, damit die Änderung sehr schnell erfolgen kann, falls eine andere Media-Abfrage plötzlich in Kraft tritt.
Nicht „alle“ Ressourcen, aber alle anwendbaren Ressourcen*. Nur zur Klarstellung für einige Leute, die das Konzept von CSS gerade erst erfassen! Wenn Sie ein 5-MB-Bild als Hintergrund für ein DIV einfügen, das nicht Teil der von Ihnen geladenen Seite ist, wird dieses Bild nicht heruntergeladen.
Falsch, Chris. Einer der Gründe für das Mobile-First-Design ist, dass Assets, die in Desktop-Media-Abfragen definiert sind, vom Browser nicht heruntergeladen werden. Sie können dies einfach testen, indem Sie den NET-Tab in Chrome oder Firefox verwenden.
Es ist eine großartige Funktion
@Chris
Wenn Sie Media Queries zuerst für die kleinen Auflösungen verwenden, werden die größeren Desktop-Assets wie die riesigen Hintergrundbilder nicht heruntergeladen. Das Problem ist dann, dass Sie JavaScript verwenden müssen, um Media Queries für IE zu „shimmen“, sonst wird ihnen standardmäßig die lo-fi Mobile-Version geliefert.
Schauen Sie sich 320 and up an, es ist im Wesentlichen eine verfeinerte Version des Less CSS Frameworks, das dies erreicht.
Es stimmt. Sie können es hier testen. Bitte korrigieren Sie diesen Artikel: Medienfragmente lösen das Problem.
@Graham: Kein Shim nötig, nur „@media only“.
Sie haben Recht, es stimmt.
Ich werde das korrigieren. Jetzt interessiert mich, wie ich zu diesem falschen Verständnis gekommen bin. Ich frage mich, ob in früheren Versionen von Browsern, die Media Queries unterstützten, alle Assets heruntergeladen wurden, wenn sie anwendbar waren oder nicht, oder ob ich das einfach falsch angenommen habe.
Ich denke, Sie müssen eine weitere Option hinzufügen, um es anzuzeigen oder nicht anzuzeigen. Die meisten Websites werden heute auf irgendeiner Art von Plattform aufgebaut, und ich denke, Sie könnten eine Win-Win-Situation schaffen, indem Sie das Bild nur für das Web und nicht für Mobilgeräte abfragen. Oder eine andere Option wäre die Verwendung von jQuery, um es zu nutzen oder nicht.
Entweder oder, ich denke, die Umfrage sollte eine „andere“ Option für ein paar verschiedene Wege haben, da die beiden von Ihnen bereitgestellten nicht unbedingt die einzigen Optionen sind, die Sie haben.
/mein 2 Cent! :)
Genau, die Verwendung von JavaScript oder serverseitiger Erkennung zur Anzeige des Bildes scheint die beste Wahl zu sein. Es ist sicherlich besser, als das Bild ausschließlich wegen Mobilgeräten aufzugeben.
Fügen Sie den Stil Inline hinzu und blenden Sie ihn mit serverseitiger Agenten-/Browsererkennung für Mobilgeräte aus. Ja, das verstößt gegen fast jede Regel (Inline-Stile, Browser-Erkennung), aber es funktioniert.
Alternativ könnte Ihr serverseitiger Erkennungscode einfach eine Klasse zum Element hinzufügen, anstatt Inline-Stile zu verwenden.
Ich mag die Lösung von Matt Wilcox: http://adaptive-images.com/
Es erfordert ein wenig PHP und .htaccess, aber es lässt sich in jedes bestehende Projekt einfügen, sodass Sie Ihre Website nicht neu codieren müssen.
Stimme zu! Adaptive Images ist definitiv eine sehr elegante Lösung, um dieses Problem zu lösen!
Ich würde eine Art serverseitiges (PHP) Programm verwenden, um das Bild zu laden oder nicht zu laden.
Was RussellUresti gesagt hat.
Chris, bist du sicher, dass es immer noch heruntergeladen wird, wenn du den Hintergrund für Mobilgeräte überschreibst?
Gute Arbeit, Mann
http://adaptive-images.com/ ist der richtige Weg. Die Implementierung dauert nur wenige Minuten und funktioniert hervorragend.
Erstens, Chris, ich bin ein großer Fan. Tolle Arbeit.
Zweitens. Muss man sich nicht irgendwann auf modifizierte Browser und die steigende Verarbeitungsgeschwindigkeit zukünftiger Mobiltelefone verlassen? Opera Mini und anscheinend (hoffentlich gut) Amazon Silk komprimieren Bilder mit verschiedenen Techniken, um sie schneller für Mobilgeräte bereitzustellen. Die meisten Leute, die ich auf älteren Telefonen sehe, versuchen nicht einmal mehr, ins Internet zu gehen, weil ALLE Websites peinlich langsam laden.
Außerdem, da sie neue Smartphones praktisch verschenken, denke ich, dass die Umlaufgeschwindigkeit viel höher ist als bei jemandem, der an einer alten Maschine mit Windows XP festhält.
Deshalb sage ich, vergiss es und lass es gut aussehen. Responsives Design sollte für besseres Lesen und nicht für schnellere Downloads gedacht sein. Nur meine Meinung.
Ich denke, es hängt wirklich vom Zweck der Website ab.
Wie Jonathan sagt, ist es für Informationswebsites keine gute Idee.
Aber ich würde es verwenden, wenn das Hauptziel der Website Spaß/Unterhaltung ist oder wenn der „Charme“ der Website wichtiger ist als die Funktionalität!
Ich verstehe, dass Sie die Optionen bewusst begrenzt haben, um eine Entscheidung zu erzwingen, aber wie die allgemeine Konsensbildung in den Kommentaren scheint, ist die beste Option (zumindest für mich) eine Art adaptive Bilderkennung auf Serverseite.
Ich stimme dafür, es beizubehalten.
Ich glaube an schlanken und effizienten Code, erkenne aber auch an, dass im heutigen Internet mit Breitband und 4G-Konnektivität, die sich wie ein Lauffeuer verbreitet, 350 KB kein wirkliches Problem darstellen.
Ich würde wahrscheinlich JavaScript verwenden, um die Bildschirmbreite beim Laden zu erkennen und dann das richtige Bild abzurufen. Wenn ich schick sein wollte, würde ich wahrscheinlich den Browser-Resize-Event nutzen und das Bild dynamisch aktualisieren, wie benötigt. Gibt es etwas Falsches an diesem Ansatz? Mir scheint es unkompliziert.
Sie können das Bild immer über JavaScript / jQuery als Hintergrund hinzufügen und den Download auf dem Mobilgerät vermeiden.
Schau es dir an
http://jsfiddle.net/p4bl1t0/3xdZq/
Da es sich um ein Hintergrundbild handelt, warum nicht JS verwenden, um dem Body eine Klasse für Desktops hinzuzufügen und eine CSS-Regel darum herum zu erstellen?
„Ich bin ziemlich sicher, dass das nicht stimmt. Alle Ressourcen in CSS, unabhängig davon, ob die Media-Abfrage in Kraft ist oder nicht, werden heruntergeladen.“
Nein. Denken Sie an Hover-CSS-Bilder? Diese werden nur verwendet, wenn der Hover tatsächlich ausgelöst wird.
Liefern Sie einfach das 350 KB große Bild für Desktops (wenn Sie es wirklich brauchen) und etwas anderes für Mobilgeräte. Es spielt keine Rolle, ob Sie letzteres mit einer Form von CSS, JavaScript oder serverseitiger Inhaltsaushandlung tun.
Ich benutze das Bild und erstelle eine viel schlankere, leichtere, mobile Version für meinen Blog. :)
Für ein vollbildhohes Hintergrundbild würde ich den Mobile-First-Ansatz verwenden: Verwenden Sie eine kleinere Datei und ersetzen Sie sie durch eine höhere Auflösung, wenn der Browser/Benutzer davon profitiert.
Hier ist der Test. Sehen Sie, wie das riesige Bild nicht geladen wird, indem Sie Ihren Browser-Netzwerkinspektor verwenden.
Ändern Sie dann die maximale Breite auf 20 und sehen Sie, wie es funktioniert.
Wenn ich es wäre. Ein JavaScript-Code wurde am Ende der Seite hinzugefügt, um zu erkennen.
wenn es Desktop ist, fügen Sie das CSS-Hintergrundbild hinzu, wählen Sie sogar ein Bild mit der Bildschirmbreite und -höhe des Besuchers, um die Bildgröße zu reduzieren. und komprimieren Sie das Bild mit der Option „für Gerät und Web speichern“ in Photoshop.