Hi,
What is the best way to serve .webp images (for products and banners) for supported browsers and jpg images for all other browsers? All images saved in the same folder (detailed) in both .webp and .jpg formats.
thanks
1 Like
Hi,
What is the best way to serve .webp images (for products and banners) for supported browsers and jpg images for all other browsers? All images saved in the same folder (detailed) in both .webp and .jpg formats.
thanks
Hello,
Probably the best way to do this is by overriding the function fn_resize_image and fn_generate_thumbnail to fit your needs, this will make sure that all of your current images will be converted to .webp, though I do not know for now if we can do this with either Imagick or GD.
For others joining this topic, here is an explanation about webp:
WebP is a new format developed by google that has similar quality to the old but famous JPEG format but is at least twice as small in almost every situation, and since images most of the time take up 1/3 to 3/4 of our site it is good that we can minimize that again, so that our site is even faster!
EDIT:
After researching the image program in cs-cart I found out that this could be fixed by just updating the Imagine engine and adding the .webp extension in some core files. If you want to do this by yourself take a look overhere: https://github.com/avalanche123/Imagine/tree/develop/lib/Imagine
EDTI2:
I forgot to mention this in my previous edit, do mind that only 74% of the current webtrafick supports this extension, so please do not implement this if you need compatibility with internet explorer and edge.
Hello,
Probably the best way to do this is by overriding the function fn_resize_image and fn_generate_thumbnail to fit your needs, this will make sure that all of your current images will be converted to .webp, though I do not know for now if we can do this with either Imagick or GD.
I will give it a try. But the idea is not only to generate different formats but also serve appropriate one depending on the user browser.
That would be as follows:
webp for Chrome, Android, Opera
jxr for Edge and IE9
apng for Safari, Firefox
jpf for Safari
optimized jpg (via ShortPixel for example) for Firefox and all the others
I have tested with product image 1000 x 800 Original size in JPG prepared for web in Photoshop - 458 KB
Optimization results (No visual difference):
webp - 40 KB
jxr - 56 KB
jpf - 41KB
jpg (optimized with ShortPixel) - 87 KB
as you can see the results are fantastic for page load, perfect for SEO. Of course it depends on the original image but generally you can optimize original image minimum 3 times.
I personally think webp is the future standard for web images. According to google research already now it can be served to 65% of users (Chrome, Opera, Android). Also taking into account that webp is google product I assume Google Adword will give priority to this format as well, which means better ranking.
Now the question is how to implement this feature in the right way to CS CART (without CDN). Actually it would be nice to have it by default in CS CART.
One solution might be to use picturefill.js
and
Also could be a solution to prepare and upload all images (including thumbs) in different formats and configure server .htaccess file to serve proper image depending on the user browser. If you do not change product images very often that could be ok.
Another solution is to use http://cloudinary.com/CDN which will do all the job automaticly. They have free plan which could be suitable for small number of products. But as CS CART only support amazon CDN we need to use 3d party add on. (for example) http://marketplace.cs-cart.com/add-ons/site-management/content-delivery-network-cs-cart-addon.html?sl=en
would be good also to here CS CART team comments about this matter.
thanks
I will give it a try. But the idea is not only to generate different formats but also serve appropriate one depending on the user browser.
That would be as follows:
webp for Chrome, Android, Opera
jxr for Edge and IE9
apng for Safari, Firefox
jpf for Safari
optimized jpg (via ShortPixel for example) for Firefox and all the others
I have tested with product image 1000 x 800 Original size in JPG prepared for web in Photoshop - 458 KB
Optimization results (No visual difference):
webp - 40 KB
jxr - 56 KB
jpf - 41KB
jpg (optimized with ShortPixel) - 87 KB
as you can see the results are fantastic for page load, perfect for SEO. Of course it depends on the original image but generally you can optimize original image minimum 3 times.
I personally think webp is the future standard for web images. According to google research already now it can be served to 65% of users (Chrome, Opera, Android). Also taking into account that webp is google product I assume Google Adword will give priority to this format as well, which means better ranking.
Now the question is how to implement this feature in the right way to CS CART (without CDN). Actually it would be nice to have it by default in CS CART.
One solution might be to use picturefill.js
and
tags
Also could be a solution to prepare and upload all images (including thumbs) in different formats and configure server .htaccess file to serve proper image depending on the user browser. If you do not change product images very often that could be ok.
Another solution is to use http://cloudinary.com/CDN which will do all the job automaticly. They have free plan which could be suitable for small number of products. But as CS CART only support amazon CDN we need to use 3d party add on. (for example) http://marketplace.cs-cart.com/add-ons/site-management/content-delivery-network-cs-cart-addon.html?sl=en
would be good also to here CS CART team coments about this matter.
than
I use cart powers image optimizer addon with shortpixel and went from over 2gb of images to about 300mb. Site flies, no need for cdn with all the hassle and possible issues that gives.
Hello,
We have developed WebP Images add-on for CS-Cart. It converts store graphics (product photos, banners, logos, etc.) to WebP format. If the browser does not support WebP, the source images are shown.
does cs cart support .webp image uploading for products?
I tried to upload an image and it says “cannot upload files” I am using version 4.15.2
I wasn’t aware they added WEBP but you would think that if it can be converted to WEBP then you should also be able to upload WEBP.?
The WebP images are supported in the mentioned version of CS-Cart, in case the used version of Imagick/GD supports WebP, I just have checked this.
3 Likes