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