webP support for Prestashop 1.7 – SEO

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.