Product image blurry

  • Posts: 11
  • Thank you received: 1
3 months 3 weeks ago #354363

-- HikaShop version -- : 4.7.5
-- Joomla version -- : 4.3.3
-- PHP version -- : 8.0.26
-- Browser(s) name and version -- : googlechrome

Hi,

When I add images for my products, the images appear with a blur on the product listing page as well as on the product page. When I click on the thumbnail images to see a larger image (when on the product page), the images that appear on my screen are perfectly clear, just like the original image I've uploaded.

Is there anything I may be doing wrong that is giving me that blurred image? And if so, what can I do to get clear images of my products?

Also, I've been getting an error message when creating products: "administrator/components/com_hikashop/helpers/gallery.php on line 57", so not sure if this may be related. (I have attached an image with the error message)

Thank you!

Attachments:

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

  • Posts: 80502
  • Thank you received: 12831
  • MODERATOR
3 months 3 weeks ago #354364

Hi,

The deprecated message is actually not an error. It there to tell developers what will change in future versions of PHP so that they can modify their code in advance, before it breaks.
So it doesn't change the behavior of the system. You can just ignore it on your end.
On our end, we actually already have a patch to change the code pointed by the message for the next version of HikaShop.

Regarding the blurry image, this usually happens when you configure small thumbnail sizes in the settings of HikaShop but you have either custom CSS or the CSS of the Joomla template which stretches the thumbnails on the browser side. If that's the case, increasing the size of the thumbnails in HikaShop usually solves the problem.
But I can't say for sure without investigate the issue directly. Could you provide the URL of a page with the issue ?

Last edit: 3 months 3 weeks ago by nicolas.

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

  • Posts: 11
  • Thank you received: 1
3 months 3 weeks ago #354423

Hi,

Thank you for your answer and for explaining the reason for the « deprecated message ».

With regards to the image quality issue, I can’t send you an URL as I’m currently working on wampserver. I have attached a screen capture image of the issue, if that can be of any help. I have opened two of the images with Microsoft Office picture manager on top of the listing, to show the difference in image quality. Basically, the images are slightly blurred, which gives a sense of poor images being used, when in fact the original images are really clear images.

I’ve also added a screen capture image of the settings in the global configuration for hikashop. I tried putting higher values for the thumbnail size (1400 px x 1400 px) but it’s not making any difference. My images are around 950 px x 750 px with 95 DPI. I am currently using a joomlart template using T4 framework, in case this could affect the quality of the images. The problem started from the very beginning of me using hikashop for this particular website. When I uploaded my first image without configuring anything, the image appeared blurred. Then I started to look around in the configuration settings to see if something could be changed, but could not find anything that would change the situation.

I have created 2 categories and both are showing the same issues (blurred images).

Attachments:

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

  • Posts: 80502
  • Thank you received: 12831
  • MODERATOR
3 months 3 weeks ago #354430

Hi,

It's hard to say anything like this.
There are two possibilities:
- HikaShop does slightly compress the thumbnails when generating them. So the fact that it is a bit degraded compared to the original is to be expected. You can see the code:

case 'jpg':
			case 'jpeg':
				if(empty($res['quality']))
					$res['quality'] = 95;
				$status = imagejpeg($res['res'], $filename, $res['quality']);
				break;
			case 'webp':
				if(empty($res['quality']))
					$res['quality'] = 95;
				$status = imagewebp($res['res'], $filename, $res['quality']);
				break;
			case 'png':
				if(empty($res['quality']))
					$res['quality'] = 9;
				$status = imagepng($res['res'], $filename, $res['quality']);
				break;
in the file administrator/components/com_hikashop/helpers/image.php
There, you can see that for a jpg image, the thumbnails are compressed by 5%. Change that to 100 and there will be no compression when HikaShop generates the thumbnails.
Note that once the thumbnails are generated, it won't regenerate them. So you would have to delete the folders under the images/com_hikashop/upload/thumbnails/ folder so that it would automatically regenerate them.
If you don't see any difference, then it's not this which is the problem.

- The CSS of your template. But I can't say what to do exactly. I would need to directly analyze the HTML and CSS on the page of your screenshot to be able to say what's going on.

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

  • Posts: 11
  • Thank you received: 1
