Images für diverse Viewports - warum nicht per Ajax?

Die W3 hat es leider versäumt Methoden zur automatische Wiedergabe von Images im richtigen Format zum Viewport so zu organisieren das es einfach möglich ist.

Man hat zwar nun den picture Tag formuliert ( http://www.w3.org/TR/html-picture-element/ ) aber die Browser setzen ihn noch nicht um.

Selbst der W3 Validator erkennt den Tag nur als Fehler.

Nun gibt es nicht immer die Möglichkeit ein Image via CSS als Background zum Viewport passend erscheinen zu lassen.

Da hilft eigentlich nur noch Javascript.

Und da gibt es eine Fülle von Ansätzen um das zu realisieren.

Diverse arbeiten eben mit dem picture Tag und machen ihn per Javascript möglich.

Eine andere Methode ist es alle Images via Ajax zu laden.

Das ist einfach, wenn man Jquery verwendet.

Das auslösende Javascript sieht so aus:

var interval;

var width;

var resize_on_fly = true;

$(document).ready(function() {

    $('.js_show').show();


    resize_images();


    if (resize_on_fly) {
        $(window).resize(function() {

            if (!interval) {

                interval = setInterval(check_width, 500);
            }
        });
    }
});

function check_width() {
    if (width != $(window).width()) {
        width = $(window).width();
        resize_images();
    } else {
        clearInterval(interval);
        interval = null;
    }
}


function resize_images() {
    $('img.resize').each(function() {
        var _image = $(this);
        $.ajax({
            type: "POST",
            url: "resize.php",
         
            success: function(msg) {
                var json = $.parseJSON(msg);
                _image.attr('src', json.image);
                _image.height(json.height);
                _image.width(json.width);
                _image.removeClass('loading_image');
            }
        });
    });
}

Die Auswahl des Images übernimmt hier ein PHP Script mit dem Namen resize.php

Das ist individuell angepasst - aber leicht änderbar:

$post = filter_var_array($_POST, FILTER_SANITIZE_ENCODED);

$vp=$post['width'];

$image=$post['image'];

$nimg = "images/$image";

if ($vp > 1679 && $vp < 2560)

    $nimg = "convert/_900_$image";

elseif ($vp > 1439 && $vp < 1680)

    $nimg = "convert/_750_$image";

elseif ($vp > 1023 && $vp < 1440)

    $nimg = "convert/_650_$image";

elseif ($vp > 766 && $vp < 1024)

    $nimg = "convert/_400_$image";

elseif ($vp > 479 && $vp < 767)

    $nimg = "convert/_350_$image";

elseif ($vp > 199 && $vp < 480)

    $nimg = "convert/_200_$image";

$size = getimagesize($nimg);

echo json_encode(array('image'=>$nimg,'width'=>$size[0],'height'=>$size[1]));

?>

Es gibt den Namen des einzusetzenden Images zurück aber auch  dessen Height und Width - diese Informationen sind im Json - Format verpackt.

Resize.php erhält mit der Javascript - Zeile

data: "width=" + $(window).width() + "&image=" + _image.attr('rel'),

den Viewport (im PHP Script vp) und den Image - Namen.
Das PHP Script senden den tatsächlichen Imagenamen und die realen Werte für width und height zurück.

Bei Erfolg  des Ajax - Aufrufes setzt das Javascript die Werte für scr neu wie auch über eine Style - Anweisung die Werte für width und height.

Die Einbindung eines Images im HTML ist einfach:

< img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" width="1" height="1" class="resize js_show loading_image" rel="tasten.png" alt="Tastenimage" / >

Hinweis: Der img Tag wurde hier getrennt wegen der hier möglichen Darstellung.


Es wird ein kleiner Platzhalter als base64 Image eingesetzt (um ein Request zu vermeiden) und es wird width und height mit 1 definiert - damit die Browser diesen Imagetag bereits rendern können.
Der eigentliche Imagename steht als Wert im rel.

Alle zu verwendende Images sind bereits beim Upload in die gewünschten Größen konvertiert und liegen daher vor.

Da der Imagetag relativ lang ist wird er real über eine Mini - PHP Funktion realisiert um einem das unnötige Geschreibsel zu ersparen.

Ein Ajaxaufruf dauert je nach Server und Verbindung zwischen 20 und 60 ms.
Da es praktisch normale Imageaufrufe sind werden die Images vom Browser gecacht - wenn man die htaccess  des Servers entsprechend konfiguriert hat.

Es gibt im Netz auch Scripte die ähnlich arbeiten aber über resize.php tatsächlich auch ein physikalisches resizen der Images vornehmen  - davor möchte ich warnen  - bei einem Erstaufruf dauert das sehr lange , blockiert den Server und den dort zur Verfügung stehenden RAM - Speicher.
Es erscheint im ersten Moment bequemer weil man sich die Konvertierung in die verschiedenen Formate spart - aber das wird zu teuer bezahlt.

Konvertiert man das gleich im Rahmen der Uploadmechanik automatisch hat man keinen negativen Einfluss.
Wir verwenden übrigens dazu Imagemagick als Programm über Kommandozeile (angestossen über PHP)  und schärfen die Images auch noch gleichzeitig.