[Resolved] Wrong Thumbnail Size

Home Forums Support [Resolved] Wrong Thumbnail Size

Home Forums Support Wrong Thumbnail Size

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1603573
    Sonja

    Hello,

    I have just startet a new site with on post.

    I have the same settings like on another site of mine (Customizer medium image size), where the thumbnails are 300 px. But on the new site, the thumbnail is 1024 px.

    But according to the WP Settings, medium size must be 300px.

    Hmm, what have i done wrong? The settings are the same.

    #1603817
    David
    Staff
    Customer Support

    Hi there,

    where are you seeing that the image is 1024px ?
    On my browser it displaying a 300px wide image, as my screen is a Retina screen it is requesting the medium-large image of 768px but is purely because the screen requires x2 the pixels.

    #1603858
    Sonja

    Hi David,

    I see it in my Chrome Browser. I have a Browser Plugin called View Image Info (Properties) and it shows: Dimensions: 1024 x 577 px (scaled to 300 x 169 px).

    And what do you mean with your last sentence? Do you mean that the image looks bad on your screen? And if so, what could i do to fix that?

    #1603878
    David
    Staff
    Customer Support

    I think that plugin is simply displaying the original, what is known as the Natural, size of the image – not the Size of the image the browser is loading.

    When you upload an image to WP it will create various sizes images:

    medium: 300px
    medium-large: 768px
    large: 10240px
    Full: if this is larger than the large size.

    Each of these image sizes are included in the HTML. By selecting the Medium size in GP it will write the HTML like so:

    <img width="300" height="169" src="https://ordentlichsauber.de/wp-content/uploads/2021/01/waschbeckenstoepsel-reinigen-300x169.jpg" class="attachment-medium size-medium wp-post-image" alt="" loading="lazy" itemprop="image" srcset="https://ordentlichsauber.de/wp-content/uploads/2021/01/waschbeckenstoepsel-reinigen-300x169.jpg 300w, https://ordentlichsauber.de/wp-content/uploads/2021/01/waschbeckenstoepsel-reinigen-768x433.jpg 768w, https://ordentlichsauber.de/wp-content/uploads/2021/01/waschbeckenstoepsel-reinigen.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px">

    As you can see the width="300" attribute and its max-width: (max-width: 300px) 100vw, 300px

    When the page is loaded the browser checks the image width ( and height ) attributes, the container size the image is within ( as this may be smaller ) and what display resolution the device supports. The browser then selects the best image to fit the space.

    On a standard resoltuion device the browser will request the 300px size image.
    On a Retina or x2 HD screen the browser will request an image that is twice the size. So in my case it requests the 768px wide image and the image looks great!

    So – the image size that the browser is requesting is correct.

    #1603911
    Sonja

    Hi David,

    thanks for explaining this.

    It is a bit weird because on my other sites, this plugin shows the correct 300 px size. Maybe it has something to do with WP Rocket, since i does not have it on the new site installed, but on all the other sites?

    And the second point was a misunderstanding from me, since English is not my first language.

    You wrote “…but is purely because the screen requires x2 the pixels.”

    I understand “poorly” and thought it looks bad … oh my, shame on me ๐Ÿ™

    #1604581
    David
    Staff
    Customer Support

    If those other sites were built on a older version of GP then they may be using the old Image Resizer that GP used. If you want to share a link to one, i can confirm that.

    #1604624
    Sonja

    Hi David,

    no, it is also the newest version and the same site design.

    I have just checked again both sites with the chrome plugin i mentioned.

    The new one with one post shows 1024 and the old (see private information) shows 300 px.

    I also have installed wp rocket on the new site, to check out if this is the cause. but it is not.

    Maybe the chrome plugin is not working correctly.

    But it is no problem, since you checked it. Also i see in the source code, that the image has the suffix “…-300×169.jpg”, so it seems like it is correct, as you said.

    #1604656
    David
    Staff
    Customer Support

    In your old site you have the Lazy Loader option of WP Rocket enabled, which is probably stripping out the other sizes.

    Either way its not something to worry about ๐Ÿ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.