WP Thumbnail Issues (cropping and color-profiles)

  • Hi!

    https://kva.wpengine.com/

    As can be seen above from the testing link above… I have uploaded three rows using the same images, but the images all look different.

    1. The first row’s images are set through visual composer as thumbnails.
    2. The second row of images are set through visual composer as separate image sizes (thumbnail-full).
    3. The third row of images are just linked to the server (I bypassed the media uploader by uploading the files via SFTP and then linking them to the page directly).

    There are two issues here.

    The first… look at those thumbnails in the first row. Wow. Cropping just does not work here for my smallest image sizes.. I need them to NOT crop. I have thumbnail cropping de-selected but this does not change the results I get and yes, I even used regenerate thumbnails and the image results I get do not change. It’s very odd.

    The other issue relates to the color of these image. The above images are ALL the SAME images, but I am getting different results. You will notice the images are made up of two grays, but they should all be the same color (#7e7e7e – not dark gray). WordPress seems to be forcing compression and re-setting the color profiles of my thumbnails that it deems “grayscale”.

    The only time I get the correct and consistent color results is from option 3 or row 3 – where I bypass the media uploader entirely. This can not be my solution though as the client wants to be able to edit all from the backend of WordPress and will not have access to SFTP.

    So here is what I know…

    The default WP media uploader is converting the transparent png logos I am uploading to a gray gamma 2.2 color profile. This means that any time I want to ensure I am getting the correct color PNGs, I have to use the full URL and cannot use medium or thumbnail etc. The only time the color profile of the png images stays true to sRGB is if the original png file size is SMALLER than my designated thumbnail size, which is set at 225px OR if I input any type of color into the image outside #7e7e7e (like red).

    I am on a brand new install of WordPress. I’ve installed the twenty-sixteen theme to show that the issue is not theme related. I have most all my plugins turned off. Everything is up to date. This can not be just one of those things everyone has to deal with?

    So to be clear
    1. How can I NOT force a max-width on thumbnails and NOT force these thumbnails to be hard cropped
    2. How do I keep WordPress from compressing gray PNG images it thinks are grayscale?

    BTW, I tried adding “add_filter( ‘jpeg_quality’, create_function( ”, ‘return 100;’ ) );” to my functions.php file and this does not seem to work for PNG. The png files still get “optimized”.

    So Does anyone have suggestions? I’ve fiddled with this and looked around the web for hours and hours with no solutions.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The first… look at those thumbnails in the first row. Wow. Cropping just does not work here for my smallest image sizes..

    Something is taking the image and applying it as a background image on the <div> tag surrounding the image. Then the style for the background image is “cover”, which is not a particularly responsive option and causes the issue you see.

    Are you sure you are using a default installation without plugins? Your site suggests you’re not; https://kva.wpengine.com/wp-content/plugins/js_composer/assets/css/js_composer.min.css?ver=4.12

    Thread Starter Thaddeous

    (@theig072)

    Hey Andrew. That is visual composer… So yes, that is a plugin. I can disable it though and you will see that all the issues still exist. I was using it so I don’t have to code up 3 separate rows with 6 columns each just for this example. But I will disable it. Please hold. BTW, do you see the color differences? It’s nuts. I can’t find answers to these compression issues anywhere.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I can disable it though and you will see that all the issues still exis

    Could you? Because everything related to the thumbnail issue points to that plugin.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I haven’t looked into the colour difference issue

    Thread Starter Thaddeous

    (@theig072)

    Ok. So now there are NO plugins whatsoever activated. Consequently the images are now in lists instead of rows… but you should still be able to see the massive color difference and cropped thumbnails.

    Thread Starter Thaddeous

    (@theig072)

    It’s interesting that the Mercedes logo is showing up as the correct gray (#7e7e7e). That PNG is the only PNG that fits within 225px (which is the current thumbnail setting). All other PNGs have a width that is wider than 225px. Also, If I add any color to any of these PNGs, then the gray is not “converted”. It’s not just a problem on the front-end though… these dark grays are also visible via the media uploader in the backend (where WP shows all thumbnails). If you click any of these odd dark thumbnails though, the interior page will show the full PNG image – which is the correct “light” gray image. I’m pulling my hair out over here. lol Also, please note that this image persists when uploading one by one AND when uploading a batch.

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Please do not create duplicate topics for the same thing. Your new topic was deleted, duplicate topics make it harder for the other volunteers to support you.

    If you have something new to add please do so here.

    Thread Starter Thaddeous

    (@theig072)

    Nothing new to add… still waiting for help. This is most definitely NOT resolved.

    Thread Starter Thaddeous

    (@theig072)

    I have to keep working on this website, which forces me to remove the “live” examples I provided, and to reactivate the plugins and my own theme. I have now screenshot the images as described above and will link you to an image of them so you still have an idea of the issue.

    https://kva.wpengine.com/wp-content/uploads/2016/07/image-lists.jpg

    I know this jpg image isn’t ideal for troubleshooting, but at least it will visually give you an idea of the issue as described in the thread above. This PNG compression issue needs to be addressed as it is definitely a core WordPress issue.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘WP Thumbnail Issues (cropping and color-profiles)’ is closed to new replies.