Kurze Frage zu responsive Design

[Tronjer]

Ich schreibe gerade eine responsive Seite und überlege, wie ich das mit den src images lösen soll. Normaler Weise gibt man aus Gründen der Performance dem <img>-Attribut ja Werte für width und height mit. Da das Attribut im HTML steht, lässt es sich mit Media-Queries allerdings nicht beeinflussen.

Sollen diese Bilder nun auf Smartphones und Tablets in kleineren Auflösungen gerendert werden, dann gäbe dafür doch nur drei Ansätze:

- man verzichtet auf width und height im <img>-Attribut und legt diese Werte für den Bildcontainer fest.
- man tauscht width und height im <img>-Attribut oder das Bild selber dynamisch per JavaScript aus.
- man verwendet für width und height im <img>-Attribut Prozentwerte statt Pixel.

Wie macht ihr das?

 

[scbawik]

Hm, habe ich mich auch schon oft gefragt.

Ich mach es eigentlich immer wieder anders, da ich wie gesagt auch schon länger nach der besten Lösung suche.

Also entweder regle ich die Größe des <img>-Container per CSS, oder ich gebe ihm 100% als Attribut und lass es dann vom umgebenden Div regeln.

 

[threadi]

Die HTML-Attribute width und height werden durch eine Angabe per CSS überschrieben.

<img src="bild.png" alt="" width="20" height="20">

img {
 height: 40px;
 width: 40px;
}

Das würde ein 40x40 Pixel großes Bild anzeigen. Die 20er-Werte würden ignoriert werden.

Ich würde btw. die Maße aber weiterhin per HTML angeben. Dadurch wird es Browsern ermöglicht die Seite einen Tick schneller zu laden, da sie die Maße der Bilder nicht erst rendern sondern direkt aus dem HTML-Code ablegen könnten. Bei Seiten mit vielen Bildern kann das einen gewissen Geschwindigkeitsvorteil in der Anzeige bringen.

 

[Tronjer]

Die HTML-Attribute width und height werden durch eine Angabe per CSS überschrieben.

Danke, das ist die einfachste Lösung.