I need webp image on Opencart 3. It is possible? - image

Question

Is it possible to use webp images in opencart 3? I mean automatic generation.

Answer 1

Not all the browsers accept WEBP image format
but you can type a code to check if the browser accept WEBP format then you will have to make a new images cache and convert the existing images to webp
on the fir dir catalog/model/tool/image.php
add
$image_new_webp = 'cachewebp/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . (int)$width . 'x' . (int)$height . '.webp';
after this
$image_new = 'cache/'
to check if the browser accept image.webp and to create your new images cache
in the same file: catalog/model/tool/image.php
add this code:
$gd = gd_info();
if ($gd['WebP Support']) {
if (!is_file(DIR_IMAGE . $image_new_webp) || (filectime(DIR_IMAGE . $image_new) > filectime(DIR_IMAGE . $image_new_webp))) {
$path = '';
$directories = explode('/', dirname($image_new_webp));
foreach ($directories as $directory) {
$path = $path . '/' . $directory;
if (!is_dir(DIR_IMAGE . $path)) {
#mkdir(DIR_IMAGE . $path, 0777);
}
}
$image_webp = new Image(DIR_IMAGE . $image_old);
$image_webp->resize($width, $height);
$image_webp->save_webp(DIR_IMAGE . $image_new_webp);
}
}
before this line: $image_new = str_replace(
now you need a function to save the images in new format
on file dir: system/library/image.php
add this function:
public function save_webp($file, $quality = 90) {
if (is_resource($this->image)) {
imagewebp($this->image, $file, $quality);
imagedestroy($this->image);
}
}
before this line: public function save($file, $quality = 90) {
output the webp images format
add this function on file system/library/response.php
public function webpRebuild($output) {
$gd = gd_info();
if ($gd['WebP Support']) {
$uri = '';
if (isset($_SERVER['REQUEST_URI'])) {
$uri = $_SERVER['REQUEST_URI'];
}
if (stripos($uri, 'admin') === false) { // admin is your dashboard url if you have different name jst change it
if (isset($_SERVER['HTTP_ACCEPT']) && isset($_SERVER['HTTP_USER_AGENT'])) {
if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
$re = '/(cache)(.*)(\.jpg|\.png|.jpeg)/U';
$subst = '$1webp$2.webp';
$this->output = preg_replace($re, $subst, $this->output);
}
}
}
}
}
before this line: private function compress($data, $level = 0)
on the same file you have to output the webpRebuild function so add this code:
$this->webpRebuild($this->output);
after this line: $output = $this

Answer 2

Search the OpenCart extension marketplace for "webp":
https://www.opencart.com/index.php?route=marketplace/extension&filter_search=webp
Here are a couple, both free:
https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=36308
https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=34275

Answer 3

The best solution is at Design Cart. The extension generates additional webp images and displays them if the user's browser supports webp. Download.