Page 1 of 1

[SOLVED] - WebP support

Posted: Tue Feb 26, 2019 12:52 pm
by anas_daved
OK guys,
I found a way to save images in WebP format. I searched EVERYWHERE and could not find ANYTHING about this, so I had to do it by my self. I had to do this to improve the speed of my website. If you follow this method you will be able to save images as webP and serve them as such. This is verey early stage and rough, implement with caution.

Prerequisites:
-you need to be running on php 7.1
- you need to have ImageMagic installed on your server.
- you need to have opencart 3.0(not required, but this is my version so I dont know about other versions).

The How:
- find this line in filemanager.php:

Code: Select all

// Get files
            $files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE);
and change it to :

Code: Select all

// Get files
$files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF,svg,SVG,webp}', GLOB_BRACE);
-find the code for upload() in filemanager.php and change this

Code: Select all

 if (!$json) {
                    move_uploaded_file($file['tmp_name'], $directory . '/' . $filename);
                    }
to this :

Code: Select all

if (!$json) {
                    move_uploaded_file($file['tmp_name'], $directory . '/' . $filename);
                    $dir = 'image/catalog/products/' .$target_file .'/'.$filename;
                    $im = new Imagick($dir);
                    $im->writeImage(substr_replace($dir , 'webp', strrpos($dir , '.') +1));
                    unlink($dir);
                }
- find the save() method in system/library/image.php and cahnge this :

Code: Select all

elseif ($extension == 'png') {
				imagepng($this->image, $file);
			} elseif ($extension == 'gif') {
				imagegif($this->image, $file);
			}
			imagedestroy($this->image);
to this :

Code: Select all

elseif ($extension == 'png') {
				imagepng($this->image, $file);
			} elseif ($extension == 'gif') {
				imagegif($this->image, $file);
			}elseif ($extension == 'webp') {
                            
                            imagewebp($this->image, $file);
			}

			imagedestroy($this->image);
Conclusion:

That's it, I changed these lines and now every save to the website will save into webP. Please be careful when applying this, we need more developers to try this out and tweak it before it is safe for everyone. Also, be sure to clear your cache and browser cache and every other place that an image could be cashed it before saying that it did not work for you.

Let me know if this works for you or if it works for other versions.

Cheers.

Re: WebP support

Posted: Sat Mar 02, 2019 8:57 pm
by straightlight
An additional validation can be found here as for PHP v7.1.0: viewtopic.php?f=110&t=143082#p748232 .

Note: Not a replacement solution, simply an addition to it.

Re: WebP support

Posted: Sun Mar 03, 2019 1:44 pm
by anas_daved
straightlight wrote:
Sat Mar 02, 2019 8:57 pm
An additional validation can be found here as for PHP v7.1.0: viewtopic.php?f=110&t=143082#p748232 .

Note: Not a replacement solution, simply an addition to it.
Excellent catch, great addition. Thank you for enhancing this. I'll update the extension I did on this.

Re: WebP support

Posted: Tue Sep 24, 2019 10:58 pm
by haxcop
I have a question:

I see this xml file uploaded by @anas_dawood works pretty well (Thanks) when uploading the files manually using the UI of OpenCart.
But when using an automated tool to import the catalog with images via URL or anything else it won't work, have someone already have a solution to iT?

Re: WebP support

Posted: Fri Nov 22, 2019 11:09 pm
by head_dunce
I am looking at doing it like this -
https://www.digitalocean.com/community/ ... ur-website
Not sure if it'll work, but if I create the cache folder to auto-generate the webp file and use Apache mod_rewite I don't think there will be any need to change the OC code.

Re: WebP support

Posted: Sat Nov 23, 2019 4:47 am
by head_dunce
Just tried what I previously posted and it works well. It draws the webp image when the image is loaded into the cache. If the webp image is there by the time the page is done being rendered, it gets swapped into the html.

I think I need to expand on this idea so that I can have something crawl all the pages and load all the images so that the webp thing can get all the images loaded. viewtopic.php?f=10&t=214913

Re: WebP support

Posted: Wed Nov 27, 2019 12:15 am
by agatha65
haxcop wrote:
Tue Sep 24, 2019 10:58 pm
I have a question:

I see this xml file uploaded by @anas_dawood works pretty well (Thanks) when uploading the files manually using the UI of OpenCart.
But when using an automated tool to import the catalog with images via URL or anything else it won't work, have someone already have a solution to iT?
Try this:
https://www.opencart.com/index.php?rout ... n_id=38025

Re: WebP support

Posted: Thu Mar 12, 2020 10:07 am
by Pavloved
agatha65 wrote:
Wed Nov 27, 2019 12:15 am
haxcop wrote:
Tue Sep 24, 2019 10:58 pm
I have a question:

I see this xml file uploaded by @anas_dawood works pretty well (Thanks) when uploading the files manually using the UI of OpenCart.
But when using an automated tool to import the catalog with images via URL or anything else it won't work, have someone already have a solution to iT?
Try this:
https://www.opencart.com/index.php?rout ... n_id=38025
Great job - I made small edits for ocstore 3 and everything immediately worked.... Thanks

Re: WebP support

Posted: Sat Jul 18, 2020 9:16 pm
by nightwing
Tested, however when you open the webp in a new tab, you get this:

Code: Select all

RIFFHí�WEBPVP8 <í�ð՝*€0>1ŠC¢!!!&ÓŠH@ M߁#1xG-îdK+ì÷÷ð´?Ù?üø½Æ>
û÷ßðÿß?½óÿOò½Åý\yîŸã¿ÄuÿÓþ£í«÷_îÿË~Aø‘×ñ?Ñ~Fûÿyoê?ãÿ»ÿÿŸý÷ÿÿÿ¯ºï?äªÿCÿ_÷ÿÿÿâÔòÍþè~ÿÿÿýþ7üãü÷÷òŸù¿Èÿÿ÷ø§þü¿õ>ò?ÇÿÓÿ£þ[ýwÿßÕ¿¿ÿÜÿ5þ“ÿGûOÿÿq_ëÿá˜ýäùYý«üÿü¯òŸèÿù}�ÿ2þÇÿ?ö“ÿ§ûOœßþ¾åëãÿå÷þ¡þ_þïúo÷¿ýþ2÷ÿ¬ÿeÿÿþoÙïõ_ö?û?Ö±ÿýÿ?ìCú÷ßúŸ´?ÿ¿Ú}�æÿ÷ÿËâøþ/ÿÿõ½À?îÿÿö¯õOõë=*ü÷÷ïòÿâmÁzoåÚ¿™ÿ‹þ/ÿ·ü¼¯ß¿×ÿ-äË°ÿöþÖ{ü§ïÇì¿Àþê’ýÉûßýÏ
Any thoughts?
agatha65 wrote:
Wed Nov 27, 2019 12:15 am
haxcop wrote:
Tue Sep 24, 2019 10:58 pm
I have a question:

I see this xml file uploaded by @anas_dawood works pretty well (Thanks) when uploading the files manually using the UI of OpenCart.
But when using an automated tool to import the catalog with images via URL or anything else it won't work, have someone already have a solution to iT?
Try this:
https://www.opencart.com/index.php?rout ... n_id=38025