Journal3, Webp no support in Safari and LSCache

AndreyPopov · Oct 14, 2020

for each of these views

Journal provide jpg/png images for Safari and webp images for Chrome

original jpg/png placed in image/catalog (no webp original images)
Journal make image cache for each image and convert images by itself inside library to webp format

image/cache/catalog

image-906.jpg
image-1812.jpg
image-3624.jpg
image-906.jpg.webp
image-1812.jpg.webp
image-3624.jpg.webp

undestand?

serpent_driver · Oct 14, 2020

To prevent missunderstanding:
1.) Is this image processing a pure PHP function or a combination PHP/Javascript?
2.) Does it work if Javascript is off?

AndreyPopov · Oct 14, 2020

serpent_driver said:

1) I don't know
2) I don't know

not make deep investigation.
system/library/journal3/utils/img.php

serpent_driver · Oct 14, 2020

If you want to get help, you must provide with this information. This single PHP file doesn't help to get answers.

MaximumTime · Nov 28, 2023

To configure LiteSpeed Cache for webp vs non-webp images, is the right way to configure the setting "Rebuild Cache for specific devices/browsers"?

If so, this is what I have added just for Chrome. How do you determine which user agents to use?

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/119.0.6045.169 Mobile/15E148 Safari/604.1
Mozilla/5.0 (iPad; CPU OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/119.0.6045.169 Mobile/15E148 Safari/604.1
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.163 Mobile Safari/537.36

MaximumTime · Nov 28, 2023

AndreyPopov said:

after three months LSCache work with Journal3 webp and non-webp. WOW!

also replace by myself Mobile_Detect algorithm to Journal3 based detection algorithm:

PHP:

    protected function checkMobile(){
     if (defined('JOURNAL3_ACTIVE')) {
         //error_log(print_r('Journal3 mobile detection algorithm used',true));
         if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== FALSE){
            return 'mobile';
        } elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== FALSE){
            return 'tablet';
        } elseif ( (strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== FALSE) && (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== FALSE) && (strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== FALSE) ){
            return 'mobile';
        } elseif ( (strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== FALSE) && (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== FALSE) && (strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') == FALSE) ){
            return 'tablet';
        } else {
            return false;
        }
     } else {
        include_once(DIR_SYSTEM . 'library/Mobile_Detect/Mobile_Detect.php');
        $detect = new Mobile_Detect();
        if($detect->isTablet()){
            return 'tablet';
        } else if($detect->isMobile()){
            return 'mobile';
        } else {
            return false;
        }
     }
    }

What is going on here?

AndreyPopov · Nov 28, 2023

MaximumTime said:

no. these settings only for crawler.

AndreyPopov · Nov 28, 2023

bad idea use Journal 3.2 because it's still in beta!

no support for product in beta.

I think you use Journal 3.2 because it in free access and not check license?

I'm not learn how Journal 3.2 detect webp or jpg/png images to provide, but Journal 3.1.x use detection of request header $_SERVER['HTTP_ACCEPT']: image/webp

if browser send $_SERVER['HTTP_ACCEPT']: image/webp header request then Journal provide webp images
if NO $_SERVER['HTTP_ACCEPT']: image/webp header request then Journal provide jpg/png images

all modern browsers support webp images but ....... exist some exceptions
- for example Safari not send in header image/webp and Journal provide jpg/png images
- even if you use Chrome 10x.x.x on MacOS prior to 16.x version - no webp images shown
- iPhoneOS support webp from 13.x version

I solve these (and many others) problems here
but I not tested on Journal 3.2

serpent_driver · Nov 28, 2023

Code:

$_SERVER['HTTP_ACCEPT']: image/webp

is the same as

Code:

$_SERVER['HTTP_ACCEPT']: */*

That's why all method using this way of detection are faulty.

AndreyPopov · Nov 28, 2023

serpent_driver said:

only you know what and how must be

serpent_driver · Nov 28, 2023

Of course! At least I developed a working solution.

AndreyPopov · Nov 28, 2023

serpent_driver said:

and where it work?

my solution tested and worked on real production environment!

serpent_driver · Nov 28, 2023

AndreyPopov said:

1 example of several.
https://www.wp.cachecrawler.com/

Free to download.
https://www.cachecrawler.com/WP-Plu...-Replacement-for-LiteSpeed-LScache::6574.html

AndreyPopov · Nov 28, 2023

serpent_driver said:

they use Opencart and Journal Theme?!?!?!?!?!

serpent_driver · Nov 28, 2023

There will not be a module for OC or Journal 3 because, on the one hand, an alternative cache plugin would be needed that would also overwrite the relevant functions in Journal. I can only imagine this as a custom solution.

MaximumTime · Nov 28, 2023

This extension may be of interest, as it preloads all webp images and no on-the-fly webp conversion is necessary: https://geekodev.com/opencart-modules/webp-image-converter-boost-your-page

+Supports Journal 3/3.2

What are your thoughts?

AndreyPopov · Nov 28, 2023

MaximumTime said:

for what? if Journal 3.x make same by itself!!!!

you load jpg/png images in Opencart admin dashboard, enabling in Journal 3 settings Perfomance - Image - Compression and Journal 3 in automatic mode convert all jpg/png images to webp.

serpent_driver · Nov 29, 2023

@AndreyPopov

You don't need an extension for OC because everything you need is already on your server. You also don't need a device detection to identify avif or webp support and you don't need cache varies either.

All you need is this:

Bash:

#!/bin/bash

# Path to image directory
upload_dir="[absolute_server_path_to_img_dir]"

# Quality level
quality="80"

# Find all .jpg files recursively in image direcory and subdirectories
find "$upload_dir" -type f -name "*.jpg" | while read -r file; do
  # Get filename with extension
  filename=$(basename "$file")
  filename_noext="${filename%.*}"

  # Destination directory for the converted image
  output_dir=$(dirname "$file")
 
  #Output the file name before conversion. Uncomment it if you want to see which image is converted.
  #echo "Convert: $filename"

  # Convert the original image to WebP format with quality level 80 and save it in the original directory
  /path_to_convert "$file" -quality "$quality" "$output_dir/$filename_noext.webp"
done

HTML:

<picture>
    <source width="" height="" srcset="https://www.domain.com/images/image.avif" type="image/avif">
    <source width="" height="" srcset="https://www.domain.com/images/image.webp" type="image/webp">
    <source width="" height="" srcset="https://www.domain.com/images/image.jpg" type="image/jpg">
    <img alt="">
</picture>

AndreyPopov · Nov 29, 2023

@serpent_driver Journal3 already made conversion.

Journal3 only detect for what browser provide webp and for what jpg/png

MaximumTime · Nov 29, 2023

AndreyPopov said:

Okay, but can it then be cached? That's my main goal webp + cache.

If I set LS cache with default varies and then add just two UAs to "Rebuild Cache for specific devices/browsers" then I get webp for Chrome inline with how Journal scans the header.

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.163 Mobile Safari/537.36

Also am no developer. Not sure how I would add the picture element to every place an images is.

Journal3, Webp no support in Safari and LSCache

Well-Known Member

Well-Known Member

Well-Known Member

Attachments

Well-Known Member

Member

Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Member

Well-Known Member

Well-Known Member

Well-Known Member

Member