To keep your site running super fast, ensure your image file sizes are small! That when it doesn't take a million years to load the images on your pages - decreasing the bounce rate substantially. (No one likes to wait around these days!!!)
I recommend using the Page Ruler Chrome Add-On on chrome to measure the image directly on your desktop screen.
Now you need to resize your image! You can do this via your native photo editor to use something like I Love Img. But my absolute favorite way is to create a Canva template with those dimensions and simply add the image directly to the template – bam – auto resize – plus, there’s a compression option and you can switch it from a PNG to Jpeg easily.
I always recommend using a Jpeg if you can, but if you are forced to use a PNG due to needing a transparent background, then make sure you compress the PNG! I like to aim for a file size no larger than 150kb.
(Jpegs are smaller files than PNGs)
Finally, the image is ready to upload to your website!!! You did it! You just need to upload it and add the alt-text to the new image.
To comply with US Website Accessibility laws, you must describe the image within the alt text, so those who are visually impaired can understand the purpose of the image.
Other Ways to Speed Up Your Elementor Website
Page Ruler – Measure how big your photo should be
Lena 00:01
Hi, so we’re going to go through how to optimize your images for your website. So I’m using Canva right now. This is probably the most versatile of the design tools. I tend to steer more towards Photoshop if I’m working on someone’s website, but for quick social graphics posters, that kind of thing, Canva is excellent. It has these pre-done templates, so you can click and go through them. Anyways, back to compressing your images.
Lena 00:31
And we are resizing. So let’s look at this for a second. So we’re just going to download this, and it can put the quality here, which is the same as the compression level. You don’t want to go below 60, but for today we’ll just set it at 60. So you go, and you download. All right. We have our file, and I’m going to leave it down there, and we’re going to come back to it because we want to resize it.
Lena 00:59
And there are lots of web-based tools, and some that I include here. I’m going to use my computer to resize it, but let’s find a place where it should go. So I have. The actual page where you guys are seeing this, and we’re just going to add a section below with an image. So this image is right here. This is where it would typically go. This is technically the size we need, so we’re going to, and I use an extension called Page Ruler Redux.
Lena 01:35
It’s pretty much my favorite thing in the entire world. So you outline it, and then it tells you those exact dimensions, so 5-5-2 by three seventy. So let’s open up that guy. And we’ve got it over here, so it doesn’t matter how long it is for this because it will just get longer. But we don’t want it more comprehensive, so let’s keep that first one, the 5-5-2, and we’re going to do this via just your desktop computer.
Lena 02:06
And whoops. We are going to resize, so right-click resize. And this is 5-5-2 save, resize. So resized right, all right. Then we’ll open up another tab which w l be the compressed JPEG. And now you can do compressed PNG, which you notice I go to a lot over here, but let’s compress JPEG. So then we uploaded that file that we had resized. All right, well, we didn’t lose a lot of the size, probably because we took it down to 60 % in Canva, and honestly, taking it down this much with words probably was too much, so you might have to play with that if there are words on there.
Lena 03:05
Or do it. PNG PNG by def,ault, are a lot bigger files. They’re usually at least twice as big of a JPEG, so I try and avoid them as much as possible unless you have fantastic hosting, which of course, if you are on maintenance with me, you have great hosting. But either way, it’s just good practice, and you should be in the habit of using Jpegs over PNGs when you can.
Lena 03:31
PNGs are great when you have words or need a transparent background. You have to do a PNG. So those are things like logos, posters, or any items that will be more apparent in a PNG. So you can do that. Just remember to compress it, so we’re just going to download this. Resize OK; then we’ll go over here, and let’s click out of our resize. Click here. And I am running on local, so this will be a little slow. This is not running on my actual server; this is running directly off my computer, so it’s just a little slower, and there you go.
Lena 04:12
And now it’s perfectly sized for this space, so it doesn’t have to do anything. Like your website doesn’t have to resize or do any extra commands. Make that speed much slower, so that’s how you resize it. The last thing I’m going to tell you. Let’s go in here. So we have this pulled up, right? You, the title is less important. You don’t have to put something there, but you should always put all text, and this is an excellent opportunity to plug your SEO keyword for your page.
Lena 04:49
So you want to describe the image, but you also so if we like a woman on the beach. You also want to plug your SEO keyword. The woman, let’s say we are a Beach Hotel. Women on Pacific Beach. Maybe that’s the beach where the hotel is, and then you want to any words that are in that, you’re going to want to write them out so it’s like happy birthday so that anybody with a visual impairment can still know what’s on there.
Lena 05:24
Otherwise, they have no idea because it’s written on a poster they can’t read with their screen readers. So make sure you do that. It’s illegal not to, so always do it, right? That is it. I hope this tutorial was. Easy and fun, and always send me questions if you have them.
Pinpoint your brand vision with my style quiz. You’ll get a free downloadable brand board and even generate a homepage with your personal brand style!
