Hello @intered !
I hope all is well.
I’ve ran the PageSpeed test and got the result you’ve mentioned.
The images mentioned by Google in fact don’t have a width and height set for them, at least not a specific one in pixels. For example the logo at the top is located in a <div> which is sized relatively to its parent, ie. it has 50% width on desktop. The image itself is set to fill 100% of the width of of that container. Therefore, the image itself doesn’t have a static width and height specified as it will adjust those to the screen’s width.
The issue here is that because the images don’t have a static width expressed in the HTML or CSS in pixels, the browser can’t predict what size of image it should download if there are multiple available and if you’d have Smush Pro with our CDN enabled, you’d not be able to use the automatic image resizing option for those kinds of images.
There are two common ways to solve this, though one of them isn’t an actual solution:
1. Leave it as is since it doesn’t affect the scores too much and isn’t a major issue.
2. Redo the CSS/HTML to provide static image sizes, for example for the logo you could do something like:
.space-header-2-top-logo-ins img {
width: 284px;
height: 78px;
}
@media screen and (max-width: 1024px) {
.space-header-2-top-logo-ins img {
width: 200px;
height: 60px;
}
}
// etc. for smaller screen sizes
However the downside of this is that you’ll need to put a bit of work to ensure all images are covered and you’ll also lose some of the responsive features for those images (they will not resize to match the screen/window accordingly.
Hope this helps!
Kind regards,
Pawel
