Bitte mal testen: Automatische Bild-Skalierung mit adaptive images

faglork · 17. Juni 2015 11:10

Moinsen!

Ich habe
http://adaptive-images.com/
mal installiert und bräuchte ein paar Tester. Wenn das gut funktioniert, wäre es IMO eine super Lösung, vor allem weil es keinen Eingriff in das System erfordert und out-of-the-box läuft.

http://tinyurl.com/qytzev7

Bitte klickt euch mal durch ein paar Seiten. Wenn ihr mit der rechten Maustaste auf das Hintergrundbild klickt, im Firefox "Grafik Info" anklicken. Das Bild sollte in etwa in der Größe eurer Bildschirmbreite ausgeliefert werden.

Ein paar Rückmeldungen wären nett - wenns funzt kann man das ja weiterempfehlen, und es löst viele Probleme.

Servus,
Alex

NaN · 17. Juni 2015 12:09

Also bei mir scheint es zu funktionieren.
Die Bilder haben bei einer Bildschirmauflösung von 1680 x 1050 zwar alle eine Größe von 1600 x 1200, aber bei 1024 x 768 haben die Bilder exakt diese Maße.

faglork · 17. Juni 2015 12:17

NaN schrieb:

Also bei mir scheint es zu funktionieren.
Die Bilder haben bei einer Bildschirmauflösung von 1680 x 1050 zwar alle eine Größe von 1600 x 1200, aber bei 1024 x 768 haben die Bilder exakt diese Maße.

Ah, du warst das ;-)
Danke!

1600 ist der oberste Breakpoint, den ich angegeben habe. Die Originalbilder sind 2000x1500.

Das Programm nimmt eine Reihe von Breakpoints, skaliert die Bilder entsprechend, schärft sie nach und speichert sie in ein entsprechendes Verzeichnis. Nach kurzer Zeit sind dann alle benötigten Auflösungen vorhanden.

Servus,
Alex

Klenkes · 17. Juni 2015 13:40

Wird das irgendwie browserabhängig gesteuert?
In meinem Opera wird immer nur das 1600x1200px Bild angezeigt, egal ob maximiert 1680px oder verkleinert auf Smartphonegröße ca 320px.

faglork · 17. Juni 2015 14:40

Klenkes schrieb:

Wird das irgendwie browserabhängig gesteuert?
In meinem Opera wird immer nur das 1600x1200px Bild angezeigt, egal ob maximiert 1680px oder verkleinert auf Smartphonegröße ca 320px.

Ja. EDIT: Ähem, meinte natürlich nein. Bei 1680 wird der nächstliegende kleinere Breakpoint 1600 verwendet, und dies wird in einem Cookie gespeichert.
Wenn du dann verkleinerst auf 320, dann gilt immer noch das Cookie, und es wird das 1600er Bild verwendet, allerdings im Browser skaliert auf 320 (wenn du tatsächlich mit nem Smartphone draufgehst, kommt eh was anderes).

Das ist auch sinnvoll, sonst würden ja ständig Bilder nachgeladen wenn du die Orientierung änderst.

Siehe
http://adaptive-images.com/details.htm

Servus,
Alex

Beitrag geändert von faglork (17. Juni 2015 16:05)

NaN · 17. Juni 2015 15:42

Wird das irgendwie browserabhängig gesteuert?

Nee.
Es wird die tatsächliche Bildschirmauflösung genommen, nicht die Fenstergröße wink

Klenkes · 17. Juni 2015 18:17

NaN schrieb:

Wird das irgendwie browserabhängig gesteuert?
Nee.
Es wird die tatsächliche Bildschirmauflösung genommen, nicht die Fenstergröße

Verstehe! Device-Width also.

faglork · 18. Juni 2015 22:47

Klenkes schrieb:

NaN schrieb:
Wird das irgendwie browserabhängig gesteuert?
Nee.
Es wird die tatsächliche Bildschirmauflösung genommen, nicht die Fenstergröße
Verstehe! Device-Width also.

Hier klicken, um den Code zum Kopieren zu markieren

[== javascript ==]
<script>document.cookie='resolution='+Math.max(screen.width,
screen.height)+'; path=/';</script>

Servus,
Alex

faglork · 20. Juni 2015 16:44

Funzt IMO prima.

Ich habe das adaptive-images.php für meine Zwecke etwas verändert: ab 1600 Pixel Screen width wird das Originalbild ausgeliefert, aus, basta.

Zeile 145:

Hier klicken, um den Code zum Kopieren zu markieren

  if ($width <= $resolution) { // no, because the width of the source image is already less than the client width 
    return $source_file;
  }

ändern in

Hier klicken, um den Code zum Kopieren zu markieren

  if ($width <= $resolution || $resolution >= 1600) { // no, because the width of the source image is already less than the client width OR res is => 1600
    return $source_file;
  }

Mein spezielles Problem hier: das große Bild im Hintergrund. Das wird mit JPG-Qualität zwischen 0 - 20 gespeichert (so dass die Kompressions-Artefakte grad eben verschwinden), reicht für Hintergrund allemal aus.

Aaaaber: adaptive-images.php erzeugt die verschiedenen Auflösungen mit einer Qualität von 75 (ist einstellbar). Das ist in allen Fällen völlig ok, nur nicht bei Bildern mit extrem niedriger Qualität. In diesem speziellen Fall wird die Dateigröße der zb. auf 1600 Pixel verkleinerten Bilder GRÖßER als das Original mit 2000 Pixel.

Die Grenze liegt - in meinem Fall hier - bei ca. 1600 Pixel. Drunter passt dann wieder alles. Daher die Modifikation der php-Datei.

Servus,
Alex

Beitrag geändert von faglork (21. Juni 2015 12:13)

Forum für CMS/made simple

#1 17. Juni 2015 11:10

Bitte mal testen: Automatische Bild-Skalierung mit adaptive images

#2 17. Juni 2015 12:09

Re: Bitte mal testen: Automatische Bild-Skalierung mit adaptive images

#3 17. Juni 2015 12:17

Re: Bitte mal testen: Automatische Bild-Skalierung mit adaptive images

#4 17. Juni 2015 13:40

Re: Bitte mal testen: Automatische Bild-Skalierung mit adaptive images

#5 17. Juni 2015 14:40

Re: Bitte mal testen: Automatische Bild-Skalierung mit adaptive images

#6 17. Juni 2015 15:42

Re: Bitte mal testen: Automatische Bild-Skalierung mit adaptive images

#7 17. Juni 2015 18:17

Re: Bitte mal testen: Automatische Bild-Skalierung mit adaptive images

#8 18. Juni 2015 22:47

Re: Bitte mal testen: Automatische Bild-Skalierung mit adaptive images

#9 20. Juni 2015 16:44

Re: Bitte mal testen: Automatische Bild-Skalierung mit adaptive images

Fußzeile des Forums