WebP Images problem with Safari serving JPG

Please read carefully...

I have an extention that allows for WEBP.
It worked on all browsers pretty much except Safari, that of course is because Safari doesn't support WEBP.

The developer made Safari ignore the request for webp, and use .jpg, which worked on mobile phone and product pages, but one page it would not work on is the homepage on desktop Safari.

WEBP is well worth it it shrinks the website down 25% product pages and 30% on the homepage.
Which in reality results improves the speed about 10% on Desktop and if using a mobile phone with a bad connection upto 30%.
As well as a fairly nice SEO boost.

So the developer finally fixed that. Every page works, Chrome and supported browsers shows WEBP, and Safari showing .jpg on all pages.

However this fix leads to a new problem.

It makes the website go very slow.

So with the broken safari, the webp on a supported browser such as Chrome would increase the speed by about 10%
With the Safari fix to ignore the webp, it will make the website go 100% slower on all browsers, doubling the load speed. Not good.

The developer is unable to make it both go fast and to serve .jpg to Safari.

I am using latest Journal 3.037
And Opencart 3.0.3.2

Below is the code that I have currently, on the Extentions/Modifications page, this would be for the fixed Safari but slow load times, if needed I can paste the code for the fast load times but broken Safari... But I won't for now as this post is long enough already.

<?xml version="1.0" encoding="utf-8"?>
<modification>
<name>WebP Image Converter</name>
<code>wic</code>
<version>3.0</version>
<author>OCpedia.com</author>
<link>ocpedia.com</link>

