Système Responsive pour les images

On entend parler de la BBC partout en ce moment. Ils ont fait une refonte de leur site mobile il y a quelque temps et c’était le parcours du combattant dont ils en parlent un peu ici et . Ils ont testé leurs nouveaux sites sur tout un tas de mobiles et de navigateurs. Je ne doute pas de la qualité de leur réalisation. Après tout, ils en ont les moyens.

Je me suis donc un peu intéressé à ce qu’ils faisaient et j’ai plus particulièrement regardé leur façon de faire avec les images.

Ils ont développé un système qui permet de réduire une photo uploadée par les auteurs des articles en 19 tailles étudiées de façon à convenir à toutes les tailles d’écran. C’est la partie la plus périlleuse mais si vous avez un gros sites et que le mobile est très important pour vous, vous devriez regarder cela d’un peu plus près. Outre la place que ça peut prendre sur le serveur, la solution marche relativement bien.

Voici le code html que j’ai utilisé pour la demo :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>LIJE & BBC ImageEnhancer</title>
    <style type="text/css">
    body {
        margin:0;
        padding:5px;
        text-align:center;
    }
    img {
        border:2px solid green;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="imageenhancer.js"></script>
</head>
<body>
    <div class="delayed-image-load" data-src="./images/200/_69492731_019074434-1.jpg"></div>
</body>
</html>

 

Le code Javascript ci-dessous, adapté par rapport à leur version, va parcourir le DOM de votre page à la recherche de div dont la class est delayed-image-load. Il va aussi déterminer la taille du navigateur et choisir la taille d’image la plus appropriée automatiquement. Enfin, il va transformer ce div en image.

$(document).ready(function() {
    var widths = [96, 130, 165, 200, 235, 270, 304, 340, 375, 410, 445, 485, 520, 555, 590, 625, 660, 695, 736];
    var isResizing = false;
    var imageReplaceNodelist = null;
    $('div.delayed-image-load').each(function(index, div) {
         div = (typeof div !== "number") ? div : index;
        $(div).replaceWith('<img src="data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7" datasrc="' + div.getAttribute('data-src') + '" class="image-replace" alt="" />');
    });

    var imageReplaceNodelist = $('.image-replace');

    function imageEnhance() {
        if (!isResizing) {
            isResizing = true;

            if (imageReplaceNodelist !== null) {
                for(var z = 0, len = imageReplaceNodelist.length; z < len; z++) {
                    if (imageReplaceNodelist[z].getAttribute('class').match('no-replace')) {
                        continue;
                    }
                    var newImgSrc = calcImgSrc(
                        (imageReplaceNodelist[z].getAttribute('datasrc') || imageReplaceNodelist[z].src),
                        $('body').width() // taille du contenu pour connaitre la width max de l'image à livrer
                    );
                    if (!!newImgSrc) {
                        imageReplaceNodelist[z].src = newImgSrc;
                    }
                }
            }
            isResizing = false;
        }
    }
    imageEnhance();

    function calcImgSrc(imgSrc, width) {
        if (imgSrc === null) { alert(imgSrc); return false; }
        var regex = imgSrc.match(/\/images\/(ws\/)?(\d*)/) || imgSrc;
        if (regex === null || typeof regex === 'string') { return false; }
        var widthMatchStart = imgSrc.indexOf(regex[2]),
            widthMatchEnd = regex[2].length;
        return imgSrc.substr(0, widthMatchStart) + matchBestWidth(width) + imgSrc.substr(widthMatchStart+widthMatchEnd);
    }

    function matchBestWidth(width) {
        var prevWidth = widths[0];
        for(var z = 0, len = widths.length; z < len; z++) {
            if (width < widths[z]) {
                return prevWidth;
            }
            prevWidth = widths[z];
        }
        return prevWidth;
    }

    $(window).on('resize', function() { imageEnhance(); });
});

 

Voici l’archive de mon test. Bon test.

Récupérer le nombre de pages indexées avec Google Drive (Spreadsheet)
Memo GIT en ligne de commande

2 Comments on “Système Responsive pour les images”

  1. Bonjour et merci pour toutes vos sources d’informations.

    J’ai deux questions :

    1) Est-ce utile sur Prestashop ?
    2) Si oui, sur quelle(s) page(s) doit-on intégrer ce code ?

    Merci d’avance.

    1. Bonjour,
      Difficile à dire comme ça. Dans Prestashop > Préférences > images, vous pouvez définir des tailles d’images.
      Le système les créera de lui même lors de chaque upload. Je présume que ce script devra être un peu adapté avant de pouvoir être utilisé.
      N’hésitez pas à revenir me dire si cela fonctionne ;)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *