Responsive Images

[Beutelratte]

Hallo Community,

es gibt ja nun schon die Möglichkeit die Ladezeiten einer Website (besonders mit vielen und auch großen Bildern) durch progressive Jpeg zu verkürzen. Allerdings such ich gerade nach einer Möglichkeit auch diese unterschiedlichen Auflösungen bei bestimmten Bildschirmbreiten anzusprechen.
Also, dass z.B. ab einer Breite von 400 Pixeln davon ausgegangen wird, dass Smartphones zur Betrachtung genutzt werden, weswegen die niedrigste Auflösung der Bilder geladen werden soll. Sobalder Bildschirm eine Breite von 780 oder 800 Pixeln hat, kann die volle Auflösung geladen werden.

Gibt es denn dazu schon eine Möglichkeit oder hat jemand schon einmal sowas umgesetzt?

Vielen Dank

 

[Dagobert68]

Moin Beutelratte,

ich bin irgendwann mal zufällig auf "Adaptive Images" gestoßen, hab's aber noch nicht selbst eingesetzt.

Vielleicht ist das ja was für dich:
http://adaptive-images.com/

Grüßli,
Tina

 

[afr0kalypse]

Das W3C hat da noch den picture Tag, der ist aber noch Work in Progress:

http://www.w3.org/TR/html-picture-element/

<picture width="500" height="500">
   <source media="(min-width: 45em)" src="large.jpg">
   <source media="(min-width: 18em)" src="med.jpg">
   <source src="small.jpg">
   <img src="small.jpg" alt="">
   <p>Accessible text</p>
</picture>

 

[Beutelratte]

TOP! Alle Lösungen sind konstruktiv und haben allesamt ihre Vor- und Nachteile. Eine Kombi aus Adaptive Images und dem Picture Tag wäre natürlich ideal - aber auch die TMA-Galerie sieht ganz vielversprechend aus. Vielen Dank für eure Antworten - ich werde sehen, was ich damit anfangen kann

 

[afr0kalypse]

Ich habe was ähnliches für Wordpress, vielleicht hilft dir das als Ansatz
Wordpress erzeugt automatisch beim Bilderupload mehrere Größen. Die Größen kann man auch vorher bestimmen. Ich habe jetzt 3 Größen: Skaliert auf 480px, 800px und Originalgröße. Die Erzeugten Dateien heißen dann immer 480-dateiname, 800-dateiname und dateiname
Die Wordpress Funktion the_post_thumbnail( 'thumbnail' ) liefert per default immer das kleinste Bild (480).

Nun frage ich per jQuery ab, welche Devicegröße gerade vorliegt und ändere das zu ladende Bild indem ich den <img> Tag bearbeite.

jQuery(document).ready(function($) {
        $('.wp-post-image').each(function(){
            imgsrc = this.src.split('/').pop().replace(/^\d+\-/, "");
            imgpath = this.src.substring(0,this.src.lastIndexOf('/') + 1);
            newsrc = "";
            console.log(imgpath);
            if (window.matchMedia("(max-width: 480px)").matches) {
                newsrc = "480-" + imgsrc;
            }
            else if (window.matchMedia("(min-width: 480px) and (max-width: 800px)").matches) {
                newsrc = "800-" + imgsrc;
            } else {
                newsrc = imgsrc;
            }
            $(this).attr("src", imgpath+newsrc)
        });
});

Das lässt sich auch ohne Wordpress mit ein wenig PHP realisieren

EDIT: Ist doch noch nicht so perfekt wie ich dachte :/ Leider werden die Thumbnails noch mit geladen. Also muss das Javascript vor dem Response bearbeitet werden...