Serve images in next-gen formats

[CartDesign 1]

Hi

I am testing my online shop in the new version of Page Speed Insight and I have a question for you.
How to solve the problem: Serve images in next-gen formats.
I read that the best format is webp. How to convert images in oscommerce (on the fly) to webp format?

[♥JcMagpie 1,692]

ask google?

https://developers.google.com/speed/webp/docs/precompiled

and

https://github.com/rosell-dk/webp-convert

Edited February 8, 2019 by JcMagpie

[MrPhil 648]

.webp is a new format (essentially a new compression method) for images. They will probably transfer a bit faster (being smaller), and most major browsers now support the format. Is it worth the effort to convert? Who knows. It may well suffer the same fate as JPEG-2000... improved compression that got little support.

When you say "convert on the fly", what exactly are you looking to do? You don't want to store your images as .png, .jpeg, etc. and then literally convert them as served to .webp -- that would slow things down considerably (the whole point of the exercise is to speed things up). You would want to use some utility to convert (in batch) your images to .webp, and then serve those like you currently serve other formats. Don't forget that anyone with older browsers (not Chrome, Edge, or Firefox current versions) is going to be left holding the bag when your site serves them .webp images that their browser can't handle. Are there any provisions in JS/CSS for selecting which type of image to call for?

[Hotclutch 187]

There's no "on the fly" script here, but you can use free online tools:

https://image.online-convert.com/convert-to-webp

 

[CartDesign 1]

MrPhil Below I will give you an ideal solution that would suit me.
To the function I pass the src of the image as well as the width and height. The function checks if the image named e.g. image-300x400.webp exists. If so, it returns a new src. If not, it converts the original to webp with appropriate dimensions. That's why I would need some kind of php class that converts to webp. I would do the rest

15 hours ago, Hotclutch said:

There's no "on the fly" script here, but you can use free online tools:

https://image.online-convert.com/convert-to-webp

 

This is a manual conversion tool. I want to automate all this.

 

17 hours ago, JcMagpie said:

ask google?

https://developers.google.com/speed/webp/docs/precompiled

and

https://github.com/rosell-dk/webp-convert

JcMagpie or does it require installation on the server?

[♥JcMagpie 1,692]

38 minutes ago, CartDesign said:

JcMagpie or does it require installation on the server?

The articles explain them themselves really,

The first is a exicutabe to run on your pc to do conversion.

The second is a PHP library . Which if used properly will do exactly what you asked for! convert and serve as required.

"This library enables you to do webp conversion with PHP using cwebp, gd, imagick, ewww cloud converter or the open source wpc cloud converter. It also allows you to try a whole stack – useful if you do not have control over the environment, and simply want the library to do everything it can to convert the image to webp.

In addition to converting, the library also has a method for serving converted images, and we have instructions here on how to set up a solution for automatically serving webp images to browsers that supports webp."

or simply use @Hotclutch convertor to do it online. Or use this simple batch convertor! it's free.

http://www.romeolight.com/products/webpconv/

[MrPhil 648]

9 hours ago, CartDesign said:

MrPhil Below I will give you an ideal solution that would suit me.
To the function I pass the src of the image as well as the width and height. The function checks if the image named e.g. image-300x400.webp exists. If so, it returns a new src. If not, it converts the original to webp with appropriate dimensions. That's why I would need some kind of php class that converts to webp. I would do the rest

To really convert on the fly, at each request from a browser, would be foolish. The added time to do the conversion would far outweigh any time savings in transmitting a smaller image file. You want to do it just once, preferably in batch, rather than as-needed (where you need to track which images have already been converted). Secondly, you need to know whether the customer's browser can handle .webp. That might be possible by querying the browser and release number, but offhand I can't tell you a good way to do that. If the Javascript (running on the browser) decides it's safe to ask for .webp, it might change the <img> src on the fly to ask for .webp instead of some other format. That will take additional time to do both tasks, so I'm not sure you end up with any net savings in time.

Notice that you have new PHP code running on both the server (if you do the conversion to .webp there, rather than on your PC), and JavaScript on the client (browser) to select which format to use and rewrite the <img> src. If you want to assume that everyone is running a fairly up-to-date browser (no one required to run IE6 any more!), you might serve only .webp, having done the conversion only once (on your PC). Of course, you still have to go through all the places where image URLs are stored on your site, and update them to .webp. In the end, is this worth the effort? Unless you can reduce image transmission time by 200 - 300% I don't think you're going to end up saving anything.

[CartDesign 1]

For example, I have a translucent banner measuring 1900 by 911 pixels. The image in png format is 577 kb, and in webp format is 128 kb. The banner consists of a slide show with three such images. On the banner alone I have a saving of over 1 MB.

The images would be generated only once. Then the script would only check if a given image size exists. 

For example, the latest products.

