Getting your Image Sizes right with Wordpress - Responsive Tutorial - Media Images - Elementor

  Рет қаралды 68,539

Web Squadron

Web Squadron

Күн бұрын

It's easy to get this wrong when adding and using images from your Wordpress Media Library for Websites.
Are you considering device sizes?
Scaling?
Cropping?
Alternate versions for the Desktop and Mobile - or just as standalone image on the page?
NOTE: Since Wordpress 6, WP stopped showing the revised KB size (which can confuse many) - but yes, the size on the page will be the refined/cropped/scaled size.
Getting your Image Sizes right with Wordpress - Responsive Tutorial - Media Images - Elementor
Book your 1-2-1 Consultation: websquadron.co.uk/socials
Media Library Images - Get them right for responsive devices and screens - Wordpress Tutorial
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your KZbin Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Пікірлер: 211
@websquadron
@websquadron Жыл бұрын
NOTE: Since Wordpress 6, WP stopped showing the revised KB size (which can confuse many) - but yes, the size on the page will be the refined/cropped/scaled size.
@keywordniches2207
@keywordniches2207 2 ай бұрын
yes but does wordpress accept webp on the get go or do we need some kind of plugin?
@Gzein
@Gzein 5 күн бұрын
Thank you , how about the size of side (small) Picture in a page ?
@ritabeverige4391
@ritabeverige4391 Жыл бұрын
I was so glad when you went onto Elementor and actually showed what you meant in the page speed boost 2023 video. So easy to do after seeing that
@gorumov7376
@gorumov7376 Жыл бұрын
I was trying to fix this issue for several days. You are golden. You have earned one subscriber. Thank you. :)
@Jason_1010
@Jason_1010 Жыл бұрын
Thanks Imran, these little tips and reminders are always useful, and often contain new methods to help with mobile score.
@bradleylambert3284
@bradleylambert3284 Жыл бұрын
Cheers Imran, really love your videos, loads of useful little tips and I've been using WordPress for 10 years and still learn new things form you, keep it up mate!
@websquadron
@websquadron Жыл бұрын
My pleasure!
@brothercaleb
@brothercaleb Жыл бұрын
You’re totally my hero bro. One word: lifesaver! Subscribed!
@brianmccann6779
@brianmccann6779 3 ай бұрын
This is exactly what I was looking for. Thank you! Thank you!
@CrystalRicotta
@CrystalRicotta Жыл бұрын
A refresh on best practices - dig it ‼️
@umiamira3332
@umiamira3332 5 ай бұрын
Thank you for this tips Imran. You're a great person. God bless you.
@alanshaw7365
@alanshaw7365 6 ай бұрын
You have explained this perfectly. There are so many elements I need to learn as a newbie and this is one area i have really struggled with spending hours cropping sizing in Photoshop much of it to no avail. I really like your idea of doing a separate resize for mobile users, i hadn't really considered that so thank you.
@ThePsychicStylist
@ThePsychicStylist 6 ай бұрын
IT'[S GENIUS!
@fredLOCAL-Business
@fredLOCAL-Business 10 ай бұрын
Thank you. Just what I needed.
@SimiTravels
@SimiTravels 5 ай бұрын
this is gold !! Thank you !
@user-vz9cb7qb1k
@user-vz9cb7qb1k Жыл бұрын
Love the video. Thank you tons.
@YoniaVracheva
@YoniaVracheva Жыл бұрын
Very useful! Thank you a lot!
@ThePsychicStylist
@ThePsychicStylist 6 ай бұрын
My GOD EVERYONE NEEDS THIS VIDEO!!! You just saved me screwing with my elementor page trying to get speeds up. Thank you!! SUBSCRIBED!
@websquadron
@websquadron 6 ай бұрын
Big thanks
@Melissa_Lawrence
@Melissa_Lawrence Жыл бұрын
Your videos have made me want to completely wipe one of my sites so I can start from scratch and pay attention to all these details! It's got to be quicker than going through everything and sorting it all out, especially since I was wanting to do a refresh on this particular site anyway....busy week ahead to say the least lol Loads of love as always Imran, I want you to know how much I and everyone else here appreciate you & the Web Squadron team. Mel 💛
@websquadron
@websquadron Жыл бұрын
Our official Web Squadron site could do with a major clean up but sometimes you got to just let it go and keep it in mind for your next site.
@Melissa_Lawrence
@Melissa_Lawrence Жыл бұрын
@@websquadron true enough.....great point! It'll be one of those things that gets done if ever I find myself with nothing to do lmao Just noticed the relaxing sounding music u have playing in the background of this video - I like it!
@fabrictexture4767
@fabrictexture4767 Жыл бұрын
These are simple tips but more important than the word which is "important" 🙂 . Stay Blessed Imran
@naomikoopmans
@naomikoopmans Жыл бұрын
Amazing video, thank you so much!
@amiebrown7594
@amiebrown7594 Жыл бұрын
Amazing video. Thank you!
@DM10X
@DM10X 7 ай бұрын
Hey IMRAN. Keep the Passionate attitude, it's awesome really well explained Thanks !! :)
@zerorl4481
@zerorl4481 5 ай бұрын
This is quality content, thank you
@gordonbrownlee4436
@gordonbrownlee4436 7 ай бұрын
Another excellent tutorial Thanks
@staceynewstead
@staceynewstead 2 ай бұрын
Aaaa-Mazing! Thank you. I'm a Photoshop user & thought I needed to make multiple versions for my site! Great video!
@websquadron
@websquadron 2 ай бұрын
Glad it was helpful!
@chieduagain
@chieduagain 9 ай бұрын
Fantastic presentation 👏
@job6801
@job6801 Жыл бұрын
Very interesting. I learnt something new. Thanks
@Kestisr
@Kestisr Жыл бұрын
Thx for super information!
@AnimalCareTrust
@AnimalCareTrust Жыл бұрын
You've become my go-to for anything Elementor related. Your videos are idiot-proof. Don't ask me how I know . . .
@Bencaprio
@Bencaprio 16 күн бұрын
THANK YOU SOOO MUCH!!
@ShahatabUddinKhan
@ShahatabUddinKhan 11 ай бұрын
Excellent presentation boss.
@FUnMOJAMAstii911
@FUnMOJAMAstii911 Жыл бұрын
Very Usefull video thanks Boss
@gurudaki
@gurudaki Жыл бұрын
Great info!
@user-pc9xq7kq9w
@user-pc9xq7kq9w 4 ай бұрын
Thank you so much!
@adrahimhasan5162
@adrahimhasan5162 11 ай бұрын
You are a life saver
@md.tanim-ulbariishmam9131
@md.tanim-ulbariishmam9131 2 ай бұрын
Really good video, highly recommended!
@websquadron
@websquadron 2 ай бұрын
Glad you enjoyed it!
@Greg.Mika.
@Greg.Mika. 2 ай бұрын
Hey Imran, so far it seems only possible to swap background images, right? Because I'm trying to swap images directly from the image widget on the mobile screen and it doesn't work (swaps the desktop one too). Any workaround ideas maybe? Cheers.
@geochafg
@geochafg 6 ай бұрын
Nailed it! ❤
@Livingtheglobe
@Livingtheglobe Жыл бұрын
Brilliant mate.
@Rejoin_2023
@Rejoin_2023 Жыл бұрын
Wise words, thanks Imran
@markdudov2508
@markdudov2508 Жыл бұрын
Very useful ❤
@GayalchaminAnjanKumara
@GayalchaminAnjanKumara Жыл бұрын
Love your content man..❤️✌️
@websquadron
@websquadron Жыл бұрын
Thank you 🙌 Do share and let others know about it.
@arrunaahathyala2191
@arrunaahathyala2191 Жыл бұрын
I really like your videos
@anantawasthy7189
@anantawasthy7189 Жыл бұрын
Wow, you just solved a big problem of mine. Thanks a lot
@websquadron
@websquadron Жыл бұрын
You are most welcome
@visualmodo
@visualmodo Жыл бұрын
Excellent content!
@websquadron
@websquadron Жыл бұрын
Glad you think so!
@keywordniches
@keywordniches 2 ай бұрын
great tutorial. You have done a video about grids, correct? with the 33% 66% for 2 columns but then there is a gap between the columns and the layout doesnt look good. I have this similar problem i want to fix. it pushes down my content on my second column, the content is a column with a background image and some text and a button. So i am doing something wrong here. Could you give me the link to that video? thank you
@AnilAgrawal
@AnilAgrawal Жыл бұрын
Awesome 👍🏼
@tilecleaningagents
@tilecleaningagents 6 ай бұрын
Thank you
@UmarKhan-xm6zx
@UmarKhan-xm6zx 11 күн бұрын
Thhanks my lovely bro
@TheIRepax
@TheIRepax Жыл бұрын
Great Video! Love your tips since they are really helpful. Thank you for That! I was wondering if you always have three versions of an image the page speed also suffers because in total there are more images to be loaded? So i you only use one image for desktop and mobile you also only have to load one image?
@websquadron
@websquadron Жыл бұрын
Surprisingly no, as some of the images only load at certain screen sizes.
@stanamster1697
@stanamster1697 Жыл бұрын
Imran, Thank you so much for this video. I have been struggling with page speeds on my personal photography sites for years. I tried your rescale/crop concept on one of my sites for the hero images on mobile and, they looked like total crap. So, An idea came to mind. Why not use totally different images for the mobile hero?. Images that would be more friendly to cropping?. EL makes it possible to have different hero banner images for mobile than desktop. I NEVER thought of that idea before. Thanks for the idea and, another way to be totally unproductive around the house today! (Today is/was cleaning day. I'm sorta behind on household chores...lol)
@squeakycleanteamaustralia
@squeakycleanteamaustralia Жыл бұрын
Learn't so much - thanks
@katysunderhaus1532
@katysunderhaus1532 Жыл бұрын
@Web Squadron Thanks so much for your amazing videos, I've learned so much from them! One thing that I can't seem to figure out is how to add retina images in Elementor. With more and more 4K UHD monitors and the large majority of mobile users with high density displays should this be something we should be addressing? Often I see you using an image that is 500x700px for full screen mobile but won't the graphics look pixelated on high density devices? Is there a way to add code snippets for 2x image and background image variations or a plugin that you would recommend? Thanks!
@websquadron
@websquadron Жыл бұрын
The 500 x 700 is for the mobile, but for Desktop, yes we start to enter the discussion about 1920 x 1080, or bigger, but usually mosts images will sit inside a boxed width of 1100, so it' okay. You can add some HTML to call an alternate image depending on resolution size, but then we are always trying to satisfy everyone and that can be tricky.
@tudungsyeda
@tudungsyeda Жыл бұрын
You always come out with good clear video for us to understand? Thanks a lot and i have one question here...do u have suggestions how can we use different sizes images to publish in products catalogue and single product page in desktop/tablet/mobile for woo commerce site respectively?
@websquadron
@websquadron Жыл бұрын
It would get very tricky and with a very messy snippet if you alternate the image sizes there. I wouldn't do it, unless you build the shop manually.
@thusharafernando2624
@thusharafernando2624 11 ай бұрын
I accidentally found this vdo. but it's awesome thanks so much
@robinwoodactivitycentres1526
@robinwoodactivitycentres1526 Жыл бұрын
Great Video, Thank you. Would you set a reduced image for landscape mobile too? Matt
@websquadron
@websquadron Жыл бұрын
Depends on the width; so if it was 1920, then yes.
@lynne3469
@lynne3469 Жыл бұрын
I am new to WordPress and trying to get my head round image size etc. Your video was great, very well explained and at the right pace for me. Thank you so much!
@websquadron
@websquadron Жыл бұрын
So glad it helped
@StevanOvich61
@StevanOvich61 Жыл бұрын
Just followed recently. Excellent content, but I will need to catch up on your channel HaHa ...
@christianhimmer
@christianhimmer Жыл бұрын
Thank you so much .. Nobody teaches you this when you start making websites.
@websquadron
@websquadron Жыл бұрын
Happy to help!
@nayanponz7883
@nayanponz7883 Жыл бұрын
This is exactly what I was thinking about and told you the past time. I did the same think a full-size image for Desktop, a small size image for mobile and products grid. For example, if you have 3 grids in your HOME page, Every grid includes 12 products, it will be painful if you let the website load the full-size image on 50 products in the same page, I know you can choose in Elementor dynamics image to be custom or 300*200 ... but that will increase the process in the back-end, the best thing to do exactly what we see in this tutorial, add a new field to you Post/Products, name it mobile image, let it show only on grids or mobile with dynamics in Elementor. jump from 45 score in home page to 65, without any other optimizations
@alan-muscat
@alan-muscat Жыл бұрын
Are you saying that Elementor resizes the image to 300*200 on the fly, as it is loading the page?
@nayanponz7883
@nayanponz7883 Жыл бұрын
@@alan-muscat No, i mean, you need to create 3 images for each product, the large one for desktop, small one for tablet, and small one for mobile.
@williamsestateagents-heref4862
@williamsestateagents-heref4862 10 ай бұрын
. does this work in carousel as well or can you only use the image widget if want different content on mobile? everytime i try and change the image for mobile , it deletes the desktop image. didnt expect anything else tbf.. but would be good if worked.
@websquadron
@websquadron 10 ай бұрын
Not great for carousel unless you swap out using breakpoints with html to swap. Or ensure the desktop sizes are close to the mobile. Also consider how much of a hit this problem is as sometimes it makes negligible difference/effect on page speed.
@LoveDose677
@LoveDose677 11 ай бұрын
thank u.....
@eguchiyuuki
@eguchiyuuki Жыл бұрын
great...!
@thechillster1161
@thechillster1161 Жыл бұрын
Mate, this is so great! I have been doing this wrong all the time! One question though: Are you absolutely sure that the mobile version will only load the smaller image and not BOTH, just hiding the big one? Thank you so much!
@websquadron
@websquadron Жыл бұрын
I am certain it won’t as it never flags an issue for me on Page Speed Performance
@ahtishambsr
@ahtishambsr 11 ай бұрын
As always, awesome info Imran but I would like to ask about the images for woocommerce products? What should be the best size for the product images to be clear and sharp enough on all devices. Thank you so much.
@websquadron
@websquadron 11 ай бұрын
500x500 always works for me. Some recommend 600x600.
@Jaydetailaz
@Jaydetailaz 5 ай бұрын
Greetings, Web Squadron! I have a technical question. Is there a way to adjust the resolution of images between desktop and mobile using an image carousel?
@websquadron
@websquadron 5 ай бұрын
You can use @media css
@QuaverloveStudio
@QuaverloveStudio Жыл бұрын
I get it. In the grand scheme of things, it's better to have duplicate (or triplicate) images - cropped or scaled to suit - than to have page speed compromised. Admittedly (and this was even before the emergence of AI), I've always been worried about using online image resizing facilities.... I'll try bulkresizephotos.
@websquadron
@websquadron Жыл бұрын
Indeed, Bulkresizephotos is awesome. Only duplicate images when needed. Don't do it for all of them.
@Yourtrendy0_13
@Yourtrendy0_13 4 ай бұрын
How your voice get that deep in a year !! Seems you're still growing.
@websquadron
@websquadron 4 ай бұрын
Ha - I just changed the microphone settings and room echo :)
@MbonisiM
@MbonisiM 23 күн бұрын
okay noted, this is getting interesting
@That.Wizard.From.Belgium
@That.Wizard.From.Belgium Жыл бұрын
Great video! Would you argue that you would only do this exercise for images that need to be big on desktop? Eg. If the image your using on desktop isn't that big, do you reckon it's still worth it having a duplicate one for mobile?
@websquadron
@websquadron Жыл бұрын
Indeed. Only when you need to do it. If an image is 300x 300, or 400x400 etc, then it'll be fine on the Desktop and Mobile with no major changes needed.
@faizaumair965
@faizaumair965 10 ай бұрын
hi , I found this video wonderful. I am developing a website on Wordpress and for banner , using slider revolution. But I can not my mobile version with different image as Slider revolution has 1 background image for all screens and it makes SEO score down for mobile version with high FCP and LCP. Kindly guide me in this regards, I am getting frustrated , searched alot but no use TIA
@websquadron
@websquadron 10 ай бұрын
I don’t use slider revolution
@unclosetedconservative
@unclosetedconservative 7 ай бұрын
I'm redoing my website for re-launch in January. I am 100% going to do this with every image. Since I'm updating all the images, I wonder if I should delete everything in the media library that won't be re-used.
@websquadron
@websquadron 7 ай бұрын
I would delete if it’s not used
@indaskys
@indaskys 10 ай бұрын
Hi can you help im a photographer and uploading some of my photos to my website, id like them to look good on a 4k monitor but dont want people to be able to print them, so could i upload them at 3500 pixels wide at 1 dpi and compress to 800kb. will this make it impossible to print. when i test this and then copy the image and check the details it seemd to show them at 96 dpi. having trouble finding the best solution to have good quality on 4k monitor but protect them for being printed. Thanks in advance
@websquadron
@websquadron 10 ай бұрын
Could still be screenshotted and printed. Better to add a watermark/overlay. Don’t allow them to click and access the media link.
@pixelgap
@pixelgap Жыл бұрын
Thank you Imran. I have a question. What happens to the original image after it has been cropped? I think it stays in the backend of Wordpress since you can revert back to the original. But if that is true how can we resize but get rid of the original image if we don't need to revert back?
@websquadron
@websquadron Жыл бұрын
That’s a tricky one that I’m not sure of
@fulstaak
@fulstaak 2 ай бұрын
The problem is most of the latest smartphones have a high pixel density and an image cropped at 400px will look bad. 1200px wide would be a minimum for me now, depending on the strategy of course.
@clintonlucock4568
@clintonlucock4568 Жыл бұрын
Awesome stuff as always I know you have mentioned this before but I forgot. Great reminder and explanation of why it’s so important. I do have the same question as Rafa re the size still being at 103kb is it worth exporting and re-saving at smaller kb or use a plug-in like Smush or is it just not worth the worry given it will at most be a couple of extra images
@joppawebs3350
@joppawebs3350 Жыл бұрын
The file size isn't the same after the image is rescaled. Yes it does show as the same file size in wordpress media library (103kb in Imran's example), but the actual image you will embed into elementor has a different file size to this. You can test this by following what Imran has done in this video and then embedding the two images into a wordpress site e.g. one 5000 width and the other 500 width. You can then right click save image on each and you can then look at the properties of each image and you'll see the 5000 image has a much larger file size than the 500 width one. I think the 103kb displayed in the wordpress media library relates to the original image, as it makes sense that wordpress always keeps the original image for you as a backup in order for you to be able to restore the original. Hope this helps as I was also confused by this but thought I would test it to see how it works!
@clintonlucock4568
@clintonlucock4568 Жыл бұрын
@@joppawebs3350 thanks great explanation appreciated
@joppawebs3350
@joppawebs3350 Жыл бұрын
@@clintonlucock4568 Very welcome! This video is definitely how I'll be handling images from now on: upload the original resolution webp, then scale & crop from there, always knowing I have the original to restore back to. Saves wasting time jumping in and out of wordpress/photoshop, just have wordpress do the work for you :)
@websquadron
@websquadron Жыл бұрын
Thanks both. Since Wordpress 6, it stopped showing the revised KB size (which can confuse many) - but yes, the size on the page will be the refined/cropped/scaled size.
@mikaylaelrod3341
@mikaylaelrod3341 5 ай бұрын
So for some reason I don't have the WEBP format option. Is there a way to get this option? I keep resizing my images however they are still too big for my media library
@websquadron
@websquadron 5 ай бұрын
You dont have the option when going to bulkresizephotos.com? Try it in edge.
@mishmatta
@mishmatta 9 ай бұрын
Thanks for this video - still having an issue with the mobile display. When I refresh my mobile page, for a split second it shows the image correctly, then it zooms in.
@websquadron
@websquadron 9 ай бұрын
Oh no
@MrBiggle2
@MrBiggle2 Жыл бұрын
Hi, is there a way to add 2 separate videos like images in the hero container for responsive design?
@websquadron
@websquadron Жыл бұрын
Yea with 2 containers
@MrBiggle2
@MrBiggle2 Жыл бұрын
@@websquadron yeh that's what I've done. Thanks for your help though. Ps your videos are great. Really informative, relevant and easy to follow. Thank you!
@hamedo5109
@hamedo5109 Жыл бұрын
Thank you so much, but why you put( scroll )in attachment??
@websquadron
@websquadron Жыл бұрын
Can’t remember
@zarasjourney6627
@zarasjourney6627 Ай бұрын
Hello am new here. I've got a bit of a problem. In my woocommerce store I have connected my dropshipping store but the icons on the backend of my woocommerce store are too small. Any help would be appreciated.
@websquadron
@websquadron Ай бұрын
Right click to inspect. When you find the 'class' name then you could modify the size with some CSS.
@sebastianandersson6892
@sebastianandersson6892 8 ай бұрын
If you insert image 1 in Elementor, then modify image 1 in Wordpress Media Gallery, is the change being made in Elementor automatically?
@websquadron
@websquadron 8 ай бұрын
You may need to re-insert
@TheNaturalEnquirer
@TheNaturalEnquirer Жыл бұрын
Am I right that this will not work with the Elementor Posts widget if I display a featured image? If I use Elementor Posts widget that displays its featured image (800x1200), even if I select a thumbnail (150x150) or medium (300x300) size, the intrinsic image size will still be 800x1200? Other than using an image other than the featured image, I am stuck with the larger size?
@websquadron
@websquadron Жыл бұрын
It does still work with the EL Posts. And you'll be fine as the post images are quick to load.
@kun6fupanda
@kun6fupanda 4 ай бұрын
Trying to figure this out for days 😂
@moeszinger
@moeszinger Жыл бұрын
Hi Imran, Great job with the videos! I have a question regarding responsive images. I noticed on my site that both the Desktop & mobile images are being loaded for all screen sizes. I thought the whole reason for responsive was to only load the images needed for the particular screen size. I think this is killing my mobile speed score.
@websquadron
@websquadron Жыл бұрын
Sometimes you have to add clamp to resize
@moeszinger
@moeszinger Жыл бұрын
@@websquadron But the mobile site loading both the mobile & desktop images even though it only displays one of the,. Same is true for the Desktop, it also loads the Mobils image but does not show it. Seems to me this nearly doubles the http requests and is not good. Thank you for the quick response 🙂
@mallyokruashvili178
@mallyokruashvili178 19 күн бұрын
Imran, how do we know how many pixels wide we need the image to be? For example when you say, "you know you will never need more than x amount" how did you determine that amount?
@websquadron
@websquadron 19 күн бұрын
Based on what people use, how many use their Laptops, Macbooks, Monitors rather than 49" Wide Screens. You can build bigger but then you have to account for how big will the image and text be. Boxed widths ensure your layout is as intended regardless of a 21" or a 29" screen.
@mallyokruashvili178
@mallyokruashvili178 18 күн бұрын
@@websquadron thank you for replying, but I still dont understand how you determined the actual pixel amount based on the screen size. For example, if 80% of my users use mobile, and 20% use laptop, how do I know how many pixels I would actually need for each?
@jeanpietrowicz7455
@jeanpietrowicz7455 Жыл бұрын
I tried this on a staging website which had the standard Wordpress media settings in place for a few years. What I noticed is that the thumbnail images in the Wordpress media library went missing. When I looked at the image URL for the media library thumbnails, it referred to the automatically resized thumbnail images which I had deleted. No problem, as I had made a backup so I could restore those images. So I think your idea is great for brand-new websites, but for older websites, one has to proceed with caution.
@websquadron
@websquadron Жыл бұрын
Sorry to hear that
@audunjemtland8287
@audunjemtland8287 9 ай бұрын
Amazing tutorial. Still unsure what dimentions to use and how to get WordPress to use those images on the respective units. Seems like an 3x job, needing to manually upload each image on mobile, tablet and desktop.
@websquadron
@websquadron 9 ай бұрын
Don’t worry too much about tablet and only worry about desktop and mobile where needed
@websquadron
@websquadron 9 ай бұрын
A 500px wide image can be fine for D and M
@darrenfrancis8126
@darrenfrancis8126 6 ай бұрын
@@websquadron my mobile breakpoint starts at 768px, shouldnt that be the width of the image
@atosupriyanto6990
@atosupriyanto6990 Жыл бұрын
Then whats your approach to apply this into the elementor widget image??
@websquadron
@websquadron Жыл бұрын
You add css into the image css to swap it on @media
@rodlivz
@rodlivz Жыл бұрын
Hey Imran, Thanks for this amazing tutorial. I have been struggling with very poor quality images with bulk resize to .webp. Have you ran into this problem and how did you solve it?
@websquadron
@websquadron Жыл бұрын
What dimensions were the original images and what settings were you using on BulkResize?
@rodlivz
@rodlivz Жыл бұрын
@@websquadron after resizing and optimising in photoshop, I upload to Bulk Resize? Could it be overkill?🤔 Do you use Canva instead?
@websquadron
@websquadron Жыл бұрын
@@rodlivz I just use Canva these days, and I set the canvas to be 1920 x 1080, or 500 x 500 etc, and then inside of BulkResize convert with 100% dimension, and then I scale or crop inside of Wordpress.
@rodlivz
@rodlivz Жыл бұрын
@@websquadron perfect, thanks for this I'll give it a shot.
@nailartar
@nailartar Ай бұрын
Why is it that after uploading a clear image to the media library and inserting it into the page, the image becomes unclear? When I view the uploaded image in the media library the image is clear, but when I click into edit image the image does not look clear.
@websquadron
@websquadron Ай бұрын
Does it have the transparency still part of the file? Is there any BG colour applied to the widget?
@anonymousf454
@anonymousf454 10 ай бұрын
How do I make the actual image borders smaller...i have a paragraph at the bottom of my hero image that I would like people to see without having to scroll down on my homepage
@websquadron
@websquadron 10 ай бұрын
Not sure I follow that.
@anonymousf454
@anonymousf454 10 ай бұрын
@@websquadron It seems like I can make the image zome in or out, but the frame of the image stays the same size....i want the frame of the hero image to be smaller vertically, so that when I log onto the webpage i can see the welcome paragraph that's beneath the hero image.
@ericj810
@ericj810 6 ай бұрын
One thing I noticed. The color of my images seems to be more vibrant after uploading on wordpress. They are more sharp and colorful it seems. Wordpress change image rgb or anything?
@websquadron
@websquadron 6 ай бұрын
Are they on the same monitor?
@ericj810
@ericj810 6 ай бұрын
@@websquadron yep
@ericj810
@ericj810 6 ай бұрын
@websquadron Looks better though. Ill go with it. Everything is richer and super clear. Im not using any image plugins and just using wordpress default image settings. If i take the same image on photoshop and use rgb for web colors I get the same eesults. Wordpress seems to do this for me. No need for color type change before upload
@roppor2194
@roppor2194 Жыл бұрын
Imran, I propose to make a Life Wordpress Site section on the channel, design for the store, or ... that's great. But here is the task, a one-room apartment, which I want to rent by the day. From the content of 10 photos and a description, you get a regular ad, rent an apartment for rent, how to make a site for renting one apartment interesting in this case? And does it make sense to create such a site? Give an example if you have any ideas...
@websquadron
@websquadron Жыл бұрын
You need to create a Booking Site, or book a 1-2-1 Consultation with me.
@JeramieSaito
@JeramieSaito Жыл бұрын
My website was not built with an elementor so I do not have an option to add different kinds of pictures to fit different devices. The picture that I use will have to fit all devices and it does not fit the mobile view. What do I do?
@websquadron
@websquadron Жыл бұрын
You need to use HTML then to swap them. See Tip 3 from this video: kzbin.info/www/bejne/fKDSloyugLerbpI
@JeramieSaito
@JeramieSaito Жыл бұрын
@@websquadron oh no I don’t know how to code what about some plugins?
@websquadron
@websquadron Жыл бұрын
@@JeramieSaito The HTML in that video is very self explanatory. You can use it anywhere.
@JeramieSaito
@JeramieSaito Жыл бұрын
@@websquadron ok I'll watch the video thanks
@RafaArjonilla
@RafaArjonilla Жыл бұрын
Awesome, but what about Image Size file? It is the same in three versions: 103KB
@websquadron
@websquadron Жыл бұрын
Since Wordpress 6, it stopped showing the revised KB size (which can confuse many) - but yes, the size on the page will be the refined/cropped/scaled size.
@MrImperios
@MrImperios Жыл бұрын
Where can you see after the resize and crop how really the Image Size is ?
@websquadron
@websquadron Жыл бұрын
@@MrImperios when you’ve added to the page and inspect - then you’ll see it
@RafaArjonilla
@RafaArjonilla Жыл бұрын
@@websquadron Perfect then! I didn't know. Thank you!!
@MrPhilcorn
@MrPhilcorn 4 ай бұрын
good video but cropping in wordpress didn't down-scale your KB down (see 3:26) so why crop it? (maybe better do down sizing for KB/size reduction in PS)
@websquadron
@websquadron 4 ай бұрын
When presented on the page it will be a smaller size. WP has a bad habit of showing the old size in media library
@MrPhilcorn
@MrPhilcorn 4 ай бұрын
@@websquadron gotcha cheers
@kevinj4862
@kevinj4862 5 ай бұрын
Where do you get your images?
@websquadron
@websquadron 5 ай бұрын
Midjourney, Dall-E, Canva, Pexels
@qasmb1546
@qasmb1546 5 ай бұрын
How do you change an image by say only width without affecting height etc?
@websquadron
@websquadron 5 ай бұрын
Set the display to be cover so that it fits inside the width set
@qasmb1546
@qasmb1546 5 ай бұрын
@@websquadron Sorry I dont understand can you give me abit more detail please
@qasmb1546
@qasmb1546 4 ай бұрын
@@websquadron Please help...
@Shreiz_HD
@Shreiz_HD 5 ай бұрын
Hello, thank you for your video. I don't understand why this tutorial is "responsive". The goal is to have images that automatically adapt to the format of each device. In the end it remains manual in your video, and especially the image presented on mobile is not at all suitable (it overflows all the way across the screen which is just the worst user experience). For mobile format banners if we use your method we will not be able to show anything because we will have to sacrifice the majority of the banner by selecting only part of the image. Thank you for your time
@websquadron
@websquadron 5 ай бұрын
Bg cover images sometimes need some adapting
@HinduBhaktiii
@HinduBhaktiii 6 ай бұрын
thats amazing but what about the featured image bro
@websquadron
@websquadron 6 ай бұрын
You don’t need to worry about too much as long as you have an image added
@alexjohnson6262
@alexjohnson6262 Жыл бұрын
My Elementor isn't accepting WEBP images?! I'm getting an error, saying, "This image cannot be processed by the web server. Convert it to JPEG or PNG before uploading."
@websquadron
@websquadron Жыл бұрын
Who's your hosting provider?
@websquadron
@websquadron Жыл бұрын
And which version of Wordpress are you using?
@alexjohnson6262
@alexjohnson6262 Жыл бұрын
@@websquadron WP Version 6.1.1 with an outdated PHP (7.3.33). WordPress says my host provider has to update it on their end, and it's a task getting someone on the line about doing that at HostGator. Is there a way I can update the PHP on my own? I'm sure it's causing a lot of the issues I'm seeing---Elementor and several other plugins not being able to update, for example.
@alexjohnson6262
@alexjohnson6262 Жыл бұрын
@@websquadron HostGator
@websquadron
@websquadron Жыл бұрын
@@alexjohnson6262 Yup, down to your host to get to 7.4 PHP at least
A Guide to Image Formats & Sizes for Websites
12:12
Avada
Рет қаралды 4,3 М.
Getting your Image Sizes right with Wordpress and Elementor
11:02
Web Squadron
Рет қаралды 53 М.
3M❤️ #thankyou #shorts
00:16
ウエスP -Mr Uekusa- Wes-P
Рет қаралды 14 МЛН
Wait for the last one! 👀
00:28
Josh Horton
Рет қаралды 160 МЛН
That's how money comes into our family
00:14
Mamasoboliha
Рет қаралды 9 МЛН
How To Make A Custom Header Using Elementor Pro
38:19
Ferdy Korpershoek
Рет қаралды 13 М.
Everything You Need to Know About WordPress Image Sizes
16:33
How to Automatically Resize Images in WordPress when Uploading (WordPress Tutorial)
4:30
Wade McMaster - Creator Impact
Рет қаралды 18 М.
WordPress Tutorial for Beginners
34:02
Kevin Stratvert
Рет қаралды 450 М.
Why is THIS the Perfect Homepage?
14:21
Wes McDowell
Рет қаралды 518 М.
Всегда снимай кольцо на речке
0:34
RICARDO
Рет қаралды 1,4 МЛН
В семье появился подросток!
0:15
Victoria Portfolio
Рет қаралды 1,4 МЛН
#armenia
1:01
NS Production
Рет қаралды 3 МЛН
battery low 🤣
0:11
dednahype
Рет қаралды 12 МЛН