All image extensions change to .webp

  • Posts: 332
  • Thank you received: 6
  • Hikaserial Subscription Hikashop Business
4 years 7 months ago #310232

-- url of the page with the problem -- : Multiple
-- HikaShop version -- : 4.2.1
-- Joomla version -- : 3.9.11
-- PHP version -- : 7.2 and 7.3
-- Browser(s) name and version -- : various all updated
-- Error-message(debug-mod must be tuned on) -- : No error message

I have migrated all websites from one server Centos 6.1 to a more powerful server running CentOS 7.6. However, all website using HikaShop, the product images are being served with the .webp extension even though the database shows .jpg / .png extensions. If I view the image in a separate tab, I get a 404 error but once I manually change the .webp to either .jpg or .png, the image pops right up.

Any idea why this is happening?

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
4 years 7 months ago #310238

Hi,

That's normal. We've added the support of webp images in the 4.1. That allows for a faster display of the pages for browser compatible with the webp format (most of them are).
If you get a 404 error on the webp images, that means that your server is configured to refuse the download of files with the extension webp (or it can be done via htaccess or a Joomla extension). So you would have to change that and allow for webp files.
Alternatively, you can add an entry with the namekey add_webp_images and the value 0 in the table hikashop_config via your phpmyadmin to deactivate the webp image support. That will prevent the error, but you'll loose the faster display of the pages.

Please Log in or Create an account to join the conversation.

  • Posts: 332
  • Thank you received: 6
  • Hikaserial Subscription Hikashop Business
4 years 7 months ago #310259

Nicolas,

Here is what the server admins at HostGator responded:

In researching this issue, it appears that cPanel is still not able to fully support the installation of Apache modules required to load .webp files in EasyApache 4, though they do have experimental RPMs for this. I was curious how this might have been working on the source server, though it appears the images on the source are loading up the .jpg images rather than webp so this may have resulted after an update of the HikaShop Joomla plugins. I would recommend utilizing the .htaccess method for your sites which use this format as it does appear to work correctly and requires no change to the global Apache configuration.

They referred me to this HikaShop post: https://www.hikashop.com/forum/install-update/897453-no-image-in-product-page-after-upgrate-to-4-1-0.html

So we added this code to the HTACCESS and it fixed the issue:

RewriteCond %{REQUEST_FILENAME} !(\.php)$
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^images\/com_hikashop\/upload/ - [L]

While I can ensure that my default HTACCESS template that I use for all sites (since I use almost the exact same setup with Joomla and Gantry 5 templates on all websites) does have this in the code, I did some further research and found this post:

Apache Htaccess for WebP
This is a little better than similar rules out there because it doesn't set a value for the webp env var, and stops RewriteEngine from continuing to loop. It also works with Google Page Speed Insights tool and is case-insensitive.
##### Apache Htaccess for WebP -- BEGIN #####
RewriteEngine On
RewriteBase /
# Does browser explicitly support webp?
RewriteCond %{HTTP_USER_AGENT} Chrome [OR]
# OR Is request from Page Speed
RewriteCond %{HTTP_USER_AGENT} "Google Page Speed Insights" [OR]
# OR does this browser explicitly support webp
RewriteCond %{HTTP_ACCEPT} image/webp [OR]
# AND does a webp image exists?
RewriteCond %{DOCUMENT_ROOT}/$1\.webp -f
# THEN send the webp image and set the env var webp
RewriteRule (.+)\.(?:jpe?g|png)$ $1.webp [NC,T=image/webp,E=webp,L]
# If REDIRECT_webp env var exists, append Accept to the Vary header
Header append Vary Accept env=REDIRECT_webp
##### Apache Htaccess for WebP -- BEGIN #####

So I tried this code instead of the one from the HIkaShop post but it didn't work. Now I am by no means a HTACCESS expert but it appears that this code is ensuring that the browser can serve WEBP images and, if it does, converts the image to a WEBP format. As my Chrome browser is updated, I am assuming (hate that word) that my browser can serve WEBP images so it should work but it doesn't.

I have restored the HikaShop HTACCESS code and the site is working.

My desire is to have a more 'permanent' solution at the server level so no HTACCESS changes would be required so I have some more research to do.

If you have any suggestions, let me know.

Thanks.

Luke

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
4 years 7 months ago #310264

Hi,

HikaShop already generates the HTML to provide both the jpg and the webp images. That way the browser can choose itself.
Hence, the second code you posted is not necessary as what it does is that it tries to see if the browser supports webp and if the webp image is present next to the jpg image so that when a jpg image is requested a webp image is sent by the server.

The first code you posted modify the rules of the server to accept sending files with the webp extension. That's a fine solution if the hosting doesn't want to directly allow the webp file extension download on their server (I don't know why it would be a problem though ?)

Please Log in or Create an account to join the conversation.

  • Posts: 267
  • Thank you received: 5
3 years 6 months ago #324255

Hello,
I have a question about how hikashop works with the transformation of webp images.
In my case it perfectly generates the webp images in all the thumbnails of the web, but in the image that is enlarged of the product, it goes to the original image, in my case jpg, which is in images / com_hikashop / upload /.
Is this correct?
If so, you could make the enlarged images of the product also appear in webp format.
Thanks and kind regards.

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
3 years 6 months ago #324268

Hi,

Yes, it's correct.
The goal of the webp format is to speed up the transfer of the images for the thumbnails so that on listings, or if you have a lot of images on the product page, the display will be speed up as each thumbnail is smaller.
For the main image popup however, you want the image with the most details and not degraded so we send the original image. And as it is another request done when you click on the image, it doesn't slow down the display of the product page itself. It's just a bit slower when you display the popup.

The following user(s) said Thank You: dvddvd

Please Log in or Create an account to join the conversation.

  • Posts: 267
  • Thank you received: 5
3 years 6 months ago #324269

Hello Nicolas and thank you for responding so quickly,

Could the images be directly uploaded in webp format, or would this create problems?

Please Log in or Create an account to join the conversation.

  • Posts: 81540
  • Thank you received: 13071
  • MODERATOR
3 years 6 months ago #324271

Hi,

Images directly uploaded in webp is not supported.
It might be a problem for some third party systems, like modules using the images of products to build carousels, or some plugins like google products or social network, as the third party services might not support webp.

The following user(s) said Thank You: dvddvd

Please Log in or Create an account to join the conversation.

Time to create page: 0.079 seconds
Powered by Kunena Forum