Getting your Image Sizes right with Wordpress and Elementor

Watch the updated video instead:
• Getting your Image Siz...
Adding just one image to be used in Wordpress and Elementor, and then shown on a Desktop, Tablet and Mobile doesn't always work well.
Especially when they appear blurry, or you've lost some detail.
"Cringe".
Let's have a look at how you can use multiple images/scaling/and checking the pixel size needed to get it right.
A free online tool I also use: www.rapidtables.com/web/tools...
PS: websquadron.co.uk
PPS: Don't miss out on our amazing Create a Website in One Weekend Course - and it comes with a FREE Elementor Pro License!! websquadron.co.uk/createwebsi...
PPPS: Contact us for any questions or to collaborate.
PPPPS: I must stress that we only build with Elementor and no other Page Builder.

[@websquadron]

Watch the updated video instead: kzbin.info/www/bejne/jJjNY5Kcg7uNbNk

[@carlosp.1846]

when i look for something i often find it on your channel! Thanks!

[@websquadron]

Happy to hear that!

[@jellyrolle95]

I couldn't understand why my pictures were being cut off. Downloaded your recommended plug-ins and problem solved. Thanks! 🙏🏿

[@NewinAI]

Decided to watch your most popular videos:) So this is the #3

[@kimwold]

awesome info!! thanks a lot :)

[@websquadron]

My pleasure!

[@brothercaleb]

Very helpful video 👏🏽👏🏽👏🏽

[@borisnieminen677]

Great tutorial, thanks for posting. How does designing for Retina display fit into the image resizing narrative?

[@websquadron]

This is often tricky depending on sizes - but until I hit a brickwall I keep doing it. I've found that trying to satisfy all methods/displays messes up my head.

[@johnboyd8053]

This helps to clear some issues I've been having, so Thank You! Something totally unrelated...How did you create the cartoon-like pictures of yourself in your media library? That's something I'd like to try and I too am on a Mac computer. Thanks for any info you can provide.

[@websquadron]

Here you go - great work by this guy :) www.fiverr.com/s2/6cdbd0dd62

[@johnboyd8053]

@@websquadron Thank you!

[@williamsestateagents-heref4862]

do u just click on the mobile icon and then insert another image?? i thought this would delete the image from the desktop then...

[@websquadron]

Only for the mobile view

[@vx-petia]

Cool video, thanks!

[@websquadron]

You bet!

[@saucydee1]

Genius! I've been trying to figure out image sizes and just been kind of winging it through trial and error. Do you still use those plugins to compress and convert to webp.

[@websquadron]

I don't use them now. I use Bulkresizephotos.com for all of that.

[@KevsGuide]

great info mate. i previously heard that PNG and JEP were simmillar in size. how do you have some pics show in desktop and different ones in mobile?

[@websquadron]

When you go to the Mobile View, you have the option to switch images. See this for a more up to date view on images and WebP format: kzbin.info/www/bejne/fKDSloyugLerbpI

[@MariaFernanda-sh6he]

Thanks!!!

[@gijeet5374]

Just so I understand, I have a background image selected for desktop which is sized for desktop. Then I click on the mobile view at bottom of Elementor and remove the desktop image and select the image sized for mobile? Is that how it's done?

[@websquadron]

Yup It’s more a case of replacing that removing

[@christianlecuyer6380]

Thank you

[@websquadron]

Hope it helped :)

[@christianlecuyer6380]

@@websquadron I was doing it the right way, it's just that since I change to a 32 inch screen, sometime the image was a bit blurry when I used a 1920 X 1080 so I started to make them at 2200px wide, I know that not everybody who has a big screen... About the WP dashboard image size, should we change the default? Thanks Imran 🙂

[@websquadron]

@@christianlecuyer6380 I set the WP Default Media Settings to all be 0 and Uncheck the boxes - so that multiple copies are not created in the backend of WP Contents or taking up my Server Inodes.

[@blessyeecottonsocks]

Think this video should have been heavily edited to correct your mistakes. I lost track very quickly. Also why would you not start elementor with a clean page? More confusion.

[@websquadron]

Thanks for that

[@websquadron]

Watch the updated video instead: kzbin.info/www/bejne/jJjNY5Kcg7uNbNk

[@ProCleanServices]

Even though some of the images are hidden based on the view, isn’t the hidden image still technically within the page? And therefore still slowing down the page? (Even though it’s not being shown)

