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,688]

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 647]

.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 130]

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,688]

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 647]

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 130]

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,688]

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,688]

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,688]

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 1]

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 115]

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 115]

Rectification : Webp are not implemented by Apple.

[kgtee 52]

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.