Don’t upscale images beyond their actual full size when displayed?
-
I upload images sized 800×800 and I want them to display on the blog at that size as a maximum.
However, they appear to be upscaled to 100% of the content width to a max of about 956px width when the browser is resized.
This makes them blurry as they are designed to display at their max actual size (800).
How can this behaviour be fixed?
I have tried manually setting the WIDTH and HEIGHT in the options for the IMAGE block, but this makes no difference.
Thanks
WP.com: Yes
Jetpack: No
Correct account: YesThe blog I need help with is: (visible only to logged in users)
-
Hey guys, any suggestions as to how I might be able get some help on this display bug?
-
Tagging Staff members won’t help, on the contrary. This isn’t a bug, you must upload your image in a bigger size; at least the minimum size for the theme you use.
-
@staartmees thank you so much for responding and trying to help.
i’m afraid it most definitely is a bug, though, or at least a most undesirable feature. what is the point in being able to specify the dimensions in an image block if these are not honoured?
the undesirable behaviour is with WP’s responsive layout in which images are automatically resized to fit space available in the window – it really should not resize images beyond their maximum actual size.
are you saying images can ONLY be included in a layout at maximum theme content width? surely not.
by the way, this bug does not only affect theme-specific layouts of posts – it also manifests when the desktop browser window is resized when viewing an image in the “jp-carousel” lightbox.
-
Just to add to what @staartmees said, did you try adjusting the maximum size of images in the Settings>Media dashboard? If not, give it a try and let us know how that goes.
-
thank for the suggestion @justjennifer
i have indeed actually already tried changing the large image size in Media to 800px, uploaded a new 800px wide image and then included that in a test post.
same old behaviour though – on large desktop screens the “responsive” content rescaling algorithm stretches the image to fit the full width of the main content column. that is fine if the overall browser window is about 1230px wide or less, as the content column is then 800. resizing the browser to wider than that, however, responsively resizes the page width up to a maximum of 1500, at which point the main content column is 956px wide and the 800px image is erroneously upscaled to fit the full 100% of the column.
it really is a pretty basic UX design principle not to rescale raster images beyond 100% of their natural size and i find it quite perplexing why WP appears not to provide any way of properly controlling this behaviour.
-
-
@justjennifer thank you so much for the follow-up suggestions – i appreciate your taking the time to help
is the help page you linked to out of date though?
this section from it sounds ideal: https://wordpress.com/support/change-the-width-of-a-block/#change-default-values-for-width-settings
but unfortunately i do not have the menu options it mentions – Dashboard / Appearance → Editor does not exist for me. i have 8 options under Appearance, but Editor is not one of them 😢
Also, the “Align” options mentioned for an image block do not match those that are actually available.
-
The section of the support doc I linked to is relevant for working with the Image Block. The section you linked to would be relevant only if you are using a full Block theme, instead of inserting the Image block in a Classic theme, like Sketch, which you are using.
I’ll set up my test site with Sketch and an 800×800 image and let you know what I find. It may not be until late Monday, however.
I do want to let you know that on my PC with a display resolution of 2560×1440 pixels, I’m not encountering images on your site that exceed 800×800. It would be helpful if you could both upload one of your “problem” images outside of WordPress.com and then also capture a screenshot of how you see that image on your site. A link to that image on your site is also helpful.
-
Nope, going to have to eat my words. That entire Support guide I linked to is only relevant for Full Block Themes. Sorry.
I’ll experiment a bit with my test site and let you know what I find.
-
One quick question, in the right sidebar under SCALE, are you selecting “Cover” or “Contain” when you insert the image? See here: https://wordpress.com/support/wordpress-editor/blocks/image-block/#aspect-ratio
-
@justjennifer thank you so much for taking the trouble to investigate this – I really do appreciate that.
I have “Aspect Ratio” set to “Original” and the “Scale” options (Cover / Contain) are thus not visible.
I am away from home now for a week with only patchy access to Wifi and no access to my desktop PC. When I return though I can obtain some comparison screenshots of how the site renders for me.
thanks again for your help in this! ☺
-
@justjennifer just done a quick test with a laptop (so the discrepancy is not so pronounced compared to bigger screen on desktop PC), but the screenshot shows original 800 x 800 image (before uploading to WP) displayed at 100% on screen with the same image displayed (upscaled) in the blog in Chrome behind it
-
Hi again, could you please upload your original image outside of WordPress.com (such as to box, dropbox, google photos, etc.) and share a link here so I can see it? You can remove the image (but unfortunately not the link from the forum post itself) once I have it. Thank you.
I’m sharing here a temporary screenshot from the dev tools in Firefox on my PC showing the properties of the image as it appears in single post view. As you can see it displays for me *smaller* than 800×800 likely due to some padding/margin involved. I’m getting that same 764.4×764.4 pixel size in Brave as well.
Which prompts me to ask, what browser are you using? This may well be a browser thing. Also, https://wordpress.com/support/images/troubleshooting-blurry-images/
-
@justjennifer thanks again – I’ll need to have a proper look at your latest once i am back at base next week 👍
-
hey @justjennifer !
thank you so much for your efforts in looking into this issue for me – those are every much appreciated.
thanks to your suggestions, i have now managed to get to the bottom of the observed behaviour…
now that i have access again to desktop browsers, i have had a bit of a play…
the same behaviour was observed with all my installed browsers (Chrome, Brave, Edge) – using a screen ruler, the 800px-wide image was responsively resized up to a maximum on-screen size of 956px… but dev tools reported a rendered box size of 765px
i checked display settings (Win 11 Settings / System / Display) and i had:
- Scale: 100%
- Resolution: Recommended (3440 x 1440 [UWQHD])
and the browser settings had:
- Zoom 100%
however, in Settings / Accessibility / Text Size, the size was set to 125% – voila!
765 x 1.25 = 956 !
so, it seems that when the Windows Text Size setting is increased above 100%, browsers scale the whole page (i.e. graphics as well as text)
thanks again for you help with this JJ 😊
-
-
- The topic ‘Don’t upscale images beyond their actual full size when displayed?’ is closed to new replies.
WordPress.com Forums 