White background of square images has feint grey lines

[steve_c]

Hi all

 

I have recently started using square images for my shop instead of landscape.

The 1200 x 1200 (90% Quality JPG) images that I upload have a perfect white background (used colour picker in PS to test).

 

Once they are uploaded and Prestashop resizes them, they have feint grey lines in the white background.

 

Does anyone know why this is happening?  JPG quality on BO is set to 100%.

 

Images below (if you cannot see what I mean, try and look at the monitor at a harsh angle or saving the photo and using your color picker):

 

Original 1200 x 1200:

 

 

 

 

Prestashop Image:

 

 

 

 

Any help would be greatly appreciated.

 

Thank you in advance

Edited August 26, 2015 by steve_c (see edit history)

[steve_c]

Hi has anyone got any ideas on this?

 

Thanks again!

[vekia]

i dont see these lines

i tried what you suggested but background is... white

[bside2234]

Same. Not seeing any lines at all.

[gabriiel]

Same here - no lines at all.

 

I have had similar problem, it is browser dependent. Some browsers just mangle the image in such way. Try another browser just to verify that.

[garyjj127]

I have this problem in Chrome. Not so noticeable in large pictures, but small pictures (the multi image view thumbs) there is a grey background. My monitor is calibrated with a Spyder so I know that it's not the problem. jpg compression is set at 95. I'm sure that this is a PS1.6 issue, as I previously had no problems.

[jano.jakubik]

Hello. I have the problem when I can see faint grey lines on white background of jpg product images (in BO I set 95% jpg quality but there is no difference when I set 100% quality, problem is still there). It is really hardly to notice this problem but the problem exist. The problem only afects resized images. For me I cannot see the problem on big thickbox images (1200x800px) becuase my original uploaded file has same dimensions like thickbox. But I can see it in all resized product images like large product image in product page (560x420px) but also I can see it on other smaller products images (in category, etc.).

But it seems that some LCDs show this lines more visible and some do not (is is really really hard to see them). I checked original picture (jpg) by Photoshop color picker and all white places in original picture are #ffffff. So then I upload the product image to my e-shop and after that I downloaded picture from my e-shop (right click to image in Chrome browser) where I can see that grey lines (original image which is in my computer has only #ffffff background color) and checked it with Photoshop color picker. And I found the reason! The all white background (#ffffff) was split to two colors which alternate with each other: #ffffff and #fefefe! So that is the reason why there are grey lines. So please fix this issue. This is the proof that Prestashop by its own compression/resize changing the white background color #ffffff to two colors #ffffff and #fefefe. Also I noticed that in Chrome it is more visible then in Microsoft Edge or Firefox. The fix from Prestashop team will be really nice. I think it is really problem in compresion/resize of uploaded pictures which did Prestashop. My version of Prestashop is 1.6.1.1.

 

I uploaded also 2 files. One is the original picture and the second is the Prestashop resized picture used for large products in my e-shop (but same problem is for all resized product pictures by Prestashop). You can try it by color picker in Photoshop. Slowly drag the color picker on white background and in Prestashop resized image you will see that color is changing from #ffffff to #fefefe and vice versa. In original picture you can see the color picker shows only #ffffff color.

Edited October 2, 2015 by jano.jakubik (see edit history)

[garyjj127]

I can verify this. #fefefe in Photoshop, so it's definitely a compression issue with Prestashop. Something has obviously changed between versions as this problem never arose for me before upgrading to 1.6. It's not as noticeable if you have a colourful background, but it doesn't look very professional when it's supposed to be on a white background.

[innercode]

It is GD library fault, and to be precise, it is imagecopyresampled function.

 

I found the solution, it is not very good, it will take a lot of time (I mean a LOT of time), to regenerate all your images. It took a minute or more on default PrestaShop install with ~20 images.

 

So if you really need this, here is what you need to do:

 

1. Create new file ImageManager.php in override/classes.

 

2. Add this code to newly created file:

<?php


class ImageManager extends ImageManagerCore
{
    public static function clearNoise($newImg, $newWidth, $newHeight)
    {
        $colorWhite = imagecolorallocate($newImg, 255, 255, 255);
        for ($y = 0; $y < ($newHeight); ++$y) {
            for ($x = 0; $x < ($newWidth); ++$x) {
                $colorat = imagecolorat($newImg, $x, $y);
                $r = ($colorat >> 16) & 0xFF;
                $g = ($colorat >> 8) & 0xFF;
                $b = $colorat & 0xFF;


                if (($r == 253 && $g == 253 && $b == 253) || ($r == 254 && $g == 254 && $b == 254)) {
                    imagesetpixel($newImg, $x, $y, $colorWhite);
                }
            }
        }
    }
}

3. Open classes/ImageManager.php find function called resize. Copy this function to your newly created file, and add this line:

self::clearNoise($dest_image, $dst_width, $dst_height);

before:

$write_file = ImageManager::write($file_type, $dest_image, $dst_file);

4. Delete file from cache/class_index.php (needed in order to newly created override to work).

 

What it does is goes pixel by pixel in every image and replaces the #fefefe and #fdfdfd to #ffffff. It is really long process, there is a chance that your server will timeout if you have a lot of images.

 

The better and more simple way is use PNG with quality 3 from the begining. The image size will be close to .jpeg, and you won't get grey background. It won't work with current images, only with the new ones that are uploaded.

Edited March 10, 2016 by innercode (see edit history)

[garyjj127]

Thanks for this! I can see that it will be incredibly time consuming, as I have over 2000 images!

 

I have however, noticed that the image quality is perfect when I add products through the back office, rather than when I import with a CSV. When I import with a CSV, the image looks slightly blurred and get the grey lines. When I add images in the back office, they're fine.

 

So I guess there is a different image processor for imported images?

 

How could I find out??

[innercode]

Yes, it is a little bit different, but I would say they should look better with CSV Import compared to manual upload in product edit page. But I might be wrong here, only have glanced at the code, haven't tested.

[garyjj127]

It's really quite odd. It's almost as if the image quality settings are ignored on the CSV import. However, I changed the image settings to 10 for Jpegs & tested both an import and an upload - both were awful quality, so the import engine definitely takes note of the image settings.

 

Below are 2 images, top one is imported, bottom one is uploaded. There's definitely a difference in quality. If someone could shed some light I'd be really grateful!! 

. 

The image above is the imported image

 

The image above is the uploaded image (look at the stitching).

[raphaPS]

Hi @garyjj127,

 

I have the same problem as you: pure white images created by Photoshop or illustrator are rendered with some tiny grey lines. Should I proceed by CSV import (worse: more grey lines) or direct import in the Back Office, did you find a solution?

Thank you,

Raph