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.
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 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!
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.
First time viewer. Thanks so much. Image size, proportions, scaling, cropping, and file size has always been confusing. This makes it clear about what's going on (and what should go on) with images. Also, very clear and straightforward presentation. You got a new sub!
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!
This is a year old, but it is a great video! - Nube question, but this is for backgrounds, but say I have an image, you don't have the option to swap the image for mobile - I'm guessing you create a desktop container and a mobile container and then use the responsive settings, or is there a better way?
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.
Thanks Imran for another great video. I have read your entire comments list below and a few people are asking, as am I, what can be done when someone is using the "image" elementor widget, instead of a container with a background, to which I have not found a response from you. I would guess from your other responses, that your answer would be to use @media css? Can you please clarify, 1. what would the code for such css be, and 2. is there a drawback to using the container/background image when compared to the image widget? I would love to hear your thoughts about that. Thanks again!
You would add @Media code for min and max to show the url that you need. No drawback however container images do get more leeway when compared to explicit image width and height.
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.
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.
Do you have any tips for handling dynamic images this way. E.g. if you have an archive feed that is showing the featured image. Would I have to use a custom field, store a mobile version image then dynamically select this for mobile in my template? Also, a current client is wanting the site to be able to scale seamlessly when people zoom in on their browser (i.e so images increase in size without losing quality) - any thoughts on where the balance is between image sizes to achieve this versus page performance?
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!
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?
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?
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.
@@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?
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
@@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!
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)
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.
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.
You continue to help this newbie greatly. Thank you so much for your videos...keep them coming. One naive question, do you create mobile versions for all the images on your site? Thanks!!!
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
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.
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?
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
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.
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
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?
@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!
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.
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)
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.
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 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
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 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.
. 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.
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.
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.
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.
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?
Much depends on how it's presented, and if you need to go from large image in a boxed desktop layout to a small mobile image, then adjust accordingly, rather than use the same large image for the mobile.
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?
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?
@@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.
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.
yes but does wordpress accept webp on the get go or do we need some kind of plugin?
Thank you , how about the size of side (small) Picture in a page ?
I was just going to say, WP is showing the same KB across all three images! Odd.
Nice Thanks, Subscribed.
My GOD EVERYONE NEEDS THIS VIDEO!!! You just saved me screwing with my elementor page trying to get speeds up. Thank you!! SUBSCRIBED!
Big thanks
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 💛
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.
@@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!
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.
IT'[S GENIUS!
easiest "I should subscribe" decision. life saver. thanks
You've become my go-to for anything Elementor related. Your videos are idiot-proof. Don't ask me how I know . . .
This is so awesome! Thank you! I love your teaching style!
First time viewer. Thanks so much. Image size, proportions, scaling, cropping, and file size has always been confusing. This makes it clear about what's going on (and what should go on) with images. Also, very clear and straightforward presentation. You got a new sub!
Welcome!
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
Thank you. Your lessons are always solid and I really appreciate it. .
Hey IMRAN. Keep the Passionate attitude, it's awesome really well explained Thanks !! :)
Aaaa-Mazing! Thank you. I'm a Photoshop user & thought I needed to make multiple versions for my site! Great video!
Glad it was helpful!
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!
My pleasure!
Thank you for this tips Imran. You're a great person. God bless you.
You’re totally my hero bro.
One word: lifesaver!
Subscribed!
You are a lifesaver mate!!!
Awesome tutorial! Thank you!
Gold. Thanks for posting!
Thanks Imran, these little tips and reminders are always useful, and often contain new methods to help with mobile score.
This is quality content, thank you
These are simple tips but more important than the word which is "important" 🙂
.
Stay Blessed Imran
I was trying to fix this issue for several days. You are golden. You have earned one subscriber.
Thank you. :)
This is exactly what I was looking for. Thank you! Thank you!
Fantastic presentation 👏
Absolutely LOVE this!! THANK YOU!!
Love the video. Thank you tons.
Thank you. Just what I needed.
this is gold !! Thank you !
This is a year old, but it is a great video! - Nube question, but this is for backgrounds, but say I have an image, you don't have the option to swap the image for mobile - I'm guessing you create a desktop container and a mobile container and then use the responsive settings, or is there a better way?
Another excellent tutorial Thanks
Excellent presentation boss.
Really good video, highly recommended!
Glad you enjoyed it!
A refresh on best practices - dig it ‼️
Thank you so much .. Nobody teaches you this when you start making websites.
Happy to help!
Very interesting. I learnt something new. Thanks
Very useful! Thank you a lot!
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.
Good Info...Ill be looking at this asap ;-)
Thanks Imran for another great video. I have read your entire comments list below and a few people are asking, as am I, what can be done when someone is using the "image" elementor widget, instead of a container with a background, to which I have not found a response from you. I would guess from your other responses, that your answer would be to use @media css? Can you please clarify,
1. what would the code for such css be, and
2. is there a drawback to using the container/background image when compared to the image widget? I would love to hear your thoughts about that.
Thanks again!
You would add @Media code for min and max to show the url that you need.
No drawback however container images do get more leeway when compared to explicit image width and height.
Nailed it! ❤
You are a life saver
Just followed recently. Excellent content, but I will need to catch up on your channel HaHa ...
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.
500x500 always works for me. Some recommend 600x600.
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.
I would delete if it’s not used
I accidentally found this vdo. but it's awesome thanks so much
Great Video, Thank you. Would you set a reduced image for landscape mobile too? Matt
Depends on the width; so if it was 1920, then yes.
Do you also disable WP from creating multiple image sizes?
Yup. Got a Code Snippet for that :)
ruclips.net/video/ceQv9FgIZmQ/видео.htmlfeature=shared
Do you have any tips for handling dynamic images this way. E.g. if you have an archive feed that is showing the featured image. Would I have to use a custom field, store a mobile version image then dynamically select this for mobile in my template?
Also, a current client is wanting the site to be able to scale seamlessly when people zoom in on their browser (i.e so images increase in size without losing quality) - any thoughts on where the balance is between image sizes to achieve this versus page performance?
great work with you hair, you look good now
Very Usefull video thanks Boss
THANK YOU SOOO MUCH!!
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!
So glad it helped
Thank you so much, but why you put( scroll )in attachment??
Can’t remember
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?
You can use @media css
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?
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.
@@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?
Brilliant mate.
Then whats your approach to apply this into the elementor widget image??
You add css into the image css to swap it on @media
very well explained
Amazing video. Thank you!
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
Hi, is there a way to add 2 separate videos like images in the hero container for responsive design?
Yea with 2 containers
@@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!
Wow, you just solved a big problem of mine. Thanks a lot
You are most welcome
Thank you so much!
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)
Awesome, but what about Image Size file? It is the same in three versions: 103KB
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.
Where can you see after the resize and crop how really the Image Size is ?
@@MrImperios when you’ve added to the page and inspect - then you’ll see it
@@websquadron Perfect then! I didn't know. Thank you!!
After a layoff for personal reasons I have just used Bulk resize but not getting the option of converting to webp. Any advice please?
Thanks
Are you using edge or safari?
@@websquadron Hi, I'm using Safari.
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.
Don’t worry too much about tablet and only worry about desktop and mobile where needed
A 500px wide image can be fine for D and M
@@websquadron my mobile breakpoint starts at 768px, shouldnt that be the width of the image
Thx for super information!
You continue to help this newbie greatly. Thank you so much for your videos...keep them coming. One naive question, do you create mobile versions for all the images on your site? Thanks!!!
Only when the image on the desktop is very big compared to the mobile size and I sense some reasonable performance improvements
Thank you for taking time to respond. Very helpful for me.
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
Are you saying that Elementor resizes the image to 300*200 on the fly, as it is loading the page?
@@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.
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.
Oh no
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?
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.
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
I don’t use slider revolution
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.
Indeed, Bulkresizephotos is awesome.
Only duplicate images when needed. Don't do it for all of them.
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
You dont have the option when going to bulkresizephotos.com? Try it in edge.
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?
Surprisingly no, as some of the images only load at certain screen sizes.
Thhanks my lovely bro
@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!
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.
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)
When presented on the page it will be a smaller size. WP has a bad habit of showing the old size in media library
@@websquadron gotcha cheers
If you insert image 1 in Elementor, then modify image 1 in Wordpress Media Gallery, is the change being made in Elementor automatically?
You may need to re-insert
Excellent content!
Glad you think so!
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.
my crop option is disabled, plz guide me
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?
Are they on the same monitor?
@@websquadron yep
@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
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
Not sure I follow that.
@@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.
I really like your videos
. 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.
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.
Very useful ❤
How your voice get that deep in a year !!
Seems you're still growing.
Ha - I just changed the microphone settings and room echo :)
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.
Does it have the transparency still part of the file? Is there any BG colour applied to the widget?
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.
Right click to inspect. When you find the 'class' name then you could modify the size with some CSS.
Great info!
Wise words, thanks Imran
okay noted, this is getting interesting
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?
You need to use HTML then to swap them.
See Tip 3 from this video: ruclips.net/video/FooeYxKRx80/видео.html
@@websquadron oh no I don’t know how to code what about some plugins?
@@JeramieSaito The HTML in that video is very self explanatory. You can use it anywhere.
@@websquadron ok I'll watch the video thanks
But how do you know what size the image should be when its in a column?
Much depends on how it's presented, and if you need to go from large image in a boxed desktop layout to a small mobile image, then adjust accordingly, rather than use the same large image for the mobile.
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?
That’s a tricky one that I’m not sure of
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?
What dimensions were the original images and what settings were you using on BulkResize?
@@websquadron after resizing and optimising in photoshop, I upload to Bulk Resize? Could it be overkill?🤔 Do you use Canva instead?
@@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.
@@websquadron perfect, thanks for this I'll give it a shot.
Love your content man..❤️✌️
Thank you 🙌 Do share and let others know about it.
How do you change an image by say only width without affecting height etc?
Set the display to be cover so that it fits inside the width set
@@websquadron Sorry I dont understand can you give me abit more detail please
@@websquadron Please help...