• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 20.09.23, 09:23
  • Opened by: Mamor
  • Closed by: Anonymous Submitter
  • Closed on:
  • Reason: Not a bug

Ticket #24932 - Blurred product images

Hello Fred,

I’m experiencing an issue with the product images.

They appear blurry and I really can’t determine why.

I made sure to upload them in the correct size (800×800) and there’s no stretching from Prestashop’s side (see screen size).

I also thought it might be due to a native zoom module but couldn’t find anything.

Here’s a product page: https://prod.lora-moi.ch/fr/arbre-de-la-vie-bracelets/305-angelsvoice-bracelet-925-arbre-de-vie-dore-rose.html

I’ve also sent you a screenshot of the original image and the one on the shop so you can see the difference. There’s a slight variation in the lighting, but that’s expected since every screen has different brightness levels. What’s concerning is the blurriness you can notice on the tree.

On the product page, you can also scroll down to the detailed description. There’s an image we added using Creative Element, and it’s very sharp( see imagedescription).

The product page was built using Creative Element.

Thank you again for your help.

Have a great day.

Attachments:

blurimage.jpg (154.1 KiB)
imagedescription.JPG (135.7 KiB)
size-image.JPG (21.9 KiB)

Comments

Fred 20 Sep 2023, 13:32

as I can see the image has correct dimensions 800x800px but the container is a bit smaller. Try to set min width for container using this css

[data-id="a9d1587"] {min-width:800px !important}
Mamor 20 Sep 2023, 13:53

Great, works on computer, but the images still appear blurry on mobile ( see screens)

Attachments:

mobileblur.jpg (94.3 KiB)
Fred 20 Sep 2023, 14:26

I would not say that’s theme’s issue. That’s a question of specific browser rendering method.
Try this CSS set precisely how do you want to render images: 

img {
  image-rendering: pixelated;
}
Mamor 20 Sep 2023, 14:34

I applied the css but it didn’t change anything (I emptied the caches and also went to private browsing), I’m attaching a screen so you can see the problem clearly.

Shouldn’t I put a css @media query? Because doesn’t the box enlarge the images?

I’ve attached some screenshots, and you can clearly see that the one on the product sheet slide is much blurrier. The best thing to do is take a look with a cell phone, and you can see it clearly on this product sheet, the bottom image is very sharp compared to the one above in the slider.

URL from the product : https://prod.lora-moi.ch/fr/bijoux/328-collier-feuile-de-ginkgo-en-argent-925.html

Attachments:

blur3.jpg (108.2 KiB)
blur2.jpg (117.4 KiB)
Mamor 20 Sep 2023, 18:35

I believe I’ve found a solution using a media query to prevent the image from being stretched on mobile. I’ll test it on multiple devices to be certain.

One last question (while I have you): I’m having a hook issue with Creative Element in conjunction with another module, and Creative Element has sent me an updated version that addresses this bug.

My question is: if I update Creative Element, could it disrupt the category code you’ve implemented?

Fred 20 Sep 2023, 22:22

Hi, Mamor.
It’s hard to tell you, because I have no idea what was changed in that updated module. If you want I can compare. Would be also fine if you give me some details received from CE devs, if you have it

Mamor 21 Sep 2023, 09:26

Hi Fred,

There’s a problem with prestablog, creative element can’t hook it when I try to edit the text.

I’ve attached the file so you can compare! Tell me if you received it, I wonder if it’s not too heavy (3mb)?

Thanks for the help

Fred 21 Sep 2023, 10:11

yes, it’s too heavy. Please compress it or send through file sharing service

Mamor 21 Sep 2023, 13:22

It was already compressed!

Mamor 22 Sep 2023, 09:38

Hi Fred,

Is everything in order with the link?

Fred 22 Sep 2023, 09:52

Yes, I received it. Need some time to compare

Mamor 22 Sep 2023, 09:53

Nice, Yeah no problem, I just wanted to know, if everything was Ok with the link.

Fred 22 Sep 2023, 22:17

I just realised that you have Pro version of CE, you you can update it with no problem. We do not distribute CE module in the update