3 months 3 weeks ago #354458

Ok, thank you! It looks like this may be the issue - the automatic compression of the thumbnails, as the quality reduction is small though still noticeable.

I have located the file on my computer (administrator/components/com_hikashop/helpers/image.php), but don’t know how to change the PHP file as I’m not a developer. Is there an easy way to do it? I cannot open the document (I'm currently using WAMP as a server, so don't have access to an FTP folder either). I guess I may need a specific program to do that? Or can I do that from the joomla backend?

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

  • Posts: 80502
  • Thank you received: 12831
  • MODERATOR
3 months 3 weeks ago #354463

Hi,

If you are on WAMP and have located the file on your computer, just open it with notepad and follow the instructions in my previous message to change the code and save the file.

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

  • Posts: 11
  • Thank you received: 1
3 months 3 weeks ago #354506

Hi,

Thank you! I’ve opened the document with notepad, made the changes, removed all images from the upload folder as well as from the thumbnails folders, re-uploaded the images, but it didn’t change anything.

However, I’ve realized that every time that I upload an image, 2 images are being saved: one jpeg and one webp image. The webp image is of lower quality. I’m including an image for illustration.

In the screen shot, I’m sending you, I opened the jpeg image as well as the webp image for the same painting in the 400 x 333 px thumbnails folder. The jpeg image is slightly smaller in size, however, when I check its size it says 100%. The webp image is slightly bigger in size though it is also blurred whereas the jpeg image is totally clear. If I want my jpeg image to be the same size as the webp image, I need to increase its size by about 20%. Then the image also becomes blurred, just like the the webp image.

Also, when I right click on the images from the hikashop products and try to open up the image in a new tab, the image that appears is a webp image. But when I right click on other images of my website that are not from hikashop, the image that opens in a new tab is a jpeg image.

So, I guess that the issue is that the webp images of hikashop are being increased by 20% from their original size, hence the loss of quality from 20%. The webp images seem to be the images that are used for the products' images. Do you know where this problem could originate from? And how to change that?

Attachments:

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

  • Posts: 11
  • Thank you received: 1
3 months 3 weeks ago #354508

I'm also realising that the jpeg image and webp image don't have the exact same resolutions when i'm right clicking on the image to find out its properties. See attached image which shows different ppp for the same size image in the thumbnails folder (one for the jpeg image and another one for the webp image). I tried uploading an image with 125 ppp (or dpi) in the upload, general folder, and here is how hikashop creates thumbnails for it for the 333 x 399 size:
- jpeg is 333 x 399 for 96 ppp
- webp image is 333 x 399 for 72 ppp

Attachments:

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

  • Posts: 80502
  • Thank you received: 12831
  • MODERATOR
3 months 3 weeks ago #354515

Hi,

Then I would recommend checking the setting "Generate WebP images" in the HikaShop configuration. If it's on, turn it off and that way HikaShop won't use the webp images.

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

  • Posts: 11
  • Thank you received: 1
2 weeks 2 days ago #356913

Hi,

I still haven’t resolved the issue with the quality of the images I upload as I had to stop working on this project for a few months.

I am now working on joomla 5.0.0 with hikashop 5.0.0 and PHP 8.2.0.

I have turned off the "Generate WebP images" in the HikaShop configuration but it didn’t change anything. I can manage to have a slightly better quality of images when I create my own images for the thumbnails (delete the images that are created automatically and then create my own images with the proper resolution and add them to the folder with the right pixel size), but the images are still not as clear as the original image both in the menu which lists the products as well as on the product page. Also it doesn’t seem to be working all the time and it’s quite a hassle to have to go through that process for each image.

Do you know what else could cause a problem?

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

  • Posts: 80502
  • Thank you received: 12831
  • MODERATOR
2 weeks 2 days ago #356915

Hi,

If you generate yourself the thumbnails, then I don't see why they should be blurry, unless there is CSS on the page which forces the browser to upscale the thumbnails.
In that case, you should check the CSS on the images with the developer tools of your browser.

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

Time to create page: 0.078 seconds
Powered by Kunena Forum