Question

Slider Image size


Userlevel 1
  • New Member
  • 3 replies

I’m trying to optimise my sites performance.

Google Page Insights says that the images I’m using in the Elementor slider need to have explicit “width” & “height” set,  I have set the size in the Slider widget but it makes no difference, can anyone tell me how to fix this?

Thanks for any help


21 replies

Userlevel 4
Badge +2

Do you have a link to your website?

Also do you have a screenshot of where you have set your width and height?

Userlevel 1

Hi Nazrinn

Thanks for getting back to me, the website is:-

www.g2naturals.co.uk

here is a screen shot of the page in Elementor where I think I have set the width/height of the slider, about half way down on the right hand side

 

Thanks for any help you can give

Jon

Userlevel 4
Badge +2

Try using one of the default size instead of “custom” and let me know when you did it. I’ll check again for size to see if there is any change.

Userlevel 1

ok I have used one of the default sizes, but still seems to have the issue in page speed insights, it only seems to affect the mobile speed score.

Userlevel 4
Badge +2

You tested Page Speed Insight on desktop too? Usually at least putting a width attribute on <img> is good practice regardless if you are using desktop or mobile.

 

And from the look of it, it looks like you’ll have to contact Elementor developer on GitHub about the issue. This is not something you can fix yourself if Elementor is simply not putting the image size attribute(s) on their slider images.

 

Also pro tip, you might want to use the pro slider widget versus what you have there It will look much more cleaner than your ultra-compressed image.

Userlevel 1

Thanks for your help Nazrinn, I’ll try contacting them. The image quality is my fault I think, I have compressed it too much trying to make it smaller to improve speed.

 

Also on Google PageSpeed Insights it tests both mobile & desktop, you can click on the device type on the top left of the screen in the blue bar, to get the score for each type

 

Userlevel 4
Badge +2

Yes yes I am aware on how the page speed insign work. I am a developer. =^)

 

As for images, it’s good practice to avoid using images as much as possible, so if you can replace part of your image into a widget (like the one I linked), you’d be all peachy. Also instead of compressing to death, please consider lazy-loading your images instead. This way the user will load the images only when viewed.

 

Optimole is a great plugin for that. It has an integrated CDN and automatic image compression (no need to do it yourself! They use a top notch compression algorithm). You should try it out.

 

And you are the most welcome. =)

 

Otherwise, don’t expect your issue to be solved too soon, but rest assured Elementor developers continue optimizing their plugin toward best practices.

Userlevel 1
Badge +2

I would remove slider as it do not help.

 

https://yoast.com/opinion-on-sliders/

Userlevel 4
Badge +2

You need to explicitly define width and height attribute to your image tag (<img>). That why lighthouse flag your page.

Define width and height attribute to your image tag

You can  watch Layout shift in action

 

To fix width and height issue on your images, you can read @Clement Yo post on 10 proven steps to make our new Elementor website loads faster blog post. There is code snippet available on their blog. Copy the code and paste it to your function.php or using Code snippet plugin and after that please clear the cache. And it should fix the problem.

Cheers

 

Dear Hélène,

you seem like you are able to answer my questions out of your pocket, I hope it’s okay if I try?

  • I  built am image carousel.
  • I uploaded images in 1920 x 1080 and have optimole installed. Why? I wanted them to loook good inside the light box and not have extra links to the “full” images. Wrong already?
  • I did not compress the images beforehand because I trusted Optimole. Wrong already?
  • I chose “Large 1024 x 1024” - the images look okay in the carousel but I am not sure whether I am killing my pagespeed or doing it the wrong way?
  • Should I resize and/or compress the images before uploading?
  • On my desktop, critically speaking, the images only take up 1000 pixels, not 1024? Is this a problem or totally hysterical? 

I hope my question is understandable. The construction site: https://villa-leichtigkeit.de/ 

Thank you for lifting the veil before my eyes,

Andrej!

 

 

Userlevel 6
Badge +2

I’m dedicating my Live Chat at 8PM GMT just to Sliders’ Suck.
Web Squadron – Posts | Facebook

I’m dedicating my Live Chat at 8PM GMT just to Sliders’ Suck.
Web Squadron – Posts | Facebook

The link says “Content not available”

Userlevel 6
Badge +2

I’m dedicating my Live Chat at 8PM GMT just to Sliders’ Suck.
Web Squadron – Posts | Facebook

The link says “Content not available”

Oh no - even after logging in to FB?

