'Properly Size images on Page Speed Insight
When checked on the core web vitals performance it has been flagged that the image on top on the page- https://www.onlia.ca/car-insurance needs to be properly sized. However, the size of the image is less than 100KB which shouldn't affect the page loading and LCP score for mobile users. Does anyone know what other possible factor can be to fix it from the "page speed insight"?
Solution 1:[1]
One of the problems could be the file format. Its recomended to use images in the ".webp" format, wich helps in decreasing the file size and subsequently loads faster. (Sorry for not sending a comment, but i don't have enough reputation.
Solution 2:[2]
This is telling you that the image is not the correct resolution for the screen size.
So if your image is 800px by 1200px for example, but displays at 400px by 600px on the phone (the actual size) then your image is 4 times larger than it needs to be (double the width and double the height).
The quickest way to fix this is with the <picture> element and have multiple versions of the image for different screen resolutions (so a small one for mobile, larger one for desktop).
As for 100kb, that is actually quite large for a mobile connection (relatively speaking), you can probably get that down to about 30kb as a jpg and even smaller as webP (which you can also do with the <picture> element.). However this is just general advice and not the root cause of your problem (the dimensions of the image I mentioned earlier are the cause).
Solution 3:[3]
As Graham Ritchie answered, file weight is not the same as file size.
A good starting point for preparing the size of an image is knowing the commonly reported screen resolutions on mobile users.
Let's say we will use a 360px image on the X-axis for mobile users. And some incremental sizes for bigger screens.
Then, you have several basic options to serve different images, according to the device of the user "to be properly sized"
- Img scrset
- Picture tag
- SVG Images
- Media Query with images as background
The final size is also affected example with a width attribute, for example, if you have two columns then the image could be even 50% smaller than the full browser width.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | EduardoK |
| Solution 2 | Graham Ritchie |
| Solution 3 | Rafael |