Optimised images not being used

Hi @danny96

this is Ioanna from Imagify and I’ll gladly assist you here!

This should be the reason for not displaying in the optimized size. Can you please check it without loading it through the code block?

If this is not the case, we need to check this further through our ticket support system.

Thank you!
Best regards
Ioanna

Same thing here. I tell the plugin to
1. Create webp versions of images
2. Display images in webp format on the site

The image does get optimized, but does not create or display a Webp image.

What are we missing?

Hi @danny96 and @sdagency!

Joseph from Imagify here!

I’m thinking that when you upload your images, they are being scaled by WordPress’ Big Image Threshold, which resizes images down to a max of 2560px wide if they are wider, and then adds a -scaled to the end of the image’s name. When this happens, both of the following files will be saved in your wp-content/uploads/ folder:

image1.jpg
image1-scaled.jpg

When this is the case, Imagify only optimizes the -scaled version and leaves the original version unoptimized. When you click an image in the media library, it will list URLs to both the -scaled version and the original image. Are you copying the original image or the -scaled version when you copy the link?

If you want to link to the optimized version of the image, use the -scaled URL.

If you want to use WordPress’ responsive images, then you should use an image block instead of a code block, and you can follow these steps:

1) Click image block in the post editing page
https://jumpshare.com/v/LDHV4de7E5A5NPy8PWtw

2) Select image from your media library or upload one
https://jumpshare.com/v/DdAqyhlvjqKqpILOUjE7

3) If you view the code, this should give you what you need to trigger WordPress’ responsive images
https://jumpshare.com/v/Dl9Okk5OY5oLTvfN2vEU

4) If WebP image display is turned off in Imagify, you should get the following output for the image when you actually view the page:
https://jumpshare.com/v/3LEeqQk298qviEQxHfFb

5) If the “Use <picture> tags” option for WebP display is enabled, then you should get this output so WebP images are displayed for browsers that support them
https://jumpshare.com/v/t8TM8e8f9RijHBlJgYcB

If the “Use rewrite rules” option is used, it will still look like step 4, but the rewrite rules will work in the background to serve the WebP images. You can use this guide for checking that they are being displayed in that case:
https://imagify.io/documentation/how-to-check-if-webp-image-is-displayed-on-your-site/

Let me know how this works for you both, and I’ll be glad to continue assisting if needed!

Best regards,
Joseph

Hi,

It isnt using scaled images as the images I am referencing are much smaller than 2560px.

I cant use an image block, as i have used a js library called ‘slick.js’ so i need to load the images in using links.. does this mean it isn’t possible to use the optimised image this way?

I’m also using Oxygen Builder, so i’m not sure if that makes any difference?

Thanks

Hey @danny96,

If your images are not being scaled, then the original version does get optimized along with all the thumbnails, so this makes it pretty odd that the GTmetrix results are showing that the unoptimized image is being served to the site. If you check the image properties yourself when the image is displayed on your site, does it return the optimized or non-optimized size for you?

Is there any chance you would be able to share a link to the page on which this is happening so I can test this in more detail from my end? It’s a bit difficult to know exactly what could be happening without that.

Or, if you’re not comfortable sharing a link on here, would you be able to open a support ticket with us via the Imagify website? I would share the link, but we’ve had posts removed before, so I’m not sure we’re allowed to do that.

Best regards,
Joseph