Product image blurry

  • Posts: 25
  • Thank you received: 4
  • Hikashop Essential
9 months 1 week 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: 81716
  • Thank you received: 13107
  • MODERATOR
9 months 1 week 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: 9 months 1 week ago by nicolas.

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

  • Posts: 25
  • Thank you received: 4
  • Hikashop Essential
9 months 1 week 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: 81716
  • Thank you received: 13107
  • MODERATOR
9 months 1 week 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: 25
  • Thank you received: 4
  • Hikashop Essential
9 months 1 week 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: 81716
  • Thank you received: 13107
  • MODERATOR
9 months 1 week 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: 25
  • Thank you received: 4
  • Hikashop Essential
9 months 1 week 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: 25
  • Thank you received: 4
  • Hikashop Essential
9 months 1 week 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: 81716
  • Thank you received: 13107
  • MODERATOR
9 months 1 week 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: 25
  • Thank you received: 4
  • Hikashop Essential
6 months 1 day 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: 81716
  • Thank you received: 13107
  • MODERATOR
6 months 1 day 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.

  • Posts: 25
  • Thank you received: 4
  • Hikashop Essential
2 months 2 weeks ago #359542

Hello,

I still haven’t resolved that issue.

I have managed to get clear images on the product listing page, by setting the product height to 300 px and going into the thumbnails folders after the creation of the product, deleting the image generated by hikashop and uploading a high resolution image instead (around 800 x 950 px depending on the image as their sizes are all slightly different) in the joomla backend.

However, when I’m trying to do the same thing with the product image on the product page, it’s not working. I’ve tried with the following configuration:



When I upload a higher resolution image, the image that appears is bigger in size than the usual 400 px image and it goes over the text of the description. See below link:

www.noelieceyralartstudio.com/index.php/...ts/product/9-jumping

If I don’t upload a new higher resolution image in the thumbnails and leave the image automatically generated by hikashop, the image is blurry. See below link:

www.noelieceyralartstudio.com/index.php/...s-layers-of-the-self

When I inspect the image with the developer tool, it points me to the template CSS; however, if I change the template CSS mentioned, it will alter the size of all the images I upload on my website, which is not going to be helpful. Is there something I can change within the hikashop configuration or CSS to have clear images with the image size that I need? Or do I need to check this with my template provider?

I am currently working on joomla 4.4.3, PHP 8.2 and using hikashop 5.0.3

I am currently working offline, but have put my website online so that you can have a look at the issue.

Many thanks,

Attachments:

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

  • Posts: 81716
  • Thank you received: 13107
  • MODERATOR
2 months 2 weeks ago #359567

Hi,

I personally don't see where the image is blurry on your second URL. It looks just fine to me compared to the original image www.noelieceyralartstudio.com/images/com...by_noelie_ceyral.jpg

Regarding your first link, it's normal that the image goes over the text.
HikaShop expects the thumbnail to be 400px*400px maximum so it allocate that space on the page to it.
But since you've uploaded a bigger image, it just go over the space available for it.

So either:
- add CSS to resize the image on the product page. For example:

img#hikashop_main_image {
    max-width: 400px;
    max-height: 400px;
}
- add CSS to allow for more height for the area of the product image:
.hikashop_product_main_image {
    height: auto !important;
}
- or increase the size of the thumbnail on the product page in the settings of the configuration to reflect the size of the thumbnails you really want to use.

The following user(s) said Thank You: Noe

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

  • Posts: 25
  • Thank you received: 4
  • Hikashop Essential
2 months 2 weeks ago #359581

Hi Nicolas,

Thank you for looking into that.

The image is very slightly blurred. It is not as sharp and clear as the original image. If I put the original image next to the image in the product section you can see the difference (see below image), but it is not a huge difference, though some people will notice it and I definitely notice it, even on my mobile phone screen, as I’m very used to check image quality for printing. As an artist it is essential for me to have clear and sharp images of my work on my website. But anyway, as I managed to get really clear and sharp images on the product listing page, there is surely a way to get to the same result on the product page.

I am going to try adding CSS to resize the image on the product page as you suggested with the below code.

