Well, more of a hack actually so maybe not a good idea to push into the codebase, but this is the code:
Override with this method:
protected function processImage($sourceFile, $sourceFileName)
{
$imageSize = getimagesize($sourceFile);
if (! $imageSize) {
throw new PrestaShopException($this->l("Failed to resolve image size"));
}
$mimeType = strtolower(substr(strrchr($imageSize['mime'], '/'), 1));
if (! in_array($mimeType, static::ALLOWED_EXTENSIONS)) {
throw new PrestaShopException(sprintf($this->l("Unsupported mime type %s"), $mimeType));
}
// resize file to target destination
$filename = md5(microtime()) . '_' . preg_replace('/[^a-zA-Z0-9._-]/', '', $sourceFileName);
$filenameSmall = preg_replace('/(\.jpg)$/', 'small$1', $filename);
$filenameWebp = preg_replace('/\.jpg$/', '.webp', $filename);
$filenameWebpSmall = preg_replace('/\.jpg$/', '.webp', $filenameSmall);
$filepath = static::getImageDir() . $filename;
$filepathSmall = static::getImageDir() . $filenameSmall;
$filepathWebp = static::getImageDir() . $filenameWebp;
$filepathWebpSmall = static::getImageDir() . $filenameWebpSmall;
if ($imageSize[0] > 1000) {
$changeFactor = 0.5;
} else {
$changeFactor = 0.8;
}
if (! ImageManager::resize($sourceFile, $filepath, null, null, $mimeType)) {
throw new PrestaShopException($this->l('An error occurred during the image resizing'));
}
if (! ImageManager::resize($sourceFile, $filepathSmall, $imageSize[0]*$changeFactor, $imageSize[1]*$changeFactor, $mimeType)) {
throw new PrestaShopException($this->l('An error occurred during the image resizing'));
}
if (! ImageManager::resize($sourceFile, $filepathWebp, null, null, 'webp')) {
throw new PrestaShopException($this->l('An error occurred during the image resizing'));
}
if (! ImageManager::resize($sourceFile, $filepathWebpSmall, $imageSize[0]*$changeFactor, $imageSize[1]*$changeFactor, 'webp')) {
throw new PrestaShopException($this->l('An error occurred during the image resizing'));
}
return $filename;
}
And include this in the homeslider.tpl:
<picture>
{$imageUrl=$link->getMediaLink($slideImageUrl)|escape:'htmlall':'UTF-8'}
{$imageUrlsmall=preg_replace('/(\.jpg)$/', 'small$1', $imageUrl)}
{$filenameWebp = preg_replace('/\.jpg$/', '.webp', $imageUrl)}
{$filenameWebpSmall = preg_replace('/\.jpg$/', '.webp', $imageUrlsmall)}
<source media="(max-width: 600px)" srcset="{$filenameWebpSmall}" type="image/webp">
<source media="(min-width: 601px)" srcset="{$filenameWebp}" type="image/webp">
<source media="(max-width: 600px)" srcset="{$imageUrlsmall}" type="image/jpeg">
<source media="(min-width: 601px)" srcset="{$imageUrl}" type="image/jpeg">
<img class="img-responsive"
src="{$link->getMediaLink($slideImageUrl)|escape:'htmlall':'UTF-8'}"
alt="{$slide.legend|escape:'htmlall':'UTF-8'}"
{if isset($slide.size) && $slide.size} {$slide.size}{/if}
</picture>
Maybe someone can do a proper implementation with this as a base? (and of course don't forget to remove ImageMagic 🙂 )