This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Lighthouse report – Properly size images

Open 5 replies pluginplugin-widgets-bundlequestion
nethub
3 years ago · Last reply by Andrew Misplon 3 years ago

Hi all,

We are using Lighthouse to check our website, and found a “Properly size images” which is related to “SiteOrigin Image”.

We just created a demo WordPress website and duplicated the problem here.

Lighthouse Screenshot
Lighthouse Report

Is there anything I did wrong or SiteOrigin can do some improvement on its code? Thanks a lot!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Andrew Misplon Staff 3 years, 13 days ago

    Hi, thanks for getting in touch.

    Does the issue persist if you create the same page without using any SiteOrigin plugins?

  2. nethub 3 years, 11 days ago

    Thanks Andrew,

    The issue persists if no SiteOrigin. I guess “SiteOrigin Image” would do better than official WordPress image?

  3. Andrew Misplon Staff 3 years, 11 days ago

    Hi, thanks for testing and confirming the issue isn’t specific to the SiteOrigin Image Widget.

    The SO Image Widget and WordPress are both using the WordPress srcset functionality.

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

    Here is an example: https://demo.siteorigin.com/corp/sandbox/. The source is:

    <img src="https://demo.siteorigin.com/corp/files/2023/01/nick-woods-oregon-standard.png" width="720" height="398" srcset="https://demo.siteorigin.com/corp/files/2023/01/nick-woods-oregon-standard.png 720w, https://demo.siteorigin.com/corp/files/2023/01/nick-woods-oregon-standard-300x166.png 300w, https://demo.siteorigin.com/corp/files/2023/01/nick-woods-oregon-standard-600x332.png 600w" sizes="(max-width: 720px) 100vw, 720px" alt="" class="so-widget-image">

    As you can see above, more than one image size is available. Ref: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes.

    If you re-activate the SO Widgets Bundle, I can take another look at the page in question. The browser should be selecting the smaller image image is in the srcset for mobile devices.

  4. nethub 3 years, 10 days ago

    Hi Andrew,

    Thank you for your help.

    Your example sandbox is using 720px width, so I also tested 720px in my demo site, and result that no “Properly size images” warning any more. Do you think it is just a bug of lighthouse?

    1024px width:
    Demo URL
    Lighthouse report

    720px width:
    Demo URL
    Lighthouse report

  5. Andrew Misplon Staff 3 years, 10 days ago

    Thanks for your reply. It would seem like this is a Lighthouse false positive.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread