Thanks for the tip on the Chrome Developer tools. I've read so many articles on image compression, but this is the first useful one to troubleshoot a site. This video series is gold.
In the first video of the playlist , you added a dark overlay to the hero images in elementor to ensure the text was readable over it. If you instead apply this overlay in photoshop as a semi-transparent rectangle, then export and optimise, you'll reduce the image file size even further, achieve the same effect, and have one less piece of html and css on the website.
@@emreergul2218 I guess in some outside cases applying the overlay makes sense... Like if the client has to be able to add images to the section later, maybe. But for any set images it makes sense to apply it before.
For those of us who change their minds frequently (or who have clients who change their minds), the reason to avoid overlaying via PS is that is then part of the image and you cant make changes to the overlay intensity / colour etc without making another trip to photoshop and doing it all over again.
Thank you for this! We are working on our Wordpress Website and really needed this quick information before batch optimizing all our images abd uploading them! Thank you!
Is it better to have a separate mobile view image? My hero section will be the same picture so do I need to have a 1920px image for desktop and upload a 700px ish to display on mobile or will add bloat ?
I'm having an issue with the Featured Image shifting. I have the file optimized to a small size, but the featured image is still shifting on loading the page. How do I stop the content shifting?
Great video. Thank you. Is there a recommended method to do bulk optimization without using a plugin? Any tool(s) that has a better option outside of optimizing one by one - like if I wanted to make multiple photos the same size and % reduction?
Hi - I need oyur help. Somehow I got my picture pixelated when loading on website - and it gets full quality just after its fully loaded. And I have no idea know I did it :D But I like it. I was reducing size and quality of photos in photoshop - but I dont know which option it was :( I think its much better to load pixelated picture that will go full quality than to wait for whole clear images.... Any ideas please???
Hi , I recommend posting your question in the Elementor Community Facebook group. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314
![[03] Additional Performance Boosts](http://i.ytimg.com/vi/pM_b3OfpG9I/mqdefault.jpg)
![[03] Additional Performance Boosts](/img/tr.png)
![[01] Layout Optimization Best Practice](http://i.ytimg.com/vi/vBAKGupM0co/mqdefault.jpg)
![[05] Optimizations With Third Party Tools](/img/n.gif)
Thanks for the tip on the Chrome Developer tools. I've read so many articles on image compression, but this is the first useful one to troubleshoot a site. This video series is gold.
In the first video of the playlist , you added a dark overlay to the hero images in elementor to ensure the text was readable over it. If you instead apply this overlay in photoshop as a semi-transparent rectangle, then export and optimise, you'll reduce the image file size even further, achieve the same effect, and have one less piece of html and css on the website.
Thanks
I've always thought about that in every single web dev. video on UA-cam which puts an overlay on an image, i wonder why nobody applies that.
@@emreergul2218 I guess in some outside cases applying the overlay makes sense... Like if the client has to be able to add images to the section later, maybe. But for any set images it makes sense to apply it before.
photoshop be pricey. I think that is why tbh
For those of us who change their minds frequently (or who have clients who change their minds), the reason to avoid overlaying via PS is that is then part of the image and you cant make changes to the overlay intensity / colour etc without making another trip to photoshop and doing it all over again.
PERRRRRRFECT!!! No item skipped! Very wel explained. I really THANK YOU, not only fr this video, but for all you make.
After watching numerous videos on preparing images THIS IS THE BEST!!!
Hey Ash 👋great website performance optimization series! Thanks for mentioning Smush in this video ✌
Hello!!!!! I've seen two of your videos now, and they are great. I hope you continue making more. Thank you.
Thank you for this! We are working on our Wordpress Website and really needed this quick information before batch optimizing all our images abd uploading them! Thank you!
Thanks Big story! I love hearing how these videos help users like you. It really makes my day 🤩. Thank you for sharing!
@@Elementor Absolutely! I'm glad to let you know!! Thank you!
How do you go about finding the max width of an image? You say 2000px, but it would be great to know your process :)
Great question. I would also like to know.
Maybe because the width of the monitor screen today generally has a resolution of 1920 pixels. So an image width of 2000 pixels is more than enough.
thank you for the video. Could you explain how you came up with 2000 px width resolution for the hero? Is that the ideal size when building a website?
TINY PNG (though Photoshop my Jam 20 + years) ROCKS 💯 🙌🏻⚡️🎉
Yes, TINY PNG is GREAT!!!!!
What about WebP files for photos instead of jpeg??
This video is gold!
Is it better to have a separate mobile view image? My hero section will be the same picture so do I need to have a 1920px image for desktop and upload a 700px ish to display on mobile or will add bloat ?
What image size settings in the media settings do you recommend for Elementor Hello Theme?
Awesome videos, we need more optimization videos! Thanks a milliom
I'm having an issue with the Featured Image shifting. I have the file optimized to a small size, but the featured image is still shifting on loading the page. How do I stop the content shifting?
Amazing explained, thank you 👍😊
We have a website that includes many photographs in a gallery that changes from month to month. What is the optimal size for these photos?
Is the width standard as 2000px for all full width images. Is this the recommended standard.
Is webp format recommended?
Thank you. This is very helpful!
Super video!
How do you know the exact width that you need?
It kind of depends on where you want to place the image.
@@DaxPegels could you expand on this.
Great video. Thank you. Is there a recommended method to do bulk optimization without using a plugin? Any tool(s) that has a better option outside of optimizing one by one - like if I wanted to make multiple photos the same size and % reduction?
This video from PiXimperfect may help ua-cam.com/video/BlIHilgAyCg/v-deo.html
@@hcf797 thank you so much. I appreciate it.
Lookup batch resize.
Thanks for sharing the knowledge. Very useful.
I'm happy that you found it useful Joe😁💯
What about Retina Images??
Hi - I need oyur help. Somehow I got my picture pixelated when loading on website - and it gets full quality just after its fully loaded. And I have no idea know I did it :D But I like it. I was reducing size and quality of photos in photoshop - but I dont know which option it was :( I think its much better to load pixelated picture that will go full quality than to wait for whole clear images.... Any ideas please???
Hi , I recommend posting your question in the Elementor Community Facebook group. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314
7:39 when you choose Save As > JPEG Options > in Format Options, select Progressive to change how your image loads
Many thanks!!
Amazing explained
usefull tutorial 👍
What about WEBP?
you are best
Really useful! Thanks a lots
Happy to help Merci 😊
Thank you!
Thanks 👌
Elementor needs to add webp format
What about WEBP guys? I thought Google prefer this format more than others...
Just what I was thinking. There's a great free plugin called WebP Express that I've just started using that creates webp files on the fly.
@@9999chippy I use Flying Images. This do the same and the only thing you have to do is activate the plugin 🙂