Jetpack Photon and EWWW compatibility issues

why didn’t Photon use the (JPG) featured image generated by EWWW

Photon caches all your images once, when you upload them and insert them into your posts. If they’re optimized later on by a plugin like EWWW, it will be too late. Photon has already cached an old version of the image, and will do all optimizations based on that one.

why did it resize the image differently?

That’s a good question. Could you point me to one of the posts where you experienced the issue, so I can take a closer look?
If you want your site URL to remain private, you can also contact us via this contact form:
https://jetpack.me/contact-support/

Thanks for the response. Regarding the caching: this was a new post, so EWWW immediately generated the images, not later on. So Photon should have cached the correct version (which it in fact did for the other resized images). What I can say is that the featured images have the same size as the “large” image (max width 625 pixels and max height 9999 pixels). But the large image was handled correctly by Photon in the sense that it was also a JPG. It’s the featured image that Photon created from scratch.

I’ll look into sending you a link, the website currently isn’t using Photon though. Would you have enough data available if I give you the links to all the different images from Photon and the ones generated by EWWWW? My third question (Photon serving larger files when it doesn’t need to) is probably the biggest issue preventing me from using it at the moment, so I’d appreciate reading your thoughts on that.

this was a new post, so EWWW immediately generated the images, not later on. So Photon should have cached the correct version

That’s correct, it should work. I’m not sure why Featured Images behave differently on your site. It is most likely linked to the way your theme generates and displays Featured Images on your site, so I would need to know more about your theme to run some tests and find out more.

Would you have enough data available if I give you the links to all the different images from Photon and the ones generated by EWWWW?

Could you let me know the name of your theme, and maybe post a link to where I can download it and run some tests?

My third question (Photon serving larger files when it doesn’t need to) is probably the biggest issue preventing me from using it at the moment, so I’d appreciate reading your thoughts on that.

Photon generates images on the fly, and always starts from the original image (it can be the one generated by EWWWW if you’ve configured EWWWW to automatically optimize your original images on upload). The image is then resized and optimized to match your needs in a particular view: if you’re looking at a post on a Retina or HiDPi device, Photon will try to use a larger version of the image if one is available. If you’re looking at a post on a mobile device, a new image will be generated based on the new width.

I hope that explains a bit how Photon works.

Perhaps I misunderstand what you mean by “original” but that explanation doesn’t quite match what I’m seeing here. Judging from the filenames generated by Photon, it seems to me that all the resized versions of the image are uploaded to Photon, and that Photon then tries to find a match for the required resolution. That’s why I’m seeing these urls:

Original: …/image.png?resize=1280%2C720
Featured: …/image.png?fit=625%2C9999
Large: …/image-625×352-1.jpg?resize=625%2C352
Medium: …/image-300×169-1.jpg?resize=300%2C169
Thumbnail: …/image-150×150-1.jpg?resize=150%2C150

So that’s why I found it odd that the featured image didn’t use the same url as the “Large” image, and instead generated a new image from the original PNG file. And that’s also why I don’t quite understand that, if it does find an exact match, that it seems to recompress the image anyway and returns a larger file (except for the original image, that seems to be exactly the same as generated by EWWW).

In any case, I’ll send you the links to the images and my website through the contact form, that should clarify what I mean.
EDIT: I just submitted the support request with more details.

the featured image didn’t use the same url as the “Large” image, and instead generated a new image from the original PNG file.

That’s what I meant by “original”. Photon only takes one image into the account, and that’s the image that is first uploaded from your computer to your site. We do this so we can use a larger version of the file if needed.

It might be easier to explain with an example:

Say your Featured Images fit in a 200x200px area on your site.

• If someone visits your site from a standard laptop, Photon will generate a 200x200px image to use in that spot. It will generate that image by taking the original image you uploaded to your site, and optimize it to get a smaller image that fits the dimensions required. This way, even if none of the image sizes generated under Settings > Media match this 200x200px setting, your reader will get the right sized image.
• Now imagine that one of your readers visits your site from a MacBook Air, an iPad, or a Google Nexus 9. These are Retina / HiDPi devices, that have a higher pixel density. That means that these devices can display larger images in the same screen real estate. If you don’t handle such cases, your visitors on such screens will see that 200x200px image, scaled up to match the resolution of their screen. In most cases, the images end up being a bit pixellated or blurry. Photon, on the other hand, will again start from the original image, and generate a new, bigger, image that will match the Retina resolution. Depending on the version of your Retina or HiDPi device, that image could be 400x400px, for example.

I hope that clarifies things a bit. Since you also sent me an email, we’ll be able to use your site as an example and that should help us both understand what’s happening on your site. Either me or one of my colleagues will get back to you soon!

I understand the example. I thought the filenames indicated that it was using the resized images from EWWW, but then I was drawing the wrong conclusion. Does that mean Photon also converts PNG to JPG, just like I’m doing with EWWW? Because then, I’m again confused why it’s returning the featured image as a PNG file, while the other resizes are in fact returned as a JPG file? Sorry for all the questions, just trying to wrap my head around this.

Does that mean Photon also converts PNG to JPG, just like I’m doing with EWWW?

No, Jetpack doesn’t convert files. That’s where EWWW is handy!

Okay, but in that case I’m puzzled as to why Jetpack is serving JPG files, despite the original being a PNG. Using Photon, the original and the featured image are a PNG, but “Large”, “Medium” and “Thumbnail” are JPG. Since Jetpack doesn’t convert files, I’d expect all to be PNG…

Okay, but in that case I’m puzzled as to why Jetpack is serving JPG files, despite the original being a PNG.

I assume that’s because the original was converted by EWWW when you uploaded it. Jetpack uses the image that’s uploaded to your media library, but if a plugin like EWWW changes the image before it’s added to the media library, Photon will use that modified image.

Yeah, but that’s the problem, the original was still a PNG :/ EWWW is set to only convert the featured image, large, medium and thumbnail to JPG. So if I upload a PNG, it will still store the PNG as the original. And that’s the image being sent to Photon. So here’s the situation on my local webserver after uploading an image:

Original: PNG
Featured, Large, Medium, Thumbnail: JPG

And here’s what I get from Photon:

Original, Featured: PNG
Large, Medium, Thumbnail: JPG

And that has me terribly confused because from your explanation, all the five images from Photon should be of the same type (in this case PNG).

At this point it would probably be easier if I had exact examples to work from. I’ll look for the email you sent us via the contact form and reply there.

Okay, so after getting more information from the Jetpack team, I think we can conclude the following:

– The problem with Jetpack delivering different types (both PNG and JPG) is related to WordPress renaming the file because one with the same name already existed. It adds a “-1” to the filename in that case, and apparently that’s what caused Photon to not always use the original image as a starting point to generate the other ones.
– EWWW and Photon aren’t all that compatible. The only benefit you’ll get out of using EWWW with Photon is an optimized original image. All the other resized images are made by Photon, so there’s no point in letting EWWW generate those. If you’re like me, and you don’t compress the original images, then there’s very little benefit in using the two together. However, since Photon is serving the images anyway, file size doesn’t really matter, outside of getting a higher Pagespeed score. It also means the server has more time to handle other requests.

Conclusion: Photon, for being free, is rather awesome. EWWW offers superior compression, but this only really matters when you’re not using a CDN. If you’re using Photon, EWWW offers little added value. They also have a great support team ??