[Resolved] Featured image colors washed out at smaller sizes

Home Forums Support Featured image colors washed out at smaller sizes

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #278177
    Dave Foy

    I’m struggling with an issue with my featured images.

    The size of my original uploaded featured images is 1200 x 630, every time. In ‘Customizer > Blog > Featured Images’ I have them set to that size too.

    When viewed at full size original version (e.g. http://www.designbuildweb.co/10-reasons-build-next-website-wordpress-3/ >> view at desktop size), the pink colour looks identical to my original.

    By the way: I’m ensuring the uploaded image has an embedded sRGB color profile, which always helps with ‘save for web’ color shifts.

    All great so far….

    Now take a look at the same featured image at the very top of my Blog page:

    http://www.designbuildweb.co/blog/

    Look at how the pink color is washed out and faded.

    I’ve noticed that the ‘washed out’ effect seems to be happening with images being resized by WP only. For example: on the Blog listing page, the image being displayed is ‘featured-pink-latest-1200×630.png’, not my original’featured-pink-latest.png’. And on the single post page (URL above), if I resize the browser screen to view the auto-resized images for various breakpoints, that I can see listed in the ‘srcset’ attribute in source, these are washed out too.

    Have you any idea what’s happening?

    A couple of additional notes:

    1. For the Blog listing, I’d be happy not to have my images resized to 1200 x 630 at all, seeing as that’s the size I’m uploading them anyway. It seems to be washing the colors out, and wasting a bit of space on my server. Happy to keep them tho if I can figure out the color issue.

    2. I’m using Imagify to compress images at upload. Don’t worry… I’ve turned it off for testing here. I can check which WP image sizes I want it to also compress, as well as the original. The 1200×630 being created by GeneratePress isn’t in Imagify’s list of available WP image sizes, therefore I can’t compress it. Imagify’s compression is fantastic, and doesn’t actually cause the color shift issue (I’ve tested it also on my original size images). I see there are also other sizes being generated on the server too – the ones in the srcset attribute I mentioned – which are also not in Imagify’s list of images it can auto-compress

    3. The odd thing is… if I view the resized images directly from the server (e.g. featured-pink-latest-1200×630.png), then they look fine. The pink isn’t washed out at all. But as soon as I view them in a browser (even just dragged directly onto a blank Google Chrome window), they look washed out. But the originals don’t. Just the resized ones. So it’s not a browser color shift issue (otherwise the original PNG would still look washed out, but it doesn’t). It’s a WP resizing issue.

    Thanks for your help.

    #278181
    Leo
    Staff
    Customer Support

    Hi Dave,

    Not really sure what you are seeing but the pink in the two pictures look identical to me? Maybe you just have much better eyes than I do…

    #278182
    Dave Foy

    Ah. That’s interesting. In Google Chrome, the listing page version of the featured image looks VERY washed out and faded.

    I’ve just done a very quick screenshot of the 2 colors side by side.

    https://cl.ly/2p0F1n3m3F2O

    At the original size, I see the color on the left (spot on). On any of the WP resized versions, I see the color on the right.

    Are you able to see that?

    I’ve noticed in Safari that the color difference is way less noticeable, though still there.

    It’s likely that this isn’t an issue with GeneratePress then. I wonder if you or Tom have ever seen it before anyway?

    And also: could you please give me your thoughts on point #2 of my additional notes?

    Here’s a screenshot of the only image sizes available to Imagify to automatically compress on upload:

    https://cl.ly/2f2w262a0V3z

    I of course want to compress ALL images being displayed on the site, including the featured image and all the images in the srcset attribute I mentioned in my first message.

    Thanks for your help.

    #278193
    Leo
    Staff
    Customer Support

    This is what I’m seeing using chrome: https://s21.postimg.org/nnq9rfeg7/pink.png

    Sorry I’m not familiar with the plugin so can’t really provide opinions on #2..:(

    #278218
    Dave Foy

    Thanks for the screenshot Leo.

    In that case, looks like you’re seeing the images just fine. I’ll test in a few versions of Chrome I can find. Thank you.

    Sorry I’m not familiar with the plugin so can’t really provide opinions on #2..:(

    That’s ok. I don’t think you have to be familiar with the plugin I mentioned.

    I’ll re-phrase the question:

    It looks like the image sizes being registered by GeneratePress are not being made generally available to plugins.

    I’m pretty sure it’s not a specific plugin issue. I’ve just tried another plugin which also can only see the images registered by WordPress, not GP (see screenshot: https://cl.ly/3Q2B412E1G3G).

    So… how do I make the custom image sizes being registered by GP be exposed to plugins?

    I wish I knew how to make WP list the plugins it thinks are registered, but I’m afraid I don’t know how.

    I used to use Divi (I know, I know….). It registered its own custom image sizes, and these were all available to resize/compression plugins, like the 2 I’ve just mentioned.

    Thanks for your help.

    #278234
    Tom
    Lead Developer
    Lead Developer

    Hmm I’m not noticing any difference either.

    The GP image resizer resizes the images on the fly, so it doesn’t register them which is likely why your plugin isn’t seeing it.

    What you can do is remove the values from Customize > Blog > Featured Images, then register a new image size:

    add_action( 'after_setup_theme','dave_register_images' );
    function dave_register_images() {
        add_image_size( 'daves_image', 1200, 630, true );
        add_filter( 'generate_page_header_default_size','daves_image' );
    }

    That should register the new image size in WordPress and use it for your featured images.

    You will need to regenerate your images using a plugin like Force Regenerate Thumbnails: https://wordpress.org/plugins/force-regenerate-thumbnails/

    #278251
    Dave Foy

    Hi Tom – thanks also for confirming you don’t see any change. Well, I’ve narrowed the issue down to something WP is doing on resize (because it only affects resized images)… and the issue is only visible in my version of Google Chrome. πŸ™‚ I’ll dig deeper. Sorry to bother you with this, appreciate it’s not a GP issue. You’ve helped me narrow down my investigation.

    Registered image sizes: perfect! That explains it. I’ll get that sorted. Thanks!

    #278264
    Dave Foy

    Actually…. I’ve just removed the featured image size values in Customizer. Now my original is used, which is great. Imagify compresses that by default. So, unless I’m missing something, I don’t actually need to register the new image size in WordPress?

    I’ll always upload featured images at the right size, there’s only me updating the site.

    #278435
    Tom
    Lead Developer
    Lead Developer

    Great! If you’re good with using the full images then there’s nothing wrong with that at all πŸ™‚

    #316140
    Marco

    Hello!

    I was having the same problem reported by OP, and discovered that it was caused by a custom CSS code that I had on my website that changed the opacity of my paragraphs. It used to work fine, but in the last few weeks it decided to bug it out, which caused the effect of faded images. So, I decided to remove the code.

    BEFORE CODE:

    p {
        opacity: 0.80;
        letter-spacing: -0.30px;
        word-spacing: -0.10px;
    }

    AFTER CODE:

    p {
        letter-spacing: -0.30px;
        word-spacing: -0.10px;
    }

    Please OP, check if you have similar code as I did.

    Hope this is not too late and that it will help you!

    #316167
    Tom
    Lead Developer
    Lead Developer

    Thanks for posting, Marco! πŸ™‚

    #316183
    Dave Foy

    Thanks for the update Marco. Really appreciated!

    Sadly I don’t have opacity set on any of my elements. And it was only affected in Google Chrome, other browsers were fine.

    Thanks anyway. πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.