tep_image(DIR_WS_IMAGES . $products_new['products_image'], $products_new['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT)

Here it turns out that oscommerce also creates the miniatures of images. If only additional webp format creation is added to this function? Before displaying the path, you can check if the browser supports webp, for example, the following code:

if((isset($_SERVER['HTTP_ACCEPT']) === true) && (strstr($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false)){

Thanks to the above script can pass the path to jpg or webp.

I'm already writing the script myself. I need information from You where to find the file with the tep_image function.

 

 

Edited February 11, 2019 by CartDesign

[Hotclutch 187]

it's html_output.php in includes/functions/

tep_image does not resize images, it only adds width and height parameters to the image tag. It does not serve a scaled version of the image to the browser, which is the best way to do it.

[♥JcMagpie 1,692]

2 hours ago, CartDesign said:

The image in png format is 577 kb, and in webp format is 128 kb. The banner consists of a slide show with three such images. On the banner alone I have a saving of over 1 MB.

The image size issue is purly one of image conversion, PNG is lossless compression so image files will be big. Done corectly a jpg will provide a much smaller image size. It will never be as small as webp as that can give upto 85% smaller files than jpg. However it is more important is to provide the corect physical size image to each device as required by the browser. You can simply install this add-ons that will do this for you automatically. Others are available.

https://apps.oscommerce.com/8OSyE&amp;jcm-adaptive-images-addon-frozen

Please keep thread updated with the scripts progress as it would be intresting to see how it works and what difference it makes to a sites performance.

 

Edited February 11, 2019 by JcMagpie

[♥JcMagpie 1,692]

It's intresting that this format has been around for some time now but not got much traction?

http://php.net/manual/en/function.imagewebp.php

Also a simpler method to consider is to simply serve the .webp files using a mod_rewrite!

https://www.digitalocean.com/community/tutorials/how-to-create-and-serve-webp-images-to-speed-up-your-website

 

Edited February 11, 2019 by JcMagpie

[♥JcMagpie 1,692]

For those that wish to try and see what speed diferance is achived, simply take you existing image directory and use one of the conversion tools and convert all images to .webp. Make a new image directory to put these into and add the following redirect to your .htaccess file.

You should test this on a test site first. It basicly looks to see if a .webp image is available and if browser can use it then this is what is used first, if its not then the jpg or png is used instead.

Will be intresting what speed improvments are seen.

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

 

[CartDesign 1]

On 2/11/2019 at 10:12 AM, JcMagpie said:

Will be intresting what speed improvments are seen.

Browsers from Microsofft do not support webp files. And here with htaccess may be a problem. 

 

On 2/11/2019 at 9:20 AM, JcMagpie said:

The image size issue is purly one of image conversion, PNG is lossless compression so image files will be big. Done corectly a jpg will provide a much smaller image size. It will never be as small as webp as that can give upto 85% smaller files than jpg. However it is more important is to provide the corect physical size image to each device as required by the browser. You can simply install this add-ons that will do this for you automatically. Others are available.

https://apps.oscommerce.com/8OSyE&amp;jcm-adaptive-images-addon-frozen

Please keep thread updated with the scripts progress as it would be intresting to see how it works and what difference it makes to a sites performance.

 

I like your solution :). It's easier to rebuild a ready module than to write something from the beginning.

[toneus 2]

I had the same issue so came up with this solution:

https://toneus.co.uk/automagic-webp-images-for-oscommerce/

It puts a check in to see if the browser can accept webp and if it does create the image in webp format and save it, but only do this if it doesn't already exist. This way you can still have your jpg/png images in the OSC product info but serve webp where it is supported (and increase your ranging in the Page Speed index).

Hope this helps.

Edited August 14, 2019 by bonbec
Typo

[♥Gyakutsuki 150]

Webp are implemented by Apple. It's clear it not important to include this format inside a production website.
It's better to make a good optimization than to go on something can make some problems.

[♥Gyakutsuki 150]

Rectification : Webp are not implemented by Apple.

[kgtee 77]

On 8/14/2019 at 7:44 PM, toneus said:

I had the same  so came up with this solution:

https://toneus.co.uk/automagic-webp-images-for-oscommerce/

It puts a check in to see if the browser can accept webp and if it does create the image in webp format and save it, but only do this if it doesn't already exist. This way you can still have your jpg/png images in the OSC product info but serve webp where it is supported (and increase your ranging in the Page Speed index).

Hope this helps

Thanks! This works and it is wonderful to see the website browsing speed increase several folds. Webp format is definitely the way to go for websites laden with high res images.

[Denzel 127]

Got:

Warning: Use of undefined constant STORE_WEBP_IMAGE_STATUS - assumed 'STORE_WEBP_IMAGE_STATUS' (this will throw an Error in a future version of PHP) in /includes/modules/store/st_webp_image.php on line 67

on installscreen. And same Warning with "cannot modify header..." after installation.

Warning: Use of undefined constant STORE_WEBP_IMAGE_STATUS - assumed 'STORE_WEBP_IMAGE_STATUS' (this will throw an Error in a future version of PHP) in /includes/modules/store/st_webp_image.php on line 67

Warning: Cannot modify header information - headers already sent by (output started at /includes/modules/store/st_webp_image.php:67) in /admin/includes/functions/general.php on line 36

But works as expected after reload with phoenix 1.0.7.15. Do you support this @kgtee ? 

Edited February 12, 2021 by Denzel

[kgtee 77]

Hi @Denzel, the logical sequence to have the STORE_WEBP_IMAGE_STATUS defined first before the module executes was not done correctly in my previous upload. I will revise and upload a new module afterwards.

Please bear with my coding skill as I am an amateur, doing this for my shop and thinking my work may be helpful to others.  As you should notice all my postings in the app market are opened to all to edit and make improvements. You are encouraged to change them if you think necessary.

[Denzel 127]

vor 3 Stunden schrieb kgtee:

and thinking my work may be helpful to others

Thank you very much for this. I just don't want to step on someones feet. The webp support is a very powerfull feature and I wonder, why this is so unrecognized.

[Smaccting 0]

If you are using a CMS like WordPress you could install a plugin that converts all your images into webp automatically.

[Smaccting 0]

There's no easy way dude. changing each image by hand it's the best option. You just got to download all your images and convert them using an online tool and then re-upload them.

Edited May 18, 2021 by Smaccting