Properly size image warning

  • Resolved starlight324

    (@starlight324)


    11 months, 1 week ago

    Hey there,
    I just tested my page on Page insights and I got the warning “Properly size images” for the retina images. I used “responsive images” and “picturefill” as methods and it was the same for both. Deactivating the “serve retina images” function stopped the warning.
    I just wondered if this is always the case or if there is something that can be done (different configuration etc.).

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Val Meow

    (@valwa)

    Hey @starlight324! ??


    Basically, Chrome will compare the resolution of the image to its actual size on the webpage, and if the resolution is too high, it will display a warning. A retina image is typically twice the resolution of an original image, so for any thumbnails, the image could be considered “too high quality”.

    Thread Starter starlight324

    (@starlight324)

    Hey @valwa
    what I don’t understand about it is the following. The image on my site has a width of 425px. If retina images are disabled, page insights does not show any warning, so the image size seems to be fine. If retina images are enabled, the 425@2x image is flagged by page insights. However, as the normal image was not flagged, I assume that the image pixel size is appropriate for a DPR:2 retina display. Besides, as far as I can see, the normal image size is noted in the html under “srcset” with the retina image. So, if page insights thinks that the retina image is too big (e.g. if the page insights simulator uses DPR:1), why does it not use the normal image size instead?
    Page insights has a link to a guide on responsive images (https://web.dev/articles/serve-responsive-images). To me it seems, that Perfect images is following this guide.
    In conclusion, I’m a bit confused why the retina images are flagged.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Properly size image warning’ is closed to new replies.