CLS Problems and image sizing

Hello,
I have a pretty low CLS Score on PageInsights and I figured out that most of it comes when loading wide images on mobile. While the page is loading, Enfold reserves a square space for the image (e.g. 318px x 318px) and once the image is loaded the div that it is in gets resized to the correct dimension (e.g. 318px x 127px). This obviously causes the entire text to be shifted upwards.

I’ve kind of made a workaround with it by creating a new class “widepicture” and adding that class to pictures that are wide. (See below). But that’s obviously a poor workaround, because I cant know if the max-height value is appropriate and also I’d have to go to through all my posts and add the class to the pictures.

Do you have any idea for a better solution for this issue?

Are you guys working on CLS optimizations for the Enfold theme? That’s going to be very relevant for a lot of people very soon.

Thank you in advance,

@media only screen and (max-width: 800px) {
.widepicture{
max-height: 170px;
}