- This topic has 11 replies, 4 voices, and was last updated 6 years, 10 months ago by Dave Foy.
-
AuthorPosts
-
February 13, 2017 at 8:30 am #278177Dave 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.
February 13, 2017 at 8:44 am #278181LeoStaffCustomer SupportHi 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…
February 13, 2017 at 8:59 am #278182Dave FoyAh. 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.
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:
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.
February 13, 2017 at 9:21 am #278193LeoStaffCustomer SupportThis 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..:(
February 13, 2017 at 10:24 am #278218Dave FoyThanks 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.
February 13, 2017 at 10:37 am #278234TomLead DeveloperLead DeveloperHmm 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/
February 13, 2017 at 11:20 am #278251Dave FoyHi 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!
February 13, 2017 at 11:44 am #278264Dave FoyActually…. 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.
February 13, 2017 at 7:32 pm #278435TomLead DeveloperLead DeveloperGreat! If you’re good with using the full images then there’s nothing wrong with that at all ๐
May 9, 2017 at 10:57 pm #316140MarcoHello!
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!
May 10, 2017 at 12:04 am #316167TomLead DeveloperLead DeveloperThanks for posting, Marco! ๐
May 10, 2017 at 12:33 am #316183Dave FoyThanks 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. ๐
-
AuthorPosts
- You must be logged in to reply to this topic.