Issue with img sizing in lighthouse
Does anyone know how to fix this? When I remove the higher resolution images for the DPI I get this.
23 Replies
hmm, maybe try to use something like twicpics to optimize your images? I think its features will solve your problem.
https://www.twicpics.com/
before you do anything, stop
if your design is responsive, and the image changes sizes, try to check how big/small it is, and all it's sizes
honestly, i wouldn't do a whole lot with the images you already have
if it's only one picture using something 3 partyish is surely too much
he already has 2 images of 2 different sizes
he probably just doesn't have it setup properly
for example, it's complaining about the pixel size of the image
maybe using
min-resolution: 2dppx to load the large image for retina displays will clear the first error
and the 2nd one, maybe he's loading the large image when he should be loading the small imageIsn't that 2 errors for the same picture?
no
one is for ...-small.avif, the other for ...-large.avif
oh, i see the title
yes
i think it's all just bad setup
probably bad media queries or bad srcset
we need more to check it better ourselves anyways
that's ... you really went overboard
perhaps you have too many images and resolutions
474 and 546 are so close that it makes it worthless to have that difference there
1068w 984w 819w
just basically the same
what's the size of the image on the page, when you show it?
does it even change?
i think you went about this in a way to appease the almighty lighthouse results, instead of checking what's going on with the image yourself
Change
have you tried to check the image size at multiple resolutions?
Let me check
here's something you can try
you can check for an onresize event of the window
then, send to the console the actual width and height of the image element
and also send the width and height of the window
something like:
window: 1920x1080 - image: 300x500
then you can see the sizes of the image
and just start with the maximum resolution of your page down to the lowestAll that error is saying is that your image size is too big / small compared to the rendered size
yes, but have you seen the setup he has?
it's a huge mess
Nah I didn't
this is a mess
there's lots of resolutions that are 200-300px apart
also, im telling him to check if all those sizes are actually necessary, and the proper sizes for the images
mobile
273 x 224, tablet 273 x 225 and desktop 273 x 325just make a 273x325px image
and done
use that one
you can include a 2x version, but that's it
by the way, don't hard-code the height in css
reset it to "auto"
done
good
now, just do those 2 images and that's all you need
you can change your srcset to
image.jpg, image@2x.jpg 2x
by the way, don't bother with the webp version, in my opinion
just jpeg and avif
you can use webp if you want to anyways
by the way, if you want to make your 2x images, consider also using jpegxlOk