Properly size images Slide Show/carousel

[Chizzle685]

I using Slide Show/carousel. Pagespeed Lighthouse has a problem with the sizes of the images (Properly size images). No matter which size I choose, pagespeed wants the pictures to get smaller and smaller.

[Pablo]

It is difficult to help you, if we cannot see what you have done.
Can you please be more specific?

[Chizzle685]

On our side I have the Slide Show / Carousel. The images should appear alternately on the page and the customer should also be able to switch between the images himself. This all works too. But Lighthouse has the following problem "serve images that are appropriately-sized to save cellular data and improve load time"

I have reduced the pictures several times, the smaller I make the pictures, the more I should reduce them.

https://jahncke-gmbh.de/opal-80.html

[Pablo]

I need more information to be able to help you.
What is the URL of the page?
What are your exact settings?
What do I need to do to see the problem?

[Chizzle685]

https://jahncke-gmbh.de/opal-80.html

Slideshow/Carousel setting is default.


You can see it in lighthouse ---> performance ---> Properly size images

[Pablo]

Which specific warning are you trying to 'fix'?

Is this still related to this?
viewtopic.php?f=5&t=94061

[Chizzle685]

No, you wrote there, you're looking to see if you can do something in the future update.


I mean the following:

opportunity -->

Properly sized images --->

Serve images that are appropriately-sized to save mobile data and improve load time.

Resource size & Potential savings

[Pablo]

Did you read this?
https://web.dev/uses-responsive-images/ ... m=devtools

[crispy68]

Unfortunately, this lighthouse flag will happen often. What it is saying is this:

1. Make sure your images are not larger than what is being rendered. I've said this in other threads. You should size your images to the largest that they need to be. If you are inserting an image that has dimensions 400x300 and this is the largest size you plan on using, don't insert an image that is larger. I've seen several users that will import images that are 4000x3000 and then shrink them in WB. This works but the problem is you are loading a huge image that renders ultimately smaller. In other words, always resize your images to the max size you need before using them in WB. This goes for any images no matter how they are used.

2. It also wants you to create different size images and then show the appropriate size for the breakpoint. So if you are using a large image in the slideshow that is 1920x400 on a smaller screen it wants you to show a smaller image say 960x200 and so forth. Very similar to how the picture object works. Using them as SVGs can help also if this is an option.

Always make sure you are sizing the images (as stated in #1) and optimizing them (compressing) them down to the smallest size weight wise without losing too much visually.

I'm typically not too concerned about this flag if I do the above.

[Chizzle685]

Thank you Pablo and Crispy for the replies. I read up on this. Would it be possible in a future update to add adaptive images to the slideshow/carousel?

Similar to pictures --> adaptive images?

[Chizzle685]

@Pablo?

[Pablo]

You can post suggestions here:
viewforum.php?f=28

If more users find it useful then I will consider it for future development.
However, I personally think that this will make the configuration of the slideshow/carousel confusing.
There are already so many options...
Also, for smaller screens a carousel or slideshow is not always the best choice to display images.

[jerryco]

Please consider keeping this simple