Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Using Webp Images In Cs Cart Rate Topic   - - - - -

 
  • sok777
  • Senior Member
  • Members
  • Join Date: 23-Jun 11
  • 428 posts

Posted 13 April 2017 - 10:10 PM #1

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

 

 



 
  • poppedweb
  • Authorized Reseller
  • Members
  • Join Date: 02-Aug 16
  • 553 posts

Posted 14 April 2017 - 05:33 AM #2

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/a...op/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.


PoppedWeb | sales@poppedweb.com | https://poppedweb.com
TurnKey Website Design | Add-Ons | Performance Audits | Dedicated Server Management
24/7 Support | Response within an hour (during working hours).

 
  • sok777
  • Senior Member
  • Members
  • Join Date: 23-Jun 11
  • 428 posts

Posted 14 April 2017 - 11:05 AM #3

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 <picture> </picture> 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.c...ddon.html?sl=en

 

 

would be good also to here CS CART team comments about this matter.

 

thanks



 
  • Flow
  • Super Duper and Amazingly Sexy Senior
  • Members
  • Join Date: 13-Oct 10
  • 2381 posts

Posted 08 October 2017 - 06:19 AM #4

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 <picture> </picture> 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.c...ddon.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.


When life hands you lemons, bring on the Tequila baby!


 
  • Cart-Power
  • Senior Member
  • Authorized Reseller
  • Join Date: 12-May 14
  • 1650 posts

Posted 06 April 2020 - 06:26 AM #5

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.


Cart-Power.com / Cart-Power.ru (sales@cart-power.com) offers you:
CS-Cart add-ons :: CS-Cart themes :: CS-Cart development :: CS-Cart license
Работаем с англоязычными и русскоязычными клиентами (work with English-speaking and Russian-speaking customers)