webP support for Prestashop 1.7

Question

I use this code in .htaccess to serve webp file instead of .jpg and .png file when its supported by browser and webp file is available :

RewriteEngine on
<Files *.webp>
    Header set Vary "Accept-Encoding"
    AddType "image/webp" .webp
    AddEncoding webp .webp
</Files>
RewriteCond %{HTTP:Accept} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.*)$ $1.webp [L]

Usually it's work great but in prestashop 1.7 there is a lot of rewrite for images, to make url seo friendly, so my rewrite is ignored :

RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
Rewrite.....

I'm stuck here, I can't touch the prestashop rewrite because it's fully generated, I just can add rules at the end of the htaccess file. Do you have any idea ?

Answer 1

I tried https://addons.prestashop.com/fr/visuels-produits/27669-image-webp-compression-regeneration.html works very well and a lot of usefull tools but will not convert every images easily

I finally use cloudflare with polish, wich manage all optimisations, webp included, in one click

Answer 2

I'm working on exactly the same problem at the moment.

I have a partial solution I can give, but it's a bit more complicated than just modifying the htaccess.

I overide the Link.php, to have my image urls in img.jpg.webp format

<?php

class Link extends LinkCore {

    
    protected $supportedBrowser = false;

    /**
     * Link constructor.
     *
     * @param null $protocolLink
     * @param null $protocolContent
     */
    public function __construct( $protocolLink = null, $protocolContent = null ) {
        parent::__construct( $protocolLink, $protocolContent );
        $this->supportedBrowser = $this->isSupportedBrowser();
    }

    /**
     * @param string $name
     * @param string $ids
     * @param null $type
     *
     * @return array|string|string[]
     */
    public function getImageLink( $name, $ids, $type = null ) {
        $parent = parent::getImageLink( $name, $ids, $type );
        if ( $this->supportedBrowser ) {
            return str_replace( '.jpg', '.jpg.webp', $parent );
        }

        return $parent;
    }

    /**
     * @param $name
     * @param $idCategory
     * @param null $type
     *
     * @return array|string|string[]
     */
    public function getCatImageLink( $name, $idCategory, $type = null ) {
        $parent = parent::getCatImageLink( $name, $idCategory, $type );
        if ( $this->supportedBrowser ) {
            return str_replace( '.jpg', '.jpg.webp', $parent );
        }

        return $parent;
    }

    /**
     * @param $idSupplier
     * @param null $type
     *
     * @return array|string|string[]
     */
    public function getSupplierImageLink( $idSupplier, $type = null ) {
        $parent = parent::getSupplierImageLink( $idSupplier, $type );
        if ( $this->supportedBrowser ) {
            return str_replace( '.jpg', '.jpg.webp', $parent );
        }

        return $parent;
    }

    /**
     * @param $name
     * @param $idStore
     * @param null $type
     *
     * @return array|string|string[]
     */
    public function getStoreImageLink( $name, $idStore, $type = null ) {
        $parent = parent::getStoreImageLink( $name, $idStore, $type );
        if ( $this->supportedBrowser ) {
            return str_replace( '.jpg', '.jpg.webp', $parent );
        }

        return $parent;
    }

    /**
     * @param $idManufacturer
     * @param null $type
     *
     * @return array|string|string[]
     */
    public function getManufacturerImageLink( $idManufacturer, $type = null ) {
        $parent = parent::getManufacturerImageLink( $idManufacturer, $type );
        if ( $this->supportedBrowser ) {
            return str_replace( '.jpg', '.jpg.webp', $parent );
        }

        return $parent;
    }

    /**
     * @return bool
     */
    public function isSupportedBrowser(): bool {
        return true === isset( $_SERVER['HTTP_ACCEPT'] ) && false !== strpos($_SERVER['HTTP_ACCEPT'], 'image/webp');
    }
}

I then wrote at the top of the htaccess this set of rules

#Generate webp support
RewriteRule . - [E=REWRITEBASE:/]

# Apache 2.2
<IfModule !mod_authz_core.c>
    <Files ~ "(?i)^.*\.(webp)$">
        Allow from all
    </Files>
</IfModule>
# Apache 2.4
<IfModule mod_authz_core.c>
    <Files ~ "(?i)^.*\.(webp)$">
        Require all granted
        allow from all
    </Files>
</IfModule>


<IfModule mod_setenvif.c>
SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>

<IfModule mod_headers.c>
Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
#Domain: localhost

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/c/$1$2.jpg.webp [L]

# Generate Webp support

You can use the hook actionHtaccessCreate in a module to write it automatically

The problem is that it does not handle the case where the corresponding webp image does not exist.

I continue my research on this rewriting of the htaccess.