Antworten auf deine Fragen:
Neues Thema erstellen

Responsive Images

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 :)
 

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

Allwissendes Karmameerschweinchen!

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.

PHP:
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...
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben