You are creating different sizes with optimole. You are relying on optimole and their cdn. Good idea to say this at the start of the video and also list the limitations of optimole for large qty image websites.
That's a good point, this method is relying on the Optimole CDN. Shortpixel Adaptive Images in the other solution I've found which seems to deliver dynamically sized and formatted images on the fly. These appear to be different than other image optimization plugins which offer CDN delivery, but don't necessarily deliver pixel perfect images on the fly. Definitely at the mercy of the Optimole CDN here, but we've achieved great scores with it and kept our website server footprint small.
This is awesome, very clear explanation! As a novice, I do have a question though. After doing this, how can you ensure that it also happens for the photos already present on your website? So that you maintain a clean database?
Watch this, it has the answer! Force Regenerate Thumbnails should clean things up after you configure Optimole. Back up first! th-cam.com/video/XSLpuofJd4k/w-d-xo.html
I was very excited when I saw this video. Looked like an instant fix for mobile issues coming from images. Unfortunately for me in my tests, I was unable to replicate such great results. I did implement the child theme and eliminate all the image sizes however. I found I could implement similar results using my current stack (Shortpixel and WP Rocket) and no great improvement with Optimole. Thanks for the info, it was very helpful in digging deeper into these issues.
Shortpixel Adaptive Images + WP Rocket should yield similar results as it behaves like Optimole (I only discovered this after making the video). However, there is also a delay after configuration before the results are likely to kick in. I've had to visit the site and then wait awhile for the page speed tests to notice the changes. Still, there are many other reasons sites can be slow, maddeningly! Thanks for the comment, and I'm bummed this didn't help your scores more. At least your uploads footprint should be smaller since de-registering the images should work with Shortpixel Adaptive Images as well. Please share any insights you come across as this method isn't perfect.
@@4RI3L I used to use a couple other FTP clients in the past until I found out they were storing passwords in an unencrypted XML file. Transmit seemed to have better security and has always worked well. I can even drag and drop from site to site. This image method seems to be working well if I lazy load all images. Lately, I've been unloading all image sizes and controls which work fine. However, certain Elementor widgets still show image controls and I'm not sure how to hide them. I also noticed ACF wanted to use an image size for previewing image fields, but it didn't know what to get because I had de-registered those sizes. It still shows an image on the backend, but I'm not sure how it is choosing the size. Anyhow, let me know how this method goes if you try it. I'm loving the clean uploads folders and higher page speed scores.
So sorry, I just noticed this. Optimole can certainly optimize those Woo images. Deregistering their creation will take some extra work. I don't have the file sizes handy, but I think you can find them with a web search and then amend the code. I'd look it up, but don't have time at the moment. Deregistering the controls and all image sizes isn't perfect, but it's helped my sites a ton. If anyone has suggestions for improvements, I'd love to hear them.
I rarely comment on videos but this was exceptional. I was experiencing the same frustrating issues and I'm going to try this on my next site. Thanks for posting.
Joel, I'm very glad to see this and appreciate you taking the time to leave a comment. After some more experimenting, I think it is also possible to remove the "full" sized image from the Elementor controls since Optimole does all the work. I tried this approach on a recent build and got 97 mobile, 100 desktop on Google! I even used Typekit fonts and got away with it. This method has reliably been getting 70s-90s mobile and 90s-100 desktop so far when combined with some thoughtful choices about plugins, SVGs, and design. Let me know how it goes for you!
great! I just saw the "Setup Elementor Typography" video and now this... been obligated to subscribe! Question: I think I got it, to a new site... but to apply it in to an old one, should I erase every image and then start all over with this method or is it a better way? Thanks man, your happy new sub from Chile
Good question Emilo. I'm currently experimenting with a way to clean out all the duplicate files from the uploads folder without causing problems (my first try failed). However, it shouldn't be necessary to do this. Optimole should work and start doing its thing right away and then you can change the media sizes and update your functions file. Finally, you can use WP Rocket or some other optimization plugin if desired. All of the existing image duplicates will still be sitting in your uploads folder, but Optimole creates and delivers optimized images from its server. Just be sure to enable lazy loading for all images so Optimole will add a canonical header crediting your site and not their server for the image. Hope it works!
I've not tried to de-register WooCommerce image sizes, so I'm not sure. This approach is 100% clean. I still notice certain Elementor controls on widgets which try to indicate image sizes or plugins which want to use them. For example, ACF image fields want to pick an image size for previewing custom field images on the backend. I set this to a % width to get around it. However, page speed scores and the uploads folder are WAY better using this approach so I'm still running with it. Besides Optimole, Shortpixel Adaptive Images does well with this approach.
Super helpful! It looks like the only lazy load setting you didn't activate was the native lazy load option. Why didn't you choose that one? Also, have you tried the smart cropping feature? Does that work at all? Thank you so much for making this. It was awesome to learn your favorite plugins for getting such great scores.
Thank you Steve. Great questions. I don't have a good answer for not trying native lazy load other than many plugins offer me a lazy load option and native lazyload may not be supported on all browsers (or is it?) so I just say "no" to all except Optimole to avoid any conflicts. Perhaps the native option would fall back to Optimole? Not sure, happy for any advice on this! I've never tried smart cropping as I tend to use the object-fit: cover option for most of my images, but that's another feature I haven't really explored and may be misunderstanding or missing out on!
@@muhammadaslan6256 I'm using the Hello Theme so I'm not sure what other themes will do in their functions. You might also try the Code Snippets plugin (wordpress.org/plugins/code-snippets/). The free version will let you place PHP snippets using the plugin so you don't have to try to do so in a child theme.
Seems crazy! Why not simply learn how to use the image size drop down options correctly. You cannot compare Optimole vs no Optimole when in the same comparative test add a cache. And offloading your media to a 3rd party is full of risk. W3 Total Cache with sensibly scaled images in the first place will ensure SEO and media remains on your site and yield significant speed improvements. Sponsored by Optimole😂
Thanks, I'm glad W3 Total Cache works well for your use case. There is often more than one way to solve a "problem". We've had good results with this Optimole method. Shortpixel Adaptive Images does something similar: delivering perfectly sized images on the fly in the best format a user's browser can handle. This is done without creating bloat on the website in the form of duplicate images per upload and removes the problem of picking a dropdown size and it still not matching the image size on page due to browser size. As for the third party image hosting, Optimole has an option to keep a version of the image locally, on their CDN, or both, and is supposed to add some sort of an image header to lazy loaded images so the SEO credit goes back to the source site's image in the uploads folder. So yeah, Optimole fan here. 😄
You are creating different sizes with optimole. You are relying on optimole and their cdn. Good idea to say this at the start of the video and also list the limitations of optimole for large qty image websites.
That's a good point, this method is relying on the Optimole CDN. Shortpixel Adaptive Images in the other solution I've found which seems to deliver dynamically sized and formatted images on the fly.
These appear to be different than other image optimization plugins which offer CDN delivery, but don't necessarily deliver pixel perfect images on the fly.
Definitely at the mercy of the Optimole CDN here, but we've achieved great scores with it and kept our website server footprint small.
This is awesome, very clear explanation! As a novice, I do have a question though. After doing this, how can you ensure that it also happens for the photos already present on your website? So that you maintain a clean database?
Watch this, it has the answer! Force Regenerate Thumbnails should clean things up after you configure Optimole. Back up first!
th-cam.com/video/XSLpuofJd4k/w-d-xo.html
@@KingGrizzly thank you sir 🙏 I will do that!
I was very excited when I saw this video. Looked like an instant fix for mobile issues coming from images. Unfortunately for me in my tests, I was unable to replicate such great results. I did implement the child theme and eliminate all the image sizes however. I found I could implement similar results using my current stack (Shortpixel and WP Rocket) and no great improvement with Optimole. Thanks for the info, it was very helpful in digging deeper into these issues.
Shortpixel Adaptive Images + WP Rocket should yield similar results as it behaves like Optimole (I only discovered this after making the video). However, there is also a delay after configuration before the results are likely to kick in. I've had to visit the site and then wait awhile for the page speed tests to notice the changes.
Still, there are many other reasons sites can be slow, maddeningly!
Thanks for the comment, and I'm bummed this didn't help your scores more. At least your uploads footprint should be smaller since de-registering the images should work with Shortpixel Adaptive Images as well.
Please share any insights you come across as this method isn't perfect.
Awsome!! Im doing this. Can You tell me what FTP client are You using?
I prefer using Transmit.
@@KingGrizzly it looks super clean. Anyways thanks for the video (i was strugling with this topic for few days).
@@4RI3L I used to use a couple other FTP clients in the past until I found out they were storing passwords in an unencrypted XML file.
Transmit seemed to have better security and has always worked well. I can even drag and drop from site to site.
This image method seems to be working well if I lazy load all images.
Lately, I've been unloading all image sizes and controls which work fine. However, certain Elementor widgets still show image controls and I'm not sure how to hide them.
I also noticed ACF wanted to use an image size for previewing image fields, but it didn't know what to get because I had de-registered those sizes. It still shows an image on the backend, but I'm not sure how it is choosing the size.
Anyhow, let me know how this method goes if you try it. I'm loving the clean uploads folders and higher page speed scores.
Great video, What is the best approach for the images in woocommerce ?
So sorry, I just noticed this. Optimole can certainly optimize those Woo images. Deregistering their creation will take some extra work. I don't have the file sizes handy, but I think you can find them with a web search and then amend the code. I'd look it up, but don't have time at the moment.
Deregistering the controls and all image sizes isn't perfect, but it's helped my sites a ton. If anyone has suggestions for improvements, I'd love to hear them.
hi, does Optimole have the feature of image lazy loading?
Yes, it does. I highly recommend it. They have good support too. If you try it out, I'm happy to suggest settings which work well on our builds.
I rarely comment on videos but this was exceptional. I was experiencing the same frustrating issues and I'm going to try this on my next site. Thanks for posting.
Joel, I'm very glad to see this and appreciate you taking the time to leave a comment. After some more experimenting, I think it is also possible to remove the "full" sized image from the Elementor controls since Optimole does all the work. I tried this approach on a recent build and got 97 mobile, 100 desktop on Google! I even used Typekit fonts and got away with it. This method has reliably been getting 70s-90s mobile and 90s-100 desktop so far when combined with some thoughtful choices about plugins, SVGs, and design. Let me know how it goes for you!
great! I just saw the "Setup Elementor Typography" video and now this... been obligated to subscribe! Question: I think I got it, to a new site... but to apply it in to an old one, should I erase every image and then start all over with this method or is it a better way? Thanks man, your happy new sub from Chile
Good question Emilo. I'm currently experimenting with a way to clean out all the duplicate files from the uploads folder without causing problems (my first try failed). However, it shouldn't be necessary to do this.
Optimole should work and start doing its thing right away and then you can change the media sizes and update your functions file.
Finally, you can use WP Rocket or some other optimization plugin if desired.
All of the existing image duplicates will still be sitting in your uploads folder, but Optimole creates and delivers optimized images from its server.
Just be sure to enable lazy loading for all images so Optimole will add a canonical header crediting your site and not their server for the image.
Hope it works!
@@KingGrizzly Thanks! That makes total sense.
can you remove the woocommerce img sizes too?
I've not tried to de-register WooCommerce image sizes, so I'm not sure. This approach is 100% clean. I still notice certain Elementor controls on widgets which try to indicate image sizes or plugins which want to use them. For example, ACF image fields want to pick an image size for previewing custom field images on the backend. I set this to a % width to get around it.
However, page speed scores and the uploads folder are WAY better using this approach so I'm still running with it. Besides Optimole, Shortpixel Adaptive Images does well with this approach.
Super helpful! It looks like the only lazy load setting you didn't activate was the native lazy load option. Why didn't you choose that one? Also, have you tried the smart cropping feature? Does that work at all? Thank you so much for making this. It was awesome to learn your favorite plugins for getting such great scores.
Thank you Steve. Great questions.
I don't have a good answer for not trying native lazy load other than many plugins offer me a lazy load option and native lazyload may not be supported on all browsers (or is it?) so I just say "no" to all except Optimole to avoid any conflicts. Perhaps the native option would fall back to Optimole? Not sure, happy for any advice on this!
I've never tried smart cropping as I tend to use the object-fit: cover option for most of my images, but that's another feature I haven't really explored and may be misunderstanding or missing out on!
Optimole mentions: "When using browser native lazyload the auto scale feature is disabled ." I do want auto scale so I'll leave native lazy load off.
Thank you very much for this and your other videos, great no fuss explanations and very helpful solutions!
dosen't work with me why ?
Happy to give some ideas, but you'd need to provide more details about what you are trying.
Maybe iam try it with child theme function file was work this mean the issuse was iam get because iam try added on normal function file from the theme
@@muhammadaslan6256 I'm using the Hello Theme so I'm not sure what other themes will do in their functions. You might also try the Code Snippets plugin (wordpress.org/plugins/code-snippets/). The free version will let you place PHP snippets using the plugin so you don't have to try to do so in a child theme.
Amazing tutorial! Big thanks for such video you shared is completely outstanding :)
Thank you Zamil, please let me know if you try this method and if it works for you as well!
Perfect
Seems crazy! Why not simply learn how to use the image size drop down options correctly. You cannot compare Optimole vs no Optimole when in the same comparative test add a cache. And offloading your media to a 3rd party is full of risk.
W3 Total Cache with sensibly scaled images in the first place will ensure SEO and media remains on your site and yield significant speed improvements.
Sponsored by Optimole😂
Thanks, I'm glad W3 Total Cache works well for your use case. There is often more than one way to solve a "problem".
We've had good results with this Optimole method. Shortpixel Adaptive Images does something similar: delivering perfectly sized images on the fly in the best format a user's browser can handle. This is done without creating bloat on the website in the form of duplicate images per upload and removes the problem of picking a dropdown size and it still not matching the image size on page due to browser size.
As for the third party image hosting, Optimole has an option to keep a version of the image locally, on their CDN, or both, and is supposed to add some sort of an image header to lazy loaded images so the SEO credit goes back to the source site's image in the uploads folder.
So yeah, Optimole fan here. 😄
@@KingGrizzly sponsored by Optimole 🤣
Was all good till the coding showed up! At least WP won't be nesting all those files! Thanks!