<file path="catalog/model/tool/image.php">
<operation>
<search><![CDATA[ModelToolImage]]></search>
<add trim="true" position="after"><![CDATA[
public function webpSupport() {
if ($this->config->get('module_webp_status')) {
$webp = gd_info();

if (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Edge')) {
$status = false;
} elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Safari')) {
$status = false;
$files = array();
$files = array_merge($files, glob(DIR_CACHE . 'journal3.product.image*'));
$files = array_merge($files, glob(DIR_CACHE . 'journal3.products.*'));
$files = array_merge($files, glob(DIR_CACHE . 'journal3.settings.*'));
$files = array_merge($files, glob(DIR_CACHE . 'journal3.master_slider.*'));
if ($files) {
foreach ($files as $file) {
$time = substr(strrchr($file, '.'), 1);

if ($time < time()) {
if (file_exists($file)) {
unlink($file);
}
}
}
}
} elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'MSIE') || (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Trident/7'))) {
$status = false;
} else {
$status = false;
}

if (isset($this->request->server['HTTP_ACCEPT']) && strpos($this->request->server['HTTP_ACCEPT'], 'webp')) {
$status = true;
}

if ($webp['WebP Support'] && $status) {
return true;
} else {
return false;
}
}
return false;
}
]]></add>
</operation>
<operation>
<search><![CDATA[if ($this->request->server['HTTPS']) {]]></search>
<add trim="true" position="before"><![CDATA[
$image_webp = false;
$webp_support = $this->webpSupport();
if ($webp_support && strtolower($extension) != 'gif') {
$image_webp = 'cache/webp/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . (int)$width . 'x' . (int)$height . $type . '.webp';
if (!is_file(DIR_IMAGE . $image_webp) || (filemtime(DIR_IMAGE . $image_new) > filemtime(DIR_IMAGE . $image_webp))) {
$path = '';
$directories = explode('/', dirname($image_webp));
foreach ($directories as $directory) {
$path = $path . '/' . $directory;
if (!is_dir(DIR_IMAGE . $path)) {
@mkdir(DIR_IMAGE . $path, 0777);
}
}
if (strtolower($extension) == 'jpg' || strtolower($extension) == 'jpeg') {
$image_default = imagecreatefromjpeg(DIR_IMAGE . $image_new);
}
elseif (strtolower($extension) == 'png') {
$image_default = imagecreatefrompng(DIR_IMAGE . $image_new);
}
imagewebp($image_default, DIR_IMAGE . $image_webp, ($this->config->get('module_webp_quality') ? $this->config->get('module_webp_quality') : 80));
imagedestroy($image_default);
if (filesize(DIR_IMAGE . $image_webp) % 2 == 1) {
file_put_contents(DIR_IMAGE . $image_webp, "\0", FILE_APPEND);
}
}
}

]]></add>
</operation>
<operation>
<search><![CDATA['image/' . $image_new;]]></search>
<add trim="true" position="replace"><![CDATA[
'image/' . ($image_webp ? $image_webp : $image_new);
]]></add>
</operation>
</file>
</modification>

You are using one of the worst OpenCart web themes. Do you have the same issue when using the OpenCart default theme, or any standard-compliant theme?
Also, since WebP is a 3rd party commercial extension, have you been in touch with the authors of it?

I'm only using Opencart because of Journal theme, I would say it's one of the best themes, although comments like that are off topic especially since you provided no explanation, just an opinion....
And if you're refering to compatability, all third party themes have compatability issues with extentions. So that wouldn't be a good excuse either.

The extention I am using is specificly for Journal, so it would not work on other themes or default store.

I mentioned numberous times about the developer trying to fix the issues, I started my post saying please read carefully.
So of course I've been in contact with the developer, you didn't read carefully at all.

As regards web themes: See this forum thread.
Either way, since both Journal3 and WebP are commercial extensions, you can't expect free support because others don't necessarily use these extensions. Perhaps you best bet is to find a developer in the commercial support forum section. In general, merely excluding Safari from the WebP optimization shouldn't slow your site down for other browsers, rather, the only side effect should be that for Safari it runs at the original OpenCart speeds. Without someone digging deeper into your extension it won't be possible to find the issue.

Well I wasn't asking for paid or free support specifically, if people have a solution for free that's ideal, if they want me to pay, that's another option.

Yes, exactly what I said to the developer.

All he needs to do is tell the extention to work as it is, but not function on Safari. I don't see how that makes the extention go from super fast to super slow on every other browser.

deleting your journal caches on every "safari" request to "fix" a webp issue and you wonder why it becomes slow, wonderful coding.

I told the developer the cache had nothing to do with the problem, i guess he continued to not listen to me and make cache related changes anyway.

All he needs to do is tell the extention to NOT send WEBP images to Safari, only use WEBP for supported browsers...
Let me post the version of the code that worked fine on supported browers, but had the safari issue. (Forcing Safari to show WEBP, when Safari doesn't support webp, meaning no images.)

<?xml version="1.0" encoding="utf-8"?>
<modification>
<name>WebP Image Converter</name>
<code>wic</code>
<version>3.0</version>
<author>OCpedia.com</author>
<link>ocpedia.com</link>

<file path="catalog/model/tool/image.php">
<operation>
<search><![CDATA[ModelToolImage]]></search>
<add trim="true" position="after"><![CDATA[
public function webpSupport() {
if ($this->config->get('module_webp_status')) {
$webp = gd_info();

if (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Opera') || (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'OPR/'))) $browser_support = true;
elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Edge')) $browser_support = false;
elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Chrome')) $browser_support = true;
elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Safari')) $browser_support = false;
elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Firefox')) $browser_support = true;
elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'MSIE') || (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Trident/7'))) $browser_support = false;
else $browser_support = false;

if ($webp['WebP Support'] && ((isset($this->request->server['HTTP_ACCEPT']) && strpos($this->request->server['HTTP_ACCEPT'], 'webp')) || $browser_support)) {
return true;
} else {
return false;
}
}
return false;
}
]]></add>
</operation>
<operation>
<search><![CDATA[$image_new = str_replace(' ', '%20', $image_new);]]></search>
<add trim="true" position="before"><![CDATA[
$image_webp = false;
$webp_support = $this->webpSupport();
if ($webp_support && strtolower($extension) != 'gif') {
$image_webp = 'cache/webp/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . (int)$width . 'x' . (int)$height . $type . '.webp';
if (!is_file(DIR_IMAGE . $image_webp) || (filemtime(DIR_IMAGE . $image_new) > filemtime(DIR_IMAGE . $image_webp))) {
$path = '';
$directories = explode('/', dirname($image_webp));
foreach ($directories as $directory) {
$path = $path . '/' . $directory;
if (!is_dir(DIR_IMAGE . $path)) {
@mkdir(DIR_IMAGE . $path, 0777);
}
}
if (strtolower($extension) == 'jpg' || strtolower($extension) == 'jpeg') {
$image_default = imagecreatefromjpeg(DIR_IMAGE . $image_new);
}
elseif (strtolower($extension) == 'png') {
$image_default = imagecreatefrompng(DIR_IMAGE . $image_new);
}
imagewebp($image_default, DIR_IMAGE . $image_webp, ($this->config->get('module_webp_quality') ? $this->config->get('module_webp_quality') : 80));
imagedestroy($image_default);
if (filesize(DIR_IMAGE . $image_webp) % 2 == 1) {
file_put_contents(DIR_IMAGE . $image_webp, "\0", FILE_APPEND);
}
}
}
]]></add>
</operation>
<operation>
<search><![CDATA[$image_new = str_replace(' ', '%20', $image_new);
]]></search>
<add trim="true" position="after"><![CDATA[
if ($image_webp) $image_new = $image_webp;
]]></add>
</operation>
</file>
</modification>

first of all, you do not determine webp support via the user agent.
Every browser sends a header which indicates if they accept webp images.


second, I do not know how journal caches pages but if they cannot handle changes and merely page cache the whole lot then it is a journal caching issue.
In that case they should not simply delete the caches when a safari request comes along but alter the cached pages before they are send out.
They could do this by testing for webp support in the response class and if it is supported, change all eligible product image filenames in that cached html file from .jpg to .webp and visa versa if webp is not supported.

In the image class you would only make sure you create the webp images along with the jpg images at all times, regardless of support.

this is how you test webp support from the browser:

I found a guy to make me a new extention, which works.