Changeset 115788 in spip-zone


Ignore:
Timestamp:
Jun 26, 2019, 10:22:15 AM (7 months ago)
Author:
cedric@…
Message:

Mise a jour de la lib AdaptiveImage? : meilleure optimisation de la vignette (taille plus petite+filtre blur) et markup <picture> au lieu de <span> (sans modif de la technique)

Location:
_plugins_/adaptive_images/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/adaptive_images/trunk/adaptive_images_options.php

    r115787 r115788  
    7272                $AdaptiveImages->maxWidthMobileVersion = $v;
    7373
     74        // fine tuning : on genere une miniature toute petite en ameliorant un peu la qualite de sortie,
     75        // ce qui donne une taille beaucoup plus reduite
     76        $AdaptiveImages->maxWidthFallbackVersion = $AdaptiveImages->maxWidthMobileVersion / 4;
     77        $AdaptiveImages->lowsrcJpgQuality = min($AdaptiveImages->lowsrcJpgQuality + 30, 90);
     78
    7479        // on ne traite pas les images de largeur inferieure a min_width_1x px
    7580        if (isset($settings['min_width_1x']) AND $v=intval($settings['min_width_1x']))
  • _plugins_/adaptive_images/trunk/lib/AdaptiveImages/AdaptiveImages.js

    r80437 r115788  
    44}
    55(function (){
     6        // picture polyfill for browser not knowing it
     7        document.createElement('picture');
    68        function htmlAddClass(c){
    79                (function (H){
  • _plugins_/adaptive_images/trunk/lib/AdaptiveImages/AdaptiveImages.php

    r104338 r115788  
    33 * AdaptiveImages
    44 *
    5  * @version    1.7.2
    6  * @copyright  2013
     5 * @version    1.9.0
     6 * @copyright  2013-2019
    77 * @author     Nursit
    88 * @licence    GNU/GPL3
     
    3535         * @var int
    3636         */
    37         protected $lowsrcJpgQuality = 10;
     37        protected $lowsrcJpgQuality = 40;
    3838
    3939        /**
     
    8989         * @var int
    9090         */
    91         protected $maxWidthFallbackVersion = 640;
     91        protected $maxWidthFallbackVersion = 160;
    9292
    9393        /**
     
    316316
    317317                        // Common styles for all adaptive images during loading
    318                         $ins = "<style type='text/css'>"."img.adapt-img,.lazy img.adapt-img{opacity:0.70;max-width:100%;height:auto;}"
    319                         .".adapt-img-wrapper,.adapt-img-wrapper:after{display:inline-block;max-width:100%;position:relative;-webkit-background-size:100% auto;background-size:100% auto;background-repeat:no-repeat;line-height:1px;}"
     318                        $ins = "<style type='text/css'>"."img.adapt-img,.lazy img.adapt-img{opacity:0.70;filter:blur(5px);max-width:100%;height:auto;}"
     319                        .".adapt-img-wrapper,.adapt-img-wrapper:after{display:inline-block;max-width:100%;position:relative;-webkit-background-size:100% auto;;-webkit-background-size:cover;background-size:cover;background-repeat:no-repeat;line-height:1px;overflow:hidden}"
    320320                        ."html body .adapt-img-wrapper.lazy,html.lazy body .adapt-img-wrapper,html body .adapt-img-wrapper.lazy:after,html.lazy body .adapt-img-wrapper:after{background-image:none}"
    321321                        .".adapt-img-wrapper:after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\"}"
     
    328328                        // minified version of AdaptiveImages.js (using http://closure-compiler.appspot.com/home)
    329329                        $ins .= "<script type='text/javascript'>/*<![CDATA[*/var adaptImgDocLength=$length;adaptImgAsyncStyles=\"$async_style\";adaptImgLazy=".($this->lazyload?"true":"false").";".<<<JS
    330 function adaptImgFix(d){var e=window.getComputedStyle(d.parentNode).backgroundImage.replace(/\W?\)$/,"").replace(/^url\(\W?|/,"");d.src=e&&"none"!=e?e:d.src} (function(){function d(a){var b=document.documentElement;b.className=b.className+" "+a}function e(a){var b=window.onload;window.onload="function"!=typeof window.onload?a:function(){b&&b();a()}}adaptImgLazy&&d("lazy");/android 2[.]/i.test(navigator.userAgent.toLowerCase())&&d("android2");var c=!1;if("undefined"!==typeof window.performance)c=window.performance.timing,c=(c=~~(adaptImgDocLength/(c.responseEnd-c.connectStart)))&&50>c;else{var f=navigator.connection||navigator.mozConnection||navigator.webkitConnection; "undefined"!==typeof f&&(c=3==f.type||4==f.type||/^[23]g$/.test(f.type))}c&&d("aislow");var h=function(){var a=document.createElement("style");a.type="text/css";a.innerHTML=adaptImgAsyncStyles;var b=document.getElementsByTagName("style")[0];b.parentNode.insertBefore(a,b);window.matchMedia||window.onbeforeprint||g()};"undefined"!==typeof jQuery?jQuery(function(){jQuery(window).load(h)}):e(h);var g=function(){for(var a=document.getElementsByClassName("adapt-img"),b=0;b<a.length;b++)adaptImgFix(a[b])}; window.matchMedia&&window.matchMedia("print").addListener(function(a){g()});"undefined"!==typeof window.onbeforeprint&&(window.onbeforeprint=g)})();
     330function adaptImgFix(d){var e=window.getComputedStyle(d.parentNode).backgroundImage.replace(/\W?\)$/,"").replace(/^url\(\W?|/,"");d.src=e&&"none"!=e?e:d.src}(function(){function d(a){var b=document.documentElement;b.className=b.className+" "+a}function e(a){var b=window.onload;window.onload="function"!=typeof window.onload?a:function(){b&&b();a()}}document.createElement("picture");adaptImgLazy&&d("lazy");/android 2[.]/i.test(navigator.userAgent.toLowerCase())&&d("android2");var c=!1;if("undefined"!==typeof window.performance)c=window.performance.timing,c=(c=~~(adaptImgDocLength/(c.responseEnd-c.connectStart)))&&50>c;else{var f=navigator.connection||navigator.mozConnection||navigator.webkitConnection;"undefined"!==typeof f&&(c=3==f.type||4==f.type||/^[23]g$/.test(f.type))}c&&d("aislow");var h=function(){var a=document.createElement("style");a.type="text/css";a.innerHTML=adaptImgAsyncStyles;var b=document.getElementsByTagName("style")[0];b.parentNode.insertBefore(a,b);window.matchMedia||window.onbeforeprint||g()};"undefined"!==typeof jQuery?jQuery(function(){jQuery(window).load(h)}):e(h);var g=function(){for(var a=document.getElementsByClassName("adapt-img"),b=0;b<a.length;b++)adaptImgFix(a[b])};window.matchMedia&&window.matchMedia("print").addListener(function(a){g()});"undefined"!==typeof window.onbeforeprint&&(window.onbeforeprint=g)})();
    331331JS;
    332332                        $ins .= "/*]]>*/</script>\n";
     
    449449         * @param bool $force
    450450         *   true to force immediate image building if not existing or if too old
     451         * @param int $quality
     452         *   to set an output image quality outside the predefined preset
    451453         * @return string
    452454         *   name of image file
    453455         * @throws Exception
    454456         */
    455         protected function processBkptImage($src, $wkpt, $wx, $x, $extension, $force=false){
     457        protected function processBkptImage($src, $wkpt, $wx, $x, $extension, $force=false, $quality=null){
    456458                $dir_dest = $this->destDirectory."$wkpt/$x/";
    457459                $dest = $dir_dest . $this->adaptedSrcToURL($src);
     
    470472                        return $dest;
    471473
    472                 switch($x){
    473                         case '10x':
    474                                 $quality = $this->x10JpgQuality;
    475                                 break;
    476                         case '15x':
    477                                 $quality = $this->x15JpgQuality;
    478                                 break;
    479                         case '20x':
    480                                 $quality = $this->x20JpgQuality;
    481                                 break;
     474                if (is_null($quality)){
     475                        switch ($x) {
     476                                case '10x':
     477                                        $quality = $this->x10JpgQuality;
     478                                        break;
     479                                case '15x':
     480                                        $quality = $this->x15JpgQuality;
     481                                        break;
     482                                case '20x':
     483                                        $quality = $this->x20JpgQuality;
     484                                        break;
     485                        }
    482486                }
    483487
     
    643647                }
    644648
     649                $process_fallback = true;
     650                if ($wfallback > $this->maxWidthFallbackVersion) {
     651
     652                        $bigger_mistake = $h;
     653                        $best_width = $this->maxWidthFallbackVersion;
     654                        // optimise this $wfallback to avoid a too big rounding mistake in the height thumbnail resizing
     655                        foreach ([1,1.25,1.333,1.5,1.666,1.75,2] as $x) {
     656                                $wfallback = round($x * $this->maxWidthFallbackVersion);
     657                                list($fw,$fh) = $this->computeImageSize($w, $h, $wfallback,10000);
     658                                $mistake = abs(($h - ($fh * $w / $fw)) * $maxWidth1x / $w);
     659                                if ($mistake < $bigger_mistake) {
     660                                        $best_width = $wfallback;
     661                                        $bigger_mistake = $mistake;
     662                                        // if less than 1px of rounding mistake, let's take this size
     663                                        if ($mistake < 1) {
     664                                                break;
     665                                        }
     666                                }
     667                        }
     668                        $wfallback = $best_width;
     669
     670
     671                        $q = $this->lowsrcQualityOptimize($wfallback, $this->lowsrcJpgQuality, $w, $h, $maxWidth1x);
     672                        $fallback = $this->processBkptImage($is_mobile ? $srcMobile : $src, $wfallback, $wfallback, '10x', $extension, true, $q);
     673                        // if it's already a jpg nothing more to do here, otherwise double compress produce artefacts
     674                        if ($extension === 'jpg') {
     675                                $process_fallback = false;
     676                        }
     677                }
     678
    645679
    646680                // if $this->onDemandImages == true image has not been built yet
     
    651685                }
    652686
    653                 // $this->lowsrcJpgQuality give a base quality for a 450kpx image size
    654                 // quality is varying around this value (+/- 50%) depending of image pixel size
    655                 // in order to limit the weight of fallback (empirical rule)
    656                 $q = round($this->lowsrcJpgQuality-((min($maxWidth1x, $wfallback)*$h/$w*min($maxWidth1x, $wfallback))/75000-6));
    657                 $q = min($q, round($this->lowsrcJpgQuality)*1.5);
    658                 $q = max($q, round($this->lowsrcJpgQuality)*0.5);
    659                 $images["fallback"] = $this->img2JPG($fallback, $this->destDirectory."fallback/", $this->lowsrcJpgBgColor, $q);
     687                if ($process_fallback) {
     688                        $q = $this->lowsrcQualityOptimize($wfallback, $this->lowsrcJpgQuality, $w, $h, $maxWidth1x);
     689                        $images["fallback"] = $this->img2JPG($fallback, $this->destDirectory."fallback/", $this->lowsrcJpgBgColor, $q);
     690                }
     691                else {
     692                        $infos = $this->readSourceImage($fallback, $this->destDirectory."fallback/", 'jpg');
     693                        //if ($infos['creer']) {
     694                                @copy($fallback, $infos["fichier_dest"]);
     695                        //}
     696                        $images["fallback"] =  $infos["fichier_dest"];
     697                }
    660698
    661699                // limit $src image width to $maxWidth1x for old IE
     
    670708        }
    671709
     710        /**
     711         * Compute an "optimal" jpg quality for the fallback image
     712         * @param $width_fallback
     713         * @param $lowsrcBaseQuality
     714         * @param $width
     715         * @param $height
     716         * @param $maxWidth1x
     717         * @return float|mixed
     718         */
     719        function lowsrcQualityOptimize($width_fallback, $lowsrcBaseQuality, $width, $height, $maxWidth1x){
     720                // $this->lowsrcJpgQuality give a base quality for a 450kpx image size
     721                // quality is varying around this value (+/- 50%) depending of image pixel size
     722                // in order to limit the weight of fallback (empirical rule)
     723                $q = round($lowsrcBaseQuality-((min($maxWidth1x, $width_fallback)*$height/$width*min($maxWidth1x, $width_fallback))/75000-6));
     724                $q = min($q, round($this->lowsrcJpgQuality)*1.5);
     725                $q = max($q, round($this->lowsrcJpgQuality)*0.5);
     726
     727                return $q;
     728        }
    672729
    673730        /**
     
    768825
    769826                // markup can be adjusted in hook, depending on style and class
    770                 $markup = "<span class=\"adapt-img-wrapper $cid $extension\">$img</span>";
     827                $markup = "<picture class=\"adapt-img-wrapper $cid $extension\">$img</picture>";
    771828                $markup = $this->imgMarkupHook($markup,$originalClass,$originalStyle);
    772829
     
    827884         * Find and get attribute value in an HTML tag
    828885         * Regexp from function extraire_attribut() in
    829          * https://core.spip.net/projects/spip/repository/entry/spip/ecrire/inc/filtres.php#L2013
     886         * http://core.spip.org/projects/spip/repository/entry/spip/ecrire/inc/filtres.php#L2013
    830887         * @param $tag
    831888         *   html tag
     
    11071164        /**
    11081165         * Resize without bluring, and save image with needed quality if JPG image
    1109          * @author : Arno* from https://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive/action/image_responsive.php
     1166         * @author : Arno* from http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive/action/image_responsive.php
    11101167         *
    11111168         * @param string $source
     
    12231280
    12241281        /**
    1225          * @author : Arno* from https://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive/action/image_responsive.php
     1282         * @author : Arno* from http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive/action/image_responsive.php
    12261283         *
    12271284         * @param int $intOrig
     
    13461403                }
    13471404                else if ($ratioWidth < $ratioHeight) {
    1348                         $destWidth = intval(ceil($srcWidth/$ratioHeight));
     1405                        $destWidth = intval(round($srcWidth/$ratioHeight));
    13491406                        $destHeight = $maxHeight;
    13501407                }
    13511408                else {
    13521409                        $destWidth = $maxWidth;
    1353                         $destHeight = intval(ceil($srcHeight/$ratioWidth));
     1410                        $destHeight = intval(round($srcHeight/$ratioWidth));
    13541411                }
    13551412                return array ($destWidth, $destHeight);
     
    13801437                        case "jpg":
    13811438                        case "jpeg":
    1382                                 $ret = imagejpeg($img,$tmp,$quality);
     1439                                $ret = imagejpeg($img,$tmp,min($quality,100));
    13831440                                break;
    13841441                }
  • _plugins_/adaptive_images/trunk/lib/AdaptiveImages/README.md

    r104338 r115788  
    151151* Allow progressive rendering og PNG and GIF even without JS :
    152152  <pre>$AdaptiveImages->nojsPngGifProgressiveRendering = true;</pre>
     153* Max width for the JPG lowsrc fallback image (thumbnail preview)
     154  <pre>$AdaptiveImages->maxWidthFallbackVersion = 160;</pre>
    153155* JPG compression quality for JPG lowsrc
    154   <pre>$AdaptiveImages->lowsrcJpgQuality = 10;</pre>
     156  <pre>$AdaptiveImages->lowsrcJpgQuality = 40;</pre>
    155157* JPG compression quality for 1x JPG images
    156158  <pre>$AdaptiveImages->x10JpgQuality = 75;</pre>
     
    167169This library is already available through plugins in:
    168170
    169 * SPIP CMS <https://contrib.spip.net/Adaptive-Images-4458> [See the implementation](https://zone.spip.org/trac/spip-zone/browser/_plugins_/adaptive_images/trunk/adaptive_images_options.php)
     171* SPIP CMS <http://contrib.spip.net/Adaptive-Images-4458> [See the implementation](http://zone.spip.org/trac/spip-zone/browser/_plugins_/adaptive_images/trunk/adaptive_images_options.php)
    170172* DotClear blog engine <http://plugins.dotaddict.org/dc2/details/adaptiveImages>
  • _plugins_/adaptive_images/trunk/paquet.xml

    r106542 r115788  
    22        prefix="adaptive_images"
    33        categorie="multimedia"
    4         version="1.9.2"
     4        version="1.10.0"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.2.*]"
Note: See TracChangeset for help on using the changeset viewer.