Product image blurry

-- 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!

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).

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?

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?

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

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?

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,

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!

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:

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!

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