Responsive: Wenn weniger als 800px bestimmte Bilder entfernen

[jakestyler]

Hallo,
auf meiner Seite habe ich ein Menü. Es hat vier Menüpunkte die zentriert sind. Links davon sind 3 Bilder (Bilder mit Text "Login mit {hier SocialMedia-Plattform einfügen}), die über Responsive CSS oder mit etwas ähnlichem entfernt werden sollen, sobald ein Bildschirm kleiner ist als @media 800px. Sonst rutschen die Menülinks in die Bilder rein.
Bitte helft mir! Habe gar keine Ahnung von Responsive und finde auch kein passendes Tutorial.

Mfg :)

 

[Tronjer]

Goggle mal nach Media Queries.

 

[jakestyler]

[FONT=‘Lucida Sans Unicode’]When it comes to [/FONT]<img> [FONT=‘Lucida Sans Unicode’]tags, say for eCommerce store product images or image galleries, it is not possible to utilise CSS media queries to stop browsers from downloading unneeded assets.[/FONT]

:/ - Das geht dann anscheinend schonmal nicht.

 

[Tronjer]

Doch, tut es. Du kannst die Größenangaben anstatt auf das <img> auf den umgebenden Container legen. Angaben für width und height im HTML sind überflüssig.

 

[vitus37]

Doch, tut es. Du kannst die Größenangaben anstatt auf das <img> auf den umgebenden Container legen.

Ich verstehe nicht, in wie weit das die von jakestyler zitierte Aussage widerlegt. Es gibt keine Möglichkeit durch CSS das Laden eines Bildes zu unterbinden.

Angaben für width und height im HTML sind überflüssig.

Bei einem img-Tag?
Das ist nicht richtig. Diese Angaben haben durchaus Bedeutung für den Browser und können beim Rendern Geschwindigkeitsvorteile bringen.

 

[Tronjer]

Ich verstehe nicht, in wie weit das die von jakestyler zitierte Aussage widerlegt. Es gibt keine Möglichkeit durch CSS das Laden eines Bildes zu unterbinden.

Eine "harte" Lösung würde doch nur Sinn machen, wenn man das Styling nach verwendeten Ausgabegerät festlegt: Falls der User die Seite auf seinem Smartphone aufruft, soll das Bild nicht geladen werden.

Wenn das Design statt dessen aber mit dem Browser skalieren soll, wäre eine "weiche" Lösung besser, bei dem das Bild geladen und dem umgebenden Div per Media Query je nach Größe ein display:none oder display:block zugewiesen wird. Alternativ dazu wäre auch ein JS-Ansatz denkbar, der das entsprechende HTML-Tag erstellt, bzw. aus dem DOM entfernt.

Bei einem img-Tag?
Das ist nicht richtig. Diese Angaben haben durchaus Bedeutung für den Browser und können beim Rendern Geschwindigkeitsvorteile bringen.

Sofern das Bild in der richtigen Größe angelegt wird, ist dieser Vorteil aber unerheblich.

 

[vitus37]

Wenn das Design statt dessen aber mit dem Browser skalieren soll, wäre eine "weiche" Lösung besser, bei dem das Bild geladen und dem umgebenden Div per Media Query je nach Größe ein display:none oder display:block zugewiesen wird. Alternativ dazu wäre auch ein JS-Ansatz denkbar, der das entsprechende HTML-Tag erstellt, bzw. aus dem DOM entfernt.

Mir leuchtet nicht ganz ein, weshalb der Media Query auf ein das Bild umgebendes DIV angewendet werden sollte und nicht auf das IMG selbst. Ein DIV, das nur ein IMG beinhaltet, ist zweckfrei.

Ich würde eine JavaScript-Lösung verfolgen, bei der das Laden des Bildes tatsächlich verhindert wird. Gerade auf mobilen Endgeräten kann das Vorteile für den Benutzer bringen.

Sofern das Bild in der richtigen Größe angelegt wird, ist dieser Vorteil aber unerheblich.

Das stimmt nicht. Je nach Dateityp und Kompressionsart weiß der Browser die Größe des Bildes solange nicht, bis die Grafik komplett geladen ist. Das heißt, dass der Browser auch die restliche Webseite nicht richtig rendern kann, da er die Maße des Bildes nicht kennt.

 

[Tronjer]

Das stimmt nicht. Je nach Dateityp und Kompressionsart weiß der Browser die Größe des Bildes solange nicht, bis die Grafik komplett geladen ist. Das heißt, dass der Browser auch die restliche Webseite nicht richtig rendern kann, da er die Maße des Bildes nicht kennt.

Ich könnte das jetzt ausprobieren und ein Bild in der Auflösung von 400x300px mit 70kb Dateigröße einmal mit und einmal ohne Größenangaben im HTML einbinden und anschließend die Ladezeiten im Firebug vergleichen, und ich wette mit dir, dass der Unterschied vernachlässigenswert ist. ;)

Ich gebe dir allerdings insofern recht, dass es bei sehr großen oder sehr vielen Bildern natürlich schon einen Unterschied macht. Andererseits klang die Frage des TE aber eher nach drei kleinen Bildern.

 

[vitus37]

Ich könnte das jetzt ausprobieren und ein Bild in der Auflösung von 400x300px mit 70kb Dateigröße einmal mit und einmal ohne Größenangaben im HTML einbinden und anschließend die Ladezeiten im Firebug vergleichen, und ich wette mit dir, dass der Unterschied vernachlässigenswert ist. ;)

Es geht nicht um die Ladezeiten. Es geht um die Renderzeiten. Der Browser berechnet die Positionen von diversen HTML-Elementen im Dokument.

Stell dir vor, auf einer Seite ist ein Fließtext, in dem links mit Textumfluss ein Bild eingebunden ist. Der Browser kann theoretisch so lange die Positionen der einzelnen Textbuchstaben nicht errechnen, bis er weiß, wie viel Platz er für das Bild zurückhalten muss. Hat der Browser direkt im img-Tag die Maße bereits gegeben, kann er den Text bereits rendern, ohne das Bild tatsächlich zu haben.

Du hast zwar recht damit, dass der zeitliche Unterschied marginal ist, doch letztlich ist es die Masse der Kleinigkeiten, die am Schluss doch etwas ausmacht.