Image Sizing
-
I’ve noticed that images in existing posts and in newly published scheduled ones set as ‘thumbnail’ have suddenly changed their size, to become much bigger, completely altering the balance and appearance. Is this a temporary glitch, or do I need to go back through every post and mark my intended size manually (which seems to work, but will be an unwelcome task)?
WP.com: Yes
Jetpack: No
Correct account: YesThe blog I need help with is: (visible only to logged in users)
-
Correction: the images I’m referring to are a mixture of ‘Thumbnail’ and ‘Medium’.
eg the first image in the a-z of pasta types page is set to be ‘Medium’ (200×200 in Media Settings) and to be right-aligned in line with text. It appears in my browser in its original size (1000×1000). There’s a reusable block (called footnote) at the bottom of each post and it contains a ‘Thumbnail’ sized image (a book cover) which should appear at 115×149, but which actually appears as 384×500 (the original size). -
Hey there,
Happy to help you with this.
I’ve taken a look at this and what you’re saying makes sense and it looks it looks like this is a quirk with a non-block editor theme and using the block editor, which is resulted in what you’re seeing.
Looking at https://classicpasta.wordpress.com/a-z-of-pasta-types/ for example, I can see the effect you’re looking to achieve there.
Aside from the quirk, I wouldn’t structure this page in this fashion – instead I’d rely on columns blocks: https://en.support.wordpress.com/wordpress-editor/blocks/columns-block/
The reason why I’m suggesting this is because this may be more mobile friendly.
I hope this helps so far.
-
I don’t really know what a ‘non-block editor theme’ is: it’s a current theme and claims 100% compatibility – but this feature doesn’t work as it should (I think it did, but it doesn’t now, which makes me assume that something not in my control has changed).
The column block may be worth me exploring, anyway, but in a post that is mostly text, there is a significant visual difference between having an embedded image with full-width text wrapped around it, and a dedicated column of white space. That doesn’t really apply to the particular page I mentioned (my ‘a-z’), but I have another blog that has been going for many years and it has 100s of pages and many, many instances of this issue.
I did make a copy of my ‘a-z’ page to see how the column block would look, using a 2/3rds 1/3rd split. I can see that there is no need to ‘size’ the image, at all, it appears in the correct proportion of screen width in both desktop & tablet previews, but the mobile view just drops the image (at full width) below the text which should be to its left. I’m not sure that is much progress (but mobile screen widths make it difficult to have images look good, whatever you do).
Thank you for your input. -
Hey @clivesharrison, that test is useful, thank you! I’m sharing it with the team to see if we can sort this out.
I also did a test with Dyad on a test site not on our services, and the image sizes still seem to work there, so it must be something else. We’ll let you know what we find.
-
So, strangely, I tried duplicating your test page using the Twenty Twenty Three theme. I couldn’t: the images are all sized like they should be.
So then I tried copying your exact code to see if it would work on my site, and it does, even with Dyad theme:
So I’m a bit stumped! Have you done any customization to your “default” image sizes on these sites?
-
I haven’t changed any of the defaults for the ‘test’ blog, but on both of my current blogs, the setting for a ‘medium’ image is set to 200×200, rather than the default 300×300. I would expect that entering any alternate preferred sizes would simply change the sizes, not cause a problem: why, otherwise make it a user-definable setting?
One thing that has puzzled me is that as I view my own test post in any of my browsers I see the four images at their original resolution. I can right-click on the image, download it and examine its properties: they’re all the original 2000 x 2000. But viewed in the WordPress viewer, I see something different: they are all sized to fill the same width as the theme allows for text, but are at the resolution set in the image block Resolution setting. The quality gets obviously progressively worse, but the two instances that are sized larger than their actual size have been stretched to fill the space.
I’m not really clear about the intended behaviour: the help documentation seems contradictory (in more than one place) about how these settings are meant to behave, but I wasn’t expecting the Reader to show something I don’t see in a browser.
Oddly, as I view the post in editing mode, the images appear at the size I’m expecting and in the position I’m expecting – but when I publish and view, I see something different. -
I have accidentally discovered that you can ask all sorts of questions intended for email support, but get an AI-assisted response before committing the message. It’s quite fun to back out of the question and refine it, to narrow down an answer – and probably avoid the need for email support altogether.
I got this response to a question about the interaction of the Resolution setting in the image block (which most material takes to refer to size, including the text prompt in the block settings themselves) and the Sizing setting, which has the default of ‘auto’:
“When you select an image resolution, such as “thumbnail,” it does not override the default “auto” sizing option. The image will still appear at the largest size possible in the space, regardless of the resolution specified. The resolution setting only affects the quality of the image, not its size within the block. So, the default “auto” sizing option takes precedence over the selected resolution.”
That seems to flatly contradict the assumption that choosing a set of image setting sizes (Large, Medium, Thumbnail &c) is meant to have any effect on the image size. Is this a change? What’s the point of having the image size options if they’re not meant to do anything? I don’t really understand HOW the results achieved can be dependent on the local device used to log on to wordpress.com. I’m not running a self-hosted version of the application (which I might be able to screw up if I really tried), I’m using the same platform as everyone else, and I have no access to most of what goes on behind the scenes: I get what I get (even if it’s not what I expected to get, and seemingly not what others get). How does that work? -
Hey there
A very strange instance indeed!
I’m using the same platform as everyone else, and I have no access to most of what goes on behind the scenes: I get what I get (even if it’s not what I expected to get, and seemingly not what others get). How does that work?
I think we should examine browser conditions next…
What browser are you using and what extensions are at play (specifically any adblockers, or anything grammar or translation related)? The reason why I ask is because these sorts of extensions have the capacity to add and remove items in the browers from websites… so it’s possible (and heard of) for pieces of code or things in the editor to go missing or be replaced entirely.
Additionally, are you writing content outside of WordPress and pasting it in? If yes, can you tell me more about this flow.
Many thanks in advance!
-
I’m using MS Edge Version 116.0.1938.69 on my laptop. The only installed extension is Grammarly, but my problem is unrelated to text input (but FWIW, I rarely author new text separately, but if I do, I paste plain, unformatted text). If I’m creating a post with one or more image blocks, I’m not sure that I can see much scope for introducing gremlins to the associated settings that are not obviously present to any third party with the ability to examine what I have published – where could they hide?
Your staff colleague ‘supernovia’ commented (above) “I tried duplicating your test page using the Twenty Twenty-Three theme. I couldn’t: the images are all sized like they should be. So then I tried copying your exact code to see if it would work on my site, and it does, even with Dyad theme …”
So the code works for WordPress, but it doesn’t work for me. I can view the post on my own laptop in either Edge or Chrome (Windows 10), my Amazon Fire Tablet (modified android?) or my iPhone (iOS) – four browsers and three OS, and each time I see the same thing. As far as I can tell from your comments (and those of the other staff contributors), you see the same thing as me when viewing my own post too.
I’m baffled. As much by understanding how the sizing and resolution options and supposed to behave, and what relation they have (if any) to the site-wide media sizing settings. Your AI Support bot offers totally different (and directly contradictory) accounts of how these features work, by design, (depending on the emphasis of my question) and that’s pretty unhelpful. -
Suspecting that something associated with my laptop or browser may be affecting authoring new posts, I set up a guest account with authoring rights (using an alternative email account) and accepted my own invitation. The ‘new’ author created a 2nd test post: https://atestsite24.wordpress.com/2023/09/05/guest-test/
The post was created from an iPhone and there’s no obvious way that WordPress could guess that it was really me – a different user name, a different device, a different OS and a different browser.
Based on comments (above) I wasn’t expecting to be able to reproduce my sizing issue. The post contains nothing at all except the same image as used elsewhere, with the Resolution set to Thumbnail in the image control. That’s what I see in editing mode, but having published the post I just see the original high-resolution image – and that is exactly the same behaviour I get from using my administrator account on my own laptop.
I’m not sure that helps … -
My new ‘guest author’ working from his iPhone couldn’t get an image set as a thumbnail to appear as one, so he decided to start his own blog, to see whether his luck would change. Still using the iPhone, not my suspect laptop, he created a new blog (of which he is administrator) and created a test post that contained nothing but an image from a free library (not a ‘tainted’ image of mine) and set it as a thumbnail. Did it work? I see a full-sized image, both on the author’s iPhone and on my laptop. What do you see?
-
Hey there,
Thank you for all of that diligent work and extra information into this.
It’s certainly intriguing and I’m beginning to wonder if we’re at risk of falling into rabbit holes, but let’s continue to rule things out.
So the code works for WordPress, but it doesn’t work for me. I can view the post on my own laptop in either Edge or Chrome (Windows 10), my Amazon Fire Tablet (modified android?) or my iPhone (iOS) – four browsers and three OS, and each time I see the same thing.
This is interesting – on the tablets was this via the WordPress.com app, or via a web browser?
Additionally, do you use a VPN of any kind, and was this happening through the same network connection?
It’s possible the ISP or a VPN is caching files, and potentially CSS/JS files which is why you’re seeing what you’re seeing. Is it possible to replicate this via different connections?
Your AI Support bot offers totally different (and directly contradictory) accounts of how these features work, by design, (depending on the emphasis of my question) and that’s pretty unhelpful.
Thank you for this feedback! This is something we’re constantly looking to improve.
Looking forward to hearing from you!
-
I’ve been away from home for the last day or two (but have my laptop and phone with me). From a completely different location and ISP, I observe identical results on all devices and browsers: the only exception is that the test post I view on the WordPress Reader shows the images at the correct resolution but at the wrong size. On any browser, I can see that the image served is the high-resolution original.
I don’t use VPN services and I clear my browser cache, routinely, regularly (although I recognise that the ISP may be serving cached content).
The bottom line, however, is that I can’t generate content on any device, anywhere, that doesn’t exhibit these bizarre results (but no one else seems able to replicate them), even though I’m including unconnected user accounts, different blogs and different devices in my variables. Perhaps, tongue in cheek, it’s your world that is so connected to all things WordPress, that YOU are looking at an out-of-date cached in-house version of your application, and that the current, live one ‘out there’ has been recently (inadvertently) screwed up by incompatible updates. Just a thought… -
I set up ‘Test 4’: two images (different ones, untainted by my dodgy laptop/browser) and set the resolution for the 1st to thumbnail & the 2nd to medium.
The AI Support Assistant says (direct quote):
Q. When I upload a new high-resolution image does WordPress make copies of the original at the sizes specified in the Image Sizes configured in Media Settings?
A. Yes, when you upload a new high-resolution image, WordPress automatically generates copies of the original image at the sizes specified in the Image Sizes configured in the Media Settings. These copies are used to display the images on your posts and pages, ensuring that they are optimized for different devices and screen sizes. You can change the maximum dimensions of these images in the Media Settings to suit your needs.So I’m expecting to see in the HTML of the rendered page a reference to the copy in its native size. I don’t. What I do see is multiple references to the original file (how does the rendered page even know there is an original file, or it’s name?) in its original name and at its native size (here 1000 x 1000) being called in various combinations at w150, w300 etc. ie, the browser is meant to render the full resolution image (once it has done the heavy lifting of downloading it, no matter how big it is), but the code fails to work.
I’m not an expert in HTML (understatement), but I’m not a fool either. I can see what I can see. The browser is doing the rendering (except that it isn’t), and if WP has created multiple copies of the file at different resolutions for efficient performance, the HTML is keeping very, very quiet about it. NO image except that at URL https://atestsite24.files.wordpress.com/2023/09/img_6037.jpg is referenced.
I’m perfectly content to be shown to be a fool, will someone please put me right? -
Hey @clivesharrison, I don’t think you’re a fool at all; good sleuthing. I suspect a bug somewhere. And @aleone89 is right; finding the right rabbit hole is going to be the trick here.
Earlier,
- I copied your editor code (I’ll call it block editor markup) directly from your test post here.
- I pasted it into the code view of a new post on my test site. You can see a sample here.
You noticed your HTML isn’t showing image sizing. Good catch. My sample, based soley off your block editor markup, seems to have the correct HTML; can you confirm you’re seeing what you’d expect there? And, while that particular test site isn’t using Dyad-2, my messier unpublic test site showed the correct sizing with Dyad-2 activated.
So it seems like the problem is in the HTML that’s getting generated. We’ll do some investigating and let you know what we find.
-
I see your version, and the image sizes render as I would expect them to. But I still see the original high-res image being rendered with a reduced width attribute – which surely is the very thing that the media size settings are designed to avoid – but at least I see the image at the intended size. One of your support colleagues (by email) tells me that they see my own test posts sized just as expected, and presumably you do too. I don’t understand how I’m the only one getting served personal nonsense, particularly as I’ve had no trouble, at all, replicating the issue on several devices via different ISPs, different OS, different user accounts & different browsers. The images are even wrongly sized for me in the Reader (but at least they aren’t the high-res originals, there).
Perhaps I’ll wake up, later, and realise I’m just been having a bad dream. Where does the HTML come from: I don’t have any control over any of it? I can only use the user interface to interact with the standard feature set, like anyone else. The only bit of the code seen by my browser that’s ‘mine’ is the name I gave to the image – but taking the intended behaviour of the media sizing settings at face value, the last thing I’m actually expecting to see is the original high-res image, anyway, but a reduced resolution copy of it. -
Could I ask for specific confirmation on one matter, as I think I may be misinterpreting what the other contributors to this discussion have said about being able to see the error that I see? I understand that neither @aleone89 nor @supernovia can reproduce the sizing error that I see in my own blog and test posts when they recreate the instance in their own tests (even when directly copying the code from my own tests), but I’m not clear on whether they can see the issue directly when viewing my own tests (or whether it’s just me)?
Thanks.
-
One of your support colleagues (by email) tells me that they see my own test posts sized just as expected, and presumably you do too.
I absolutely do see the wrong sizes in your test post. All of the images look the same (full) size.
So I tried copying your test post into my test site, and the right sizes appear there, even when I’m using the same theme. I presume you’re seeing what I see on your test and mine. I’m a bit stumped and will need to do more digging. We should probably consolidate efforts with our email support team, though. I’ll reach out to them.
But I still see the original high-res image being rendered with a reduced width attribute
On my test site, my thumbnail test serves
focaccia.jpg?w=150&zoom=2which dynamically serves a smaller thumbnail. That is what I’d expect, and I presume you see the properly resized image as well.But yeah, it’s not just you seeing only full-sized images on your test site! Sorry for any misunderstanding there. We’ll keep working on this!
- The topic ‘Image Sizing’ is closed to new replies.
WordPress.com Forums 
