Sizes not being set correctly

  • Resolved razorboy

    (@razorboy)


    2 years, 10 months ago

    Hi all,
    It seems that the wrong sized image is being rendered for mobile at various locations around the site as the size attribute of the image is essentially running a media query that uses the desired size of the image rather than the page size. The issue relates to this line sizes=”(max-width: 400px) 100vw, 400px” or variants as sometimes the image is 750px so I sizes=”(max-width: 750px) 100vw, 750 px” get of it all over the site with set the wrong size attribute.

    I read this article https://novo-media.ch/en/web-optimization/responsive-images-wordpress/ to understand how srcset and size attributes are supposed to be used, essentially as media queries

    I noticed this issue when I would run various page speed tests and I was constantly warned that the images were missed sized. You can see some examples here
    https://pagespeed.web.dev/report?url=https%3A%2F%2Ffrshminds.com%2Fpaul-lewin-cannabis-psychedelics%2F

    This will flag the image on the main page (which is 800 px wide) as being too large on mobile. From what I have read the size attribute which is: sizes=”(max-width: 800px) 100vw, 800px”/> should actually be used to query the media size and deliver one of the appropriately sized images

    <picture class="wp-image-31492">
<source type="image/webp" srcset="https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-800x450.png.webp 800w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-300x169.png.webp 300w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-768x433.png.webp 768w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-96x54.png.webp 96w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-42x24.png.webp 42w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-60x34.png.webp 60w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-600x338.png.webp 600w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law.png.webp 1110w" sizes="(max-width: 800px) 100vw, 800px"/>
<img width="800" height="451" src="https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-800x451.png" alt="Paul Lewin Cannabis Psychedelics Law" srcset="https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-800x450.png 800w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-300x169.png 300w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-768x433.png 768w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-96x54.png 96w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-42x24.png 42w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-60x34.png 60w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law-600x338.png 600w, https://frshminds.com/wp-content/uploads/2022/05/Paul-Lewin-Cannabis-Psychedelics-Law.png 1110w" sizes="(max-width: 800px) 100vw, 800px"/>
</picture>

    How do I solve this issue? do I just regenerate thumbnails?

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author WP Media

    (@wp_media)

    Hi @razorboy

    Thanks for your patience!

    This should work as expected based on the code you provided. But can you deactivate WebP display for a moment and see if it works with standard images form at (code)? It is just to be sure the code change we make when applying WebP does not break things.

    It should not, as I am checking your site and it looks like you have 768px thumbnail and the next smaller one is 300px.

    So, if we visit the site with 400-500px wide mobile screen, the 768px thumbnail will be displayed.

    That being said, it would be good to create another thumbnail size that should be around 500px wide in order to fit these screens more precisely, as you suggested.

    Let me know what you think.

    Best Regards
    Marko

Viewing 1 replies (of 1 total)
  • The topic ‘Sizes not being set correctly’ is closed to new replies.