Bilder je nach Auflösung ausgeben

html.de-Forum HTML, XHTML & CSS
1

Ich gebe mit Media queries in Abhängigkeit der Device-Größe verschiedene CSS aus bzw. ich habe ein grundlegendes CSS und je nach Auflösung (z.B. für ein mobiles Device) werden zusätzliche Angaben gemacht.

Wie handhabe ich das mit Bildern? z.B. Logo oder Bilder im Arikel…
Natürlich kann ich diese einfach skalieren, aber zum einen ist es ja sinnvoller bei einem mobilen Gerät auch eine tatsächlich kleinere Datei zu verwenden und zum anderen soll auch alles dynamisch bleiben, d.h. ein Artikel soll nur einmal geschrieben werden ohne dass sich der Autor um verschiedene Geräte Gedanken machen muss.
Die korrekte Anzeige ist ja letztlich meine Aufgabe :slight_smile:

2

Da bist du bei CSS falsch. Die Skalierung muss bereits auf dem Server geschehen.

Du könntest die Bilder über ein PHP-Skript zurückgeben.

Der Aufruf könnte dann in HTML zb so aussehen:

<img src="img.php?file=xyz.jpg&width=480&height=480" alt=""> <img src="img.php?file=xyz.jpg&width=480&quality=10" alt=""> <img src="img.php?file=xyz.jpg&width=480&height=480&mode=cover" alt="">

In CSS so:

/* desktop */
.elem {
  background-image:url(../img.php?file=xyz.jpg&width=1920);
}
/* mobile */
.elem {
  background-image:url(../img.php?file=xyz.jpg&width=480&quality=70);
}

In img.php wird das Bild eingelesen, den Parametern entsprechend verarbeitet und zurückgegeben.
Die img.php müsstest du natürlich noch selber schreiben.

So würde ich das wahrscheinlich machen.

Aber wenn du von PHP zu wenig verstehst, es gibt auch „fertige“ Lösungen:
http://adaptive-images.com