Mein Vorschlag: Bilder in verschiedenen Größen auf den Webserver legen und per CSS an die Fensterbreite anpassen.
Das ist nicht gut!
Warum? Wird das Fenster des Browsers immer kleiner, dann "springt" das Bild irgendwann auf eine andere Größe (läd also das andere Bild für die passende Bildschirmgröße), aber der "Effekt" ist dann nicht schön, eben weil das Bild auf eine andere kleinere Größe "springt".
Das Layout müsste dann
adaptiv sein, da die Bilder springen = schlechter als responsiv!
Beim Surfen passiert es mit nicht ganz so schnellen Leitungen, dass sich Bilder quasi abrollen, weil sie erst nach und nach angezeigt werden. Das scheint mir der Effekt von zu großen Bildern zu sein, die beim Einbinden skaliert werden.
...
Das was du meinst ist ganz einfach das Problem, dass die Bilder mit ihrer gesamten Größe (Bilder haben oft einige MB!) geladen werden, auch wenn das Bild verkleinert (width und height) dargestellt wird.
as ich nicht auf anhieb weiß, ob die aktuellen CMS (joomla und co.) mittlerweile die Grafiken serverseitig mittels Skript skalieren bzw. ob es dafür Module gibt und diese die Grafiken dann gleich in der nur notwendigen Größe senden.
Das Bild wird in der größten Auflösung, in der es Verwendung findet, eingebunden.
Nur bekommt es weder eine Breite noch eine Höhe zugeweisen!
Somit sakiliert es sich proportional egal welcher Viewport (mittels media querie) verwendet wird.
Das ist für responsive Seiten sinnvoll.
Je größer ein Bild ist, umso größer ist auch die Datei des Bildes. Damit überträgt der Web-Server auch mehr Datenvolumen zum Endgerät.
Stimmt zwar,
aber man kann die KB-Größe des Bildes, bei gleichbleibender Größe, reduzieren, wenn das Bild für Web optimiert wird!
Um das einzudämmen nutzt Du idealer Weise immer das Minimum an Dateigröße. Im Umkehrschluss zu meiner Erklärung legst Du das Bild auch nur in der Größe auf dem Server ab, in der es später angezeigt wird.
Kommt darauf an, wie du das meinst!
Siehe meinen Hinweis dazu zum 1. Quote.
"Professionell" ist es zudem direkt ein adaptive, responsive oder fluid Design zu erstellen. Dabei passt sich der Inhalt (= Content) der Anzeigengröße des Endgerätes an.
In dem Fall stellst Du das Bild in der maximal notwenigen Größe bereit und am Endgerät wird es in die machbare Größe skaliert bzw. prozentual angepasst.
Wobei bei adaptive die Bilder "springen", während sie bei responsive sich jeweils "flüssig" skalieren ohne erkennbare Übergänge.
Warum nicht mehrere Größen, die je nach Fenstergröße ausgewählt werden?
Siehe mein 1. Quote!!!
