Cross-origin error with photon

Could you let me know how you insert the grayscale image into your posts? Do you use a specific plugin to achieve this result?

It’s built into the theme – https://themeforest.net/item/betheme-responsive-multipurpose-wordpress-theme/7758048.

I tried pasting the exact 2 img tags posted above, using a different (local image of course) on another site running a different theme just to test whether it is theme specific but every time I load the page even with photon enabled, the images do not load from the i0.wp.com domain and load up visible with no issues.

I simply pasted the 2 img tags into the text mode of the wp editor, verifying the code remains intact and loading the newly published page. Does photon need time to discover these images and how lonmg should I wait? Is there a set of rules I need to know on how to perform this test and get photon to serve them up? I’m not sure of the inner workings of how photon is aware of image content but I’m open to learn in effort to flush this one out. I verified the latest FF and IE Edge also reveal this problem.

Hmm, added this little snippet to see if I could force caching of my test page’s images but still not being served from ix.wp.com. Is there something maybe in the above images (i.e. one of those attr tags possibly added by photon) that would keep photon from uploading these test images pasted into my test pages content? My test site has no other caching plugins but I just realized its nginx vs the other being apache if that has any effect or not.

add_filter('the_content','photon_filter');
function photon_filter($content){
    if ( class_exists( 'Jetpack_Photon' ) ) {
		$content = Jetpack_Photon::filter_the_content( $content );
	}

	return $content;
}

I can’t really tell without looking at the theme’s code, but this is most likely caused by how your theme injects the extra img tag, after the page was loaded, via Javascript I suppose. This happens when Photon is active because Photon then loads your images from our CDN, on a subdomain of wp.com.

You can read more about this error, and find out how to fix it here:
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
https://stackoverflow.com/a/27840082/1045686

I can’t promise that can be applied to your theme, though. You’d have to contact the theme author for help, as they’ll know how they inject these img tags, and how to customize this.

Another alternative would be to implement the whole thing with CSS. Instead of loading 2 images when only one is displayed, it might indeed be better for your site’s performance if you used CSS to create that grayscale hover effect. There are different methods of achieving such a result:
https://gist.github.com/gedankennebel/a4c9367cda02ad7e826f
https://stackoverflow.com/a/7273987/1045686

I hope this helps.

Thanks Jeremy. I’ll reach out to the theme authors. The css method is a great approach where only 1 img tag is provided and the overlay is all css, ie

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
})

Currently the two img tags are the same src so it doesn’t affect payload while still allowing an actual img to be scraped for SEO purposes thankfully but definitely seems to exploit this problem. Again, I’ll let them know, thanks for the support!