[@websquadron]

Not if it’s WebP and not too big.

[@ProCleanServices]

@@websquadron I guess what I’m saying is… do the hidden images “still count” in terms of the page loading

[@CAFLORES03]

@@ProCleanServices This is what I'm wondering too. The image is still in the backend and, if anything, adding multiple versions of the same image would bog the load time down more than a single version of the image displayed in multiple sizes with breakpoints. Having 3 or 4+ versions of the same image in the Media manager just seems super inefficient. Let me know if you ever found a simpler solution mate.

[@vikiw5996]

gosh im so confused, which order do i use the plug ins? images to webP and then PNG to Jpeg? Can anyone please explain what does what? thanks

[@websquadron]

That’s an old video. Best to use Bulkresizephotos.com to convert all images to WebP. Don’t use plugins anymore.

[@websquadron]

kzbin.info/www/bejne/r6HMZGyXhp2AmqM

[@dreamyachts4828]

So what you are saying is that I more or less always need to upload the same image twice if I am to use it on mobile and desktop?

[@websquadron]

Only if it's needed for full screen.

[@dreamyachts4828]

Ok but I may have one place on my page where I use it full screen and on another in a smaller gallery for example?

[@websquadron]

@@dreamyachts4828 In that case a smaller version would be advised unless your page speed is fine.

[@dreamyachts4828]

@@websquadron Thanks Champ but not a wizard like you so I hope it will be ;)

[@digitalmurph4114]

Im confused about how this relates to the fact that Wordpress already generates responsive images, which you can see when you look in the inspector. What am I missing? Thanks

[@websquadron]

Because you may need them to be certain aspect ratios when viewed on the mobile.

[@digitalmurph4114]

@@websquadron Thanks for answering. OK I understand. But if I was only bothered about width, and happy for height to remain auto, then I could just let wordpress generate the different sizes instead of doing it myself. Would that be correct?

[@audunjemtland8287]

Is there a way to make ONE size for all tablet, desktop and mobile? Universal size so to speak.

[@websquadron]

Yes, if you size it that way.

[@hijamanachbach]

I can save in JPG right away in Canva, so why using PNG to JPG?

[@websquadron]

PNG is higher resolution. And then you can convert to WebP.

[@JamesXavier_]

thanks for the info keep going ñ_ñ

[@websquadron]

Always!

[@funnellsites1557]

I'm even more confused than before

[@stevesvideosalesletters4446]

you really haven't helped me at all. My image is too big for the thumbnail. I tried to edit and reduce it but it doesn't save the new size,

[@websquadron]

I'm sorry? I can't comment on exactly what you or are not doing because I've never seen your site or worked with you before. Please feel free to unsubscribe.

[@drasiflatif6088]

You need to put video viewer friendly rather your own friendly.

[@websquadron]

That is an old video. Does my recent content satisfy you?

[@javierramon4050]

cual es la conclusion, has escarbado como la gallina aqui, alla y mas alla y al final nada

[@websquadron]

Not sure what you said there :)

[@user-jj9eh6nr4g]

DO WE NEED TO DO ALL THIS MESS? OR WE CAN JUST USE BULK RESIZE?

[@websquadron]

This is more for messing around with cropping or scaling inside Wordpress Media Library. PS, your Caps Lock is stuck.

[@user-jj9eh6nr4g]

@@websquadron It´s not! just wanted to get your attention! it worked ahah! Thanks for the reply! one question: what´s your opinion on imagify? Do you use it at all?

[@khaido794]

Please go to the point directly

[@websquadron]

I’m quite okay doing it my way.

[@websquadron]

Watch the updated video instead: kzbin.info/www/bejne/jJjNY5Kcg7uNbNk

[@wigramdigital]

Very confusing video Imran. Your explanation is all over the place. You should do a new succinct video showing exactly how you do a real workflow on your images.

[@websquadron]

That is an old video and we did an updated version last month

[@Joker-Leto]

i wish you didn't talk so much .. .. just saying!!

[@websquadron]

Cheers.

[@odysiuss]

you cannot try to teach someone a subject if you do not understand the subject yourself you confused my brain

[@websquadron]

What are you even talking about? Care to explain?

[@websquadron]

Watch the updated video instead: kzbin.info/www/bejne/jJjNY5Kcg7uNbNk