So lighthouse or the pagespeed insights are telling you that there is a problem with the aspect ratio of your images (on homepage), how to fix this?
Image display dimensions should match natural aspect ratio. How to do this?
According to the pagespeed insights page, the posts thumbnail images on home and label pages in some of our blogs on blogger do not have the correct aspect ratio:
"Displays images with incorrect aspect ratio:Image display dimensions should match natural aspect ratio. "
But according to them (reference here on Google developers page) they suggest you either to use an image CDN, to Check the CSS that affects the image's aspect ratio or to Check the image's width and height attributes in the HTML.
The problem does affect the thumbnail images served on the home and label pages and so If i wanted to fix this (problem) for the whole blog i have to tweak or to add some code on the template itself (not to the images code inside of each blogger post Edit HTML section).
The lightweight solution is either editing the css code or to use some of the blogger's template internal functions and tags (not javascript). And also, the thumbnail images on the home page are responsive, so you will need the images to automatically adjust (fit) themselves to the correct aspect ratio.
I surfed throughout a lot of other websites on Google to find out a straight solution (a copy, past and done one) that may solve this problem for some of my blogger blogspot blogs but nothing at all. No direct solutions provided for blogger blogs but only suggestions and general definitions( i tried out a lots of different search queries on google but no direct answer to solve the problem).
They suggest some solutions that may help you to speed up the loading time of images, to compress images, to change the width and the height or to add a -rw inside the image link to serve it as a next gen webp image on blogspot or to use a javascript code which is not a lightweight solution.
The nearest correct answer was to make the image fit within its container using css adding the object-fit css property to the images class or id.
After a certain test and delete work arounds, without being sure if it is the right code to add or to delete, finally a solution worked out for me. The correct answer was to make the image fit within its container by adding the object-fit css property to the image "img" tag to the css style in the head section on the template file. And then "done", no aspect ratio problem on my blogspot blog at all.
So how to do this on blogger?
The solutions that worked out for me and may work out for you are to add the css properties "object-fit: cover" or "object-fit: contain" to the img tag and to set width and height to 100% (full width and height) or "auto" :
-1- Go to the blogger dashboard;
-2- Click on theme;
-3- click on Edit HTML;
-4- copy and past one of these css codes between the style tags in the head section and then click save theme before you test your blog again on lighthouse or the pagespeed insight page (google pagespeed) to check out if the problem has been solved or not:
- Code 1:
img { width: 100%; /* Or auto*/ height: 100%; /* Or auto*/ object-fit:cover;}
- Code 2:
img { width: 100%; /* Or auto*/ height: 100%; /* Or auto*/ object-fit:contain;}
*note that: for static and item pages you can set the width and height to "auto" instead to prevent images to be full size (100% 100%).
For index pages (homepage, label page search results page or so), you may fix the aspect ratio problem for images of some specific image containers ( for recent posts or popular posts or so ), :
.image-container-class-name {
width: your size here;
height: your size here;
}
/* "object-fit:cover" is going to completely fill the image container but it will crop out some parts or any excess on the side that is too big to fit;*/
.image-container-class-name img {
width: 100%;
height: 100%; /* Or define your size*/
object-fit:cover;
}
or
/* Or if you wants the image container to contain the image*/
.image-container-class-name img {
width: 100%;
height: 100%;
object-fit:contain;
}
In addition:
*note that: both "cover" and "contain" values will help you solve the aspect ratio problem shown on pagespeed's errors report. But with:
- object-fit cover: the image keeps its aspect ratio and fills the given dimension, but he image will be clipped to fit;
- object-fit contain: the image keeps its aspect ratio, but is resized (letterboxed#) to fit within the given dimension;
But, both suggested ways will help you solve the aspect ratio problem anyway, if this is your case.
Read further more: web.dev#;
Did it work for you?
Leave your review or a comment if you do have a question or you do want a more detailed answer. Thank you.
Thanks..it worked
ReplyDelete