Changeset 77043 in spip-zone

Timestamp:

Oct 7, 2013, 3:35:20 PM (8 years ago)

Author:

cedric@…

Message:

On laisse tomber la piste du conteneur svg qui ne fonctionne pas bien sur les iOS (non respect des proportions), et n'a finalement pas vraiment d'avantage par rapport aux simples backgrounds : si on affiche la page sans style on a pas les images.

On revient sur une stratégie plus simple :

• img qui contient un src fallback basse-def&basse-qualité en base64 (rendu visuel rapide)
• media-queries pour afficher à la place l'image de taille adaptée à l'écran : on prend en compte la taille de la fenetre et la resolution du peripherique

On a plus que 2 variantes de HTML, selectionnées selon User-agent : "desktop" pour l'image HD standard et "mobile" pour l'image chargée par media-queries.
Cependant, la version mobile est quasi fonctionnelle sous IE7+, il suffit de definir la constante _RESPIM_PRESERVE_IE7_COMPAT pour ne pas envoyer le fall-back en base64 et retablir la compat IE7 (au prix d'un hit de plus sur les cibles desktop ou mobile haute résolution).

On peut donc choisir d'envoyer le même HTML a tout le monde (si on veut utiliser un CDN ou proxy cache type Varnish) en sacrifiant la compat IE7 ou en acceptant un hit de plus sur l'image petit format pour les consultations depuis desktop

Cette solution (imparfaite) a l'avantage de conserver la balise <img> avec son alt, et d'afficher une image également en consultation sans style. Elle ne requiert pas JS (hormis support media-queries IE7/IE8 si on veut un HTML unique).

A continuer de tester, debug, il reste une passe d'optimisation a faire (regrouper les styles inline notamment), et voir la meilleure stratégie d'appel : affichage_final comme maintenant, ou filtre sur le seul bloc de contenu, ou autre...

Location:

_plugins_/respim/trunk

Files:

• paquet.xml (modified) (1 diff)
• respim_options.php (modified) (10 diffs)

_plugins_/respim/trunk/paquet.xml

@@ -2 +2 @@
         prefix="respim"
         categorie="multimedia"
-        version="0.1.0"
+        version="0.2.0"
         etat="dev"
         compatibilite="[3.0.12-dev;3.0.*]"

_plugins_/respim/trunk/respim_options.php

@@ -14 +14 @@
 
 /**
- * http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/
  *
  * @param array $rwd_images
@@ -27 +26 @@
  */
 function respim_embed($rwd_images, $width, $height, $alt="", $class="", $id=""){
-        $svg = <<<SVG
-<svg viewBox='0 0 $width $height' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg'>
-<title>$alt</title>
-<style>
-svg{background-size:100% 100%;background-repeat:no-repeat;}
-SVG;
 
         ksort($rwd_images);
+        $cid = "c".crc32(serialize($rwd_images));
+        $style =
+"img.$cid{opacity:0.01;filter:alpha(opacity=1);width:{$width}px;max-width:100%;height:auto;}
+b.$cid{background-size:100%;background-repeat:no-repeat;display:inline-block;max-width:100%}
+";
+
+        // image de fallback fournie ?
+        if (isset($rwd_images['fallback'])){
+                $fallback_file = $rwd_images['fallback'];
+                unset($rwd_images['fallback']);
+        }
+        // sinon on affiche la plus petite image
+        if (!$fallback_file)
+                $fallback_file = reset($rwd_images);
+        /* SI compat IE7 necessaire : pas de base64 dans le src, donc image externe avec un hit de plus... */
+        if (!defined('_RESPIM_PRESERVE_IE7_COMPAT'))
+                $fallback_file = filtre_embarque_fichier($fallback_file,"",32000);
+
         $prev_width = 0;
         $medias = array();
         foreach ($rwd_images as $w=>$file){
                 $mw = ($prev_width?"(min-width:{$prev_width}px)":"(max-width:{$w}px)");
-                $medias[$w] = "@media screen and $mw{svg{background-image:url($file);}}";
+                $mw20 = ($prev_width?"(min-width:".round($prev_width/2)."px)":"(max-width:".round($w/2)."px)");
+                $mw15 = ($prev_width?"(min-width:".round($prev_width/1.5)."px)":"(max-width:".round($w/1.5)."px)");
+                $medias[$w] = "@media screen and $mw,screen and (-webkit-min-device-pixel-ratio: 2) and $mw20,screen and (-webkit-min-device-pixel-ratio: 1.5) and $mw15,screen and (min--moz-device-pixel-ratio: 2) and $mw20,screen and (min--moz-device-pixel-ratio: 1.5) and $mw15{b.$cid{background-image:url($file);}}";
                 $prev_width = $w+1;
         }
-        $svg .= implode("\n",$medias);
-        $svg .= "
-  </style>
-</svg>";
-
-        // echapper le $svg
-        $svg = str_replace("\n","",$svg);
-        $svg = rawurlencode($svg);
+        $style .= "b.$cid{background-image:url($file);}";
+        $style .= implode("\n",$medias);
 
         if ($class) $class=" $class";
-        $class=" class=\"img responsive$class\"";
-        if ($alt) $alt=" aria-label=\"$alt\"";
+        $class=" class=\"responsive $cid$class\"";
+        if ($alt) $alt=" alt=\"$alt\"";
         if ($id) $id=" id=\"$id\"";
 
-        $out = "<object role=\"img\"$alt tab-index=\"0\"
-data=\"data:image/svg+xml,$svg\" type=\"image/svg+xml\"
-width=\"$width\" height=\"$height\" style=\"max-width: 100%;height:auto;\"
-$class$id></object>";
+        $out = "<b class=\"$cid\"><img
+$alt
+src=\"$fallback_file\"
+width=\"$width\" height=\"$height\"
+$class$id /></b>
+<style>$style</style>";
         return $out;
 }
@@ -67 +76 @@
  * @param string $target
  *   navigateur cible
- *   android2 => image petit format
- *   mobile => conteneur svg
+ *   mobile => <img> avec fallback base64 petite taille basse qualite et mediaquerie pour charger la "bonne" image
  *   dektop => image normale
  *   auto => determination en fonction du UA (oui c'est mal)
@@ -80 +88 @@
         if (!function_exists("image_reduire"))
                 include_spip("inc/filtres_images_mini");
+        if (!function_exists("image_aplatir"))
+                include_spip("filtres/images_transforme");
 
         list($h,$w) = taille_image($img);
@@ -85 +95 @@
 
         static $ua_target = null;
-        if (!in_array($target,array("android2","mobile","desktop"))){
+        if (!in_array($target,array("mobile","desktop"))){
                 if (is_null($ua_target)){
                         include_spip("lib/mobile_detect");
@@ -92 +102 @@
                         if ($detect->isMobile()){
                                 $ua_target = "mobile";
-                                if (strpos($_SERVER['HTTP_USER_AGENT'],"Android 2.")!==false)
-                                        $ua_target = "android2";
                         }
-                        if ($t = _request('var_respim'))
+                        if ($t = _request('var_respim') AND in_array($t,array("mobile","desktop")))
                                 $ua_target = $t;
                 }
@@ -114 +122 @@
                 return $img;
 
-        $images = array($w=>url_absolue($src));
+        $images = array($w=>$src);
         $src=preg_replace(',[?][0-9]+$,','',$src);
 
@@ -124 +132 @@
                 if ($wk>$w) break;
                 $i = image_reduire($img,$wk,10000);
-                // sur les android2 on renvoie les images dans le plus petit breakpoint
-                // (oui c'est arbitraire)
-                if ($target=="android2")
-                        return $i;
-                $images[$wk] = url_absolue(extraire_attribut($i,"src"));
+                $images[$wk] = extraire_attribut($i,"src");
+        }
+
+        if (function_exists("image_aplatir")){
+                // image de fallback : la plus petite en jpg compresse
+                $fallback = image_aplatir($images[reset($bkpt)],'jpg','ffffff',51);
+                $images["fallback"] = extraire_attribut($fallback,"src");
         }
 
@@ -143 +153 @@
 function respim_affichage_final($texte){
         if ($GLOBALS['html']){
+                #spip_timer();
                 $replace = array();
                 preg_match_all(",<img\s[^>]*>,Uims",$texte,$matches,PREG_SET_ORDER);
@@ -153 +164 @@
                 if (count($replace))
                         $texte = str_replace(array_keys($replace),array_values($replace),$texte);
+                #var_dump(spip_timer());
         }
         return $texte;