img#hikashop_main_image {
max-width: 400px;
max-height: 400px;
}

I’m just wondering in which file do I add it? Do I add it to the “styles for the front end” document in the CSS options in the Configuration/ Display section? Or do I add it to another document? When I do the add, do I do this at the end of the document?

Thank you!

Attachments:
Last edit: 2 months 2 weeks ago by Noe. Reason: I hadn't been able to add my image. I pressed the submit button in instead of the add image button.

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

  • Posts: 81716
  • Thank you received: 13107
  • MODERATOR
2 months 2 weeks ago #359582

Hi,

The best is to add the CSS to your template's custom CSS if it provides that capability. Many should. But you would have to check with your template provider what they recommend.
If that's not possible, then yes, you want to add it to “styles for the front end”. I would recommend emptying it before adding your CSS.

The following user(s) said Thank You: Noe

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

  • Posts: 25
  • Thank you received: 4
  • Hikashop Essential
2 months 2 weeks ago #359621

Great ! Thank you ! My template has got a custom CSS and I have now managed to get clear images on my computer screen with the CSS and configuration I'm sharing at the end of the message. However, I’m having an issue with how the images appear on my mobile phone (again just only for the product image on the product page). The image is now bigger than my screen and not centered (see attached image). Also the arrows of the thumbnails now appear inside of the image, when it was appearing on the side of the image before. Any idea on what I could do in order to solve that issue?

Here is the CSS I entered in my template custom CSS. I had to try various things before it could give me the desired result as it kept on changing the ratio of the image and stretching the width of the image.

img#hikashop_main_image {
max-height: none;
max-width: 400px;
}

It worked with the below hikashop configuration:

Attachments:
Last edit: 2 months 2 weeks ago by Noe.

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

  • Posts: 4560
  • Thank you received: 614
  • MODERATOR
2 months 2 weeks ago #359626

Hello,

Please provide these elements :
- An url link where we can see your issue
- All required to allow us to reach your frontend (user & password)



Regards

Last edit: 2 months 2 weeks ago by Philip.

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

  • Posts: 25
  • Thank you received: 4
  • Hikashop Essential
2 months 2 weeks ago #359642

Hi Philip,

Sorry, I had to put my website offline again as I'm still working on the final layout and content.

I've just put it back online, so you can now access it here:

www.noelieceyralartstudio.com

Also, I've been having an issue with my products on the English page in the "original artworks" section. They've disappeared after I added products in the "related products" section of one of my product. I'm not sure what it's due to? The associated French page which uses the same category is working fine. Any idea on what may have caused this issue and how to fix it?

Thank you!

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

  • Posts: 25
  • Thank you received: 4
  • Hikashop Essential
2 months 2 weeks ago #359644

Hello,

For the problem with the image being bigger than the size of the screen and the arrows of the thumbnails being in the middle of the image, you can check the below two links. The problem appears when I upload more than one image for my product and it is only visible on the product page when you view it on a mobile phone. On a computer screen, it looks fine:

www.noelieceyralartstudio.com/index.php/...ts/product/9-jumping

www.noelieceyralartstudio.com/index.php/...s-layers-of-the-self

For the problem of the products suddenly disappearing, it is in the "original artworks" section. The French associated menu "oeuvres originales" is using the same category and it is working fine. All products are visible on this page:

original artworks page: www.noelieceyralartstudio.com/index.php/en/original-artworks

Oeuvres originales page: www.noelieceyralartstudio.com/index.php/fr/oeuvres-originales

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

  • Posts: 4560
  • Thank you received: 614
  • MODERATOR
2 months 2 weeks ago #359673

Hello,

First of all, can you keep this principle, a topic a problem.
So if you have another problem (unrelated to the current one) please create a new topic.

In your new topic, provide these elements :
- Url link to see your issue
- Process a test with a default template

Now, for your product image, it seems that your issue come from your current template, see my screenshot :



You can add this command can correct this : "max-width: unset;", see this documentation to see how to proceed.
Regards

Last edit: 2 months 2 weeks ago by Philip.
The following user(s) said Thank You: Noe

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

Time to create page: 0.096 seconds
Powered by Kunena Forum