- This topic has 7 replies, 2 voices, and was last updated 1 year, 5 months ago by David.
January 3, 2021 at 5:51 am #1603573Sonja
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.January 3, 2021 at 7:17 am #1603817DavidStaffCustomer Support
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.January 3, 2021 at 8:00 am #1603858Sonja
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?January 3, 2021 at 8:21 am #1603878DavidStaffCustomer 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:
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.January 3, 2021 at 8:50 am #1603911Sonja
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 🙁January 4, 2021 at 2:38 am #1604581DavidStaffCustomer SupportJanuary 4, 2021 at 3:09 am #1604624Sonja
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.January 4, 2021 at 3:40 am #1604656DavidStaffCustomer Support
- You must be logged in to reply to this topic.