Image Resizing

>>> Images are NOT being resized by Jetpack Photon? It shows in Pagespeed Metrics. How to avoid it?

Site: [ redundant link removed ]
Check out suggestions in Pagespeed > Defer OffScreen images.

• This reply was modified 3 years, 5 months ago by akiraanastasia.
• This reply was modified 3 years, 5 months ago by Jan Dembowski.

Hi @akiraanastasia

Jetpack’s Photon downloads, optimizes, and serves a cached version of each one of your images. However, the size of the final, optimized image still depends on how big the original image was; if your original image was very big, the optimized image will be smaller, but still too big for Google PageSpeed Insights. To solve that issue, we’d recommend that you optimize your images before to upload them to your site. No need to upload images that will be larger than 2M, for example. Ideally, your images shouldn’t be larger than 1M.

Google Pagespeed Insights or other tools like Gmetrix will often return a warning if it finds images that include a query string, because it thinks that means that the original image is loaded and then resized in the browser. Photon images do include a query string (that’s the ?resize=400×400 you’ll find on most images), but we actually cache the resized version of the image on our CDN, so the image that’s served on the site is in fact optimized. No need to worry there.

Hello, there.

I do see that you have Jetpack’s Lazy Loading feature on, which is what Google is recommending, there. However, something must be blocking or conflicting it.

I see you have a few code crunching plugins (wp-rocket and wp-optimize), a couple image manipulating plugins, a few security plugins – there appears to be a lot of possible conflicts between similar plugins here, and that could cause items like Lazy Loading to not work properly.

As a first step here, I would recommend using only one plugin for optimizing your code (or remove what you have now and just use Jetpack’s built-in site accelerator), one plugin for security, and only one plugin or feature for images (right now, you have Jetpack’s CDN but WP-Smush It is also trying to do the same actions).

Once you trim down your plugins to exclude any duplicated features, try giving Google another test and see if anything has improved.

I stopped Jetpack CDN and loaded images from server. Then this problem was gone. Means WP rocket resized images whenever needed. So its only conflict with Jetpack and other plugins?

@madhattersez Also, I would like to know how you detected all plugins from site?

Hi @akiraanastasia

If another plugin offers the same functionality as one of Jetpack’s features, a conflict is very possible and that sounds like what happened here.

What you can do is reactivate Jetpack and disable Lazy Images and / or the Site Accelerator options (specifically ‘speed up image load times’):

https://jetpack.com/support/lazy-images/
https://jetpack.com/support/site-accelerator/

If there was a conflict between Jetpack and another plugin that had any of those features, then either deactivating the other plugin or disabling those features in Jetpack should resolve the issue (and allow you to continue using Jetpack’s other features).

You also asked how we detected plugins – one of the features of Jetpack is the ability to manage plugins, which means the Jetpack plugin (when connected) can see what other plugins are active on a site. In order to troubleshoot Jetpack connection issues only information directly relevant to the Jetpack connection is available to plugin support.

If you are able to test the page speed with Jetpack active and disabling those specific features, do let us know what you find or if you have any other questions around this.

Thanks for answers. I will give update after checking everything.

@akiraanastasia that’s great!

Let me know what you find out and we’ll take it from there if needed. Thanks!

Hello there, One more question:
What is difference between Photon CDN and SMUSH CDN? Both provide same service? Does jetpack can convert images to next gen webp format?

• This reply was modified 3 years, 5 months ago by akiraanastasia.

Hi @akiraanastasia

I took a look at their CDN service and it is much similar but I can’t say anything about how their CDN exactly works behind.

I can provide you information on our CDN, and you can see how it exactly work here: https://jetpack.com/support/site-accelerator/#how-site-acceleration-works

Does jetpack can convert images to next gen webp format?

If the browser supports the WebP image format, images will be automatically served as WebP (note that the extension won’t change).

In practice, that means that when you add an image block to a post with an image like:

• https://example.com/wp-content/uploads/2021/01/image-file.png

Jetpack’s CDN will serve a matching image from its CDN instead, like so:

• https://i2.wp.com/example.com/wp-content/uploads/2021/01/image-file.png?resize=768%2C769&quality=100&ssl=1

As you can see, WebP is not on the file extension list. That doesn’t mean that Jetpack’s CDN doesn’t support the WebP format; it just does things a bit differently. Jetpack doesn’t actually require that you upload and store WebP images on your server. Instead, it detects when a site visitor browses your site using a browser that supports WebP (like Chrome) and serves them images that have been optimized to use the WebP format.

More info can be found here: https://jetpack.com/support/site-accelerator

I hope that helps! ??

Hi @akiraanastasia

It has been more than one week since we have heard from you, so I’m marking this topic as resolved. But If you have any further questions or need some more help, you’re welcome to reply here or open another thread.