Jump to content

Product Images losing quality


Recommended Posts

Hello I am using Prestashop 1.4.7.0 and it appears that when I am uploading product images, jpeg or png, that they are being compressed and losing quality. I have came across posts for other versions of prestashop that there was changes in code to fix this. I am unable to find such entries in this version. Please help, I really need my product images to be high quality. Thank you.

Link to comment
Share on other sites

Perhaps it isnt that apparent the way I presented, if I post the images side by side perhaps it will be easier to tell the difference. It is very apparent to me that some sort of compression is taking place, I can see this on every one of my product images, I saw in earlier version there being some code in one of the php files that can be changed.

Original:

7120041045_1835c0c02f_b.jpg

 

Site:

6993035002_2050b57387_z.jpg

Edited by PristineReefs (see edit history)
Link to comment
Share on other sites

Hi PristineReefs,

I just brought in our graphic designer for an extra set of eyes, and he confirmed what I said above. The image that I am seeing on your site is actually higher resolution than the 2nd image you posted below. It certainly looks much more like the original image. The issue is just that the image size is smaller, but the resolution looks pretty good on our end.

 

In this situation, the limitation is in the image sizes set by your template. In fact, looking at it more closely, the issue is that you are uploading an image that does not meet the aspect ratio expected in the Back Office. Because of this, the image is being slightly warped to fit in. You can change these accordingly in your Back Office under Preferences > Images, just be sure to regenerate your images afterward.

 

I hope this helps.

 

-Mike

Link to comment
Share on other sites

Thank you Mike that does make sense, this is the default prestashop theme I am using. Which attribute should be changed for this, thickbox? I also assume when you say regenerate images, you mean regenerate thumbnails?

 

Yes on both counts. Please let me know if that works for you.

 

-Mike

Link to comment
Share on other sites

Ok so I have taken some steps and I am still having a problem. I may have pinpointed the issue though. What I have done is, I have the original image on flickr which is stated as 1024x954, so I downloaded that and set the thickbox in prestashop to be same size (1024x954). I reuploaded the image and regenerated bitmaps. When I open the image in prestashop store and choose "View Image Info" in firefox right click menu, it is telling me that the image is "1024x954(scaled to 908px × 846px)" Why is this? The difference in color is very apparent to me in this particular example, notably the green. This is very bad for me because my items (corals) are sold based off of these photos and how colorful they are.

Link to comment
Share on other sites

The PHP image library that is used to resize images is not perfect, even if you set the quality to 100%, you will lose image quality when re-sizing an image (compared to doing it in Photoshop).

 

While it is pretty hard to notice for smaller images, when using a large image, you will be able to tell the difference.

 

The best solution would be to upload the image the same size as the thickbox, and then modify that code, so it displays the original image size rather than the re-sized one.

 

You can also edit the re-sizing code, and change it to only copy the thickbox image, rather than re-size it.

Link to comment
Share on other sites

Could you give instructions on the resizing code? I would like to just upload and not have it resized. I can resize all images in photoshop to be the same if needed. I am pretty new to prestashop so not familiar with all the php/css files.

Link to comment
Share on other sites

The reason it is getting resized in the thick box is because the thickbox renders and the image is set to 100% of the width and the height of the left over space in the image box. My resolution is 1920 x 1200 and the image is not getting resized to that size on my monitor. You need to find a size that will not get resized on most monitors and use that size, while at the sametime using photoshop to make the image smaller so the browser does not compress it.

 

tdlr; the browser is scaling your image.

Link to comment
Share on other sites

I do not have a solution but have also come accross this issue with a client's website where the products are leather with embroidery stitching, the image processing results in the stitching looking a bit blurry, and the leather hue changes slightly (a bit more yellow). you only notice it if you have the original alongside but it is not ideal.

 

In fact the client noticed that their ETSY product images just looked better, those are also server generated images, so why do the ETSY ones look so sharp and the Prestashop ones look a bit murky?

 

Just found an issue for this in Forge, but it was closed without clear resolution, the person it was assigned to said he could not tell the difference btwn the images http://forge.prestashop.com/browse/PSCFI-2470

Edited by duncanmoo (see edit history)
Link to comment
Share on other sites

Darn, well let me retype that...

 

Image on the right is the PS version:

 

post-234094-0-63334800-1336633453_thumb.png

 

The histogram on the right is the PS one:

post-234094-0-53470400-1336633762_thumb.png

 

Another product in the Etsy shop and the PS shop

 

Resizing to the same quality levels on desktop tools does not result in similar histogram changes, The Etsy image is more compressed than the PS one, but yet the Etsy one is more accurate.

 

Thanks

Duncan

Link to comment
Share on other sites

Darn, well let me retype that...

 

Image on the right is the PS version:

 

post-234094-0-63334800-1336633453_thumb.png

 

The histogram on the right is the PS one:

post-234094-0-53470400-1336633762_thumb.png

 

Another product in the Etsy shop and the PS shop

 

Resizing to the same quality levels on desktop tools does not result in similar histogram changes, The Etsy image is more compressed than the PS one, but yet the Etsy one is more accurate.

 

Thanks

Duncan

post-234094-0-63334800-1336633453_thumb.png

post-234094-0-53470400-1336633762_thumb.png

Link to comment
Share on other sites

  • 1 year later...

I am stil noticing this problems, detailed images are not so much detailed even at fullsize using presatshop (1.4.4)

In photoshop I can make smaller and much detailed jpgs, is there a way to use original uploaded picture for thickbox size instead of handling and compressing again by presatshop?

Edited by davers44 (see edit history)
Link to comment
Share on other sites

  • 10 months later...
  • 2 weeks later...

Hi, 

 

My images look good in the thickbox version, but the background noise is visible in product page and in thumbnails.

What I did was to replace the product page image url to use the thickbox link. The picture that is loaded has a bigger size but it looks the way it should. 

I'll think about the thumbnails later.

Link to comment
Share on other sites

  • 1 year later...
  • 3 months later...

I tried many solutions but in 1.6.1.4 none of them worked correctly (ie https://www.prestashop.com/forums/topic/447377-improving-the-image-quality/) I think that is not really hard for Prestashop Team to include other image compression formats to choose (like GD2, ImageMagick etc)

 

The original one is just ugly.

EDIT: THis solution works  perfectly https://www.prestashop.com/forums/topic/447377-improving-the-image-quality/ - just do the first and second step (override) and new image quality is outstanding.

Edited by hakeryk2 (see edit history)
Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...