I’m dedicating my Live Chat at 8PM GMT just to Sliders’ Suck.
Web Squadron – Posts | Facebook

The link says “Content not available”

Oh no - even after logging in to FB?

Of course.

Userlevel 4
Badge +2

Hi @CHiLL4. Sorry for the pretty late reply. My computer broke on me last week and it was hard for me to give advanced advice. Here is a breakdown of all the points you made:

  • I  built am image carousel.

That’s fine. Although I agree, sliders are bad UX in general. Most people don’t see the second slides and there is tons of studies on that subject. As a general rule of thumb, it’s good to let the user see all available information in one “sight”. The user shouldn’t have to wait or click on something to reveal new information.

However, like I mentioned in my first post on the thread, if you must use a carousel, you should use the slider widget instead, where the focus would be on text and buttons rather than an image with the “button” embedded in it. 

  • I uploaded images in 1920 x 1080 and have optimole installed. Why? I wanted them to loook good inside the light box and not have extra links to the “full” images. Wrong already?

No actually that’s a pretty reasonable size for a slider image. You can disable image links in your Elementor carousel settings if you’d like, or replace them with a page link.

  • I did not compress the images beforehand because I trusted Optimole. Wrong already?

No that’s right. Optimole will do the best job possible; and usually better than any humana

  • I chose “Large 1024 x 1024” - the images look okay in the carousel but I am not sure whether I am killing my pagespeed or doing it the wrong way?

That should be fine. Have you tested your page again since? What are the results?

  • Should I resize and/or compress the images before uploading?

No Optimole will do the trick.

  • On my desktop, critically speaking, the images only take up 1000 pixels, not 1024? Is this a problem or totally hysterical?

No. Optimole resize your image depending of the size of your screen! So it’s likely ignoring Elementor’s setting for that one. Don’t worry, you’re totally good. =)

 

Userlevel 5
Badge +2

Dear Hélène,

you seem like you are able to answer my questions out of your pocket, I hope it’s okay if I try?

  • I  built am image carousel.
  • I uploaded images in 1920 x 1080 and have optimole installed. Why? I wanted them to loook good inside the light box and not have extra links to the “full” images. Wrong already?
  • I did not compress the images beforehand because I trusted Optimole. Wrong already?
  • I chose “Large 1024 x 1024” - the images look okay in the carousel but I am not sure whether I am killing my pagespeed or doing it the wrong way?
  • Should I resize and/or compress the images before uploading?
  • On my desktop, critically speaking, the images only take up 1000 pixels, not 1024? Is this a problem or totally hysterical? 

I hope my question is understandable. The construction site: https://villa-leichtigkeit.de/ 

Thank you for lifting the veil before my eyes,

Andrej!

 

 

this is pretty simple : just optimize images you can use plugins or free website to optimze your image
use lazy load, use webp format. it will be very fast for you.

Userlevel 4
Badge +2

@CHiLL4 I sent a reply going through your bullet list but it seems moderation is retaining it. Let’s wait a bit and if it’s not coming, I’ll send it again.

Try using one of the default size instead of “custom” and let me know when you did it. I’ll check again for size to see if there is any change.

I feel a little bit dumb, but where is the option to choose the pre-defined image sizes of wordpress in the slider?!

 

 

At the moment I solved it by re-uploading the resized images and choose them for the second slider, which is only visible on mobile devices.

Userlevel 5
Badge +2

Try using one of the default size instead of “custom” and let me know when you did it. I’ll check again for size to see if there is any change.

I feel a little bit dumb, but where is the option to choose the pre-defined image sizes of wordpress in the slider?!

 

 

At the moment I solved it by re-uploading the resized images and choose them for the second slider, which is only visible on mobile devices.

why can’t you first see the dimension of the slider and change images to that resolution if your priority is to get scores on page load

why can’t you first see the dimension of the slider and change images to that resolution if your priority is to get scores on page load

The point is that Wordpress scales an images into multiple dimensions, but the slider has no option to select them (as far as I know).

Userlevel 5
Badge +2

No I have had similar issues, first don’t upload those big size images make sure if you know dimension of slder say its widht wise 1170px in  width and 580 in height first make of that dimension,  then optimise image to compress then upload it. your all issues will be resolved, most important please convert images to webp. why its does so it could serve diffrent scale at diffrent resolutions.
if you don’t like it use diffrent sliders not all the slider do the same, or best use simple image with css you can use diffrent images and make it feel like slider.

Reply