Uploaded Images display smaller than in the Media Library

Try deactivating all of your plugins to explore whether any could be responsible. If none are, keep all plugins deactivated and switch to the Twenty Seventeen theme to check whether it’s an issue with your theme.

Hi Andrew.
Thanks, I gave that a go. Once Jetpack is disabled, I can’t view those portfolio project posts anymore. But I suspect it is the fault of jetpack.

I don’t have any other plug-ins installed and running except for:

– Akismet anti-spam
– Yoast SEO
– Smart Slider
– Child Theme Configurator

Changing the themes brings no improvement.

What I’m noticing now is that if the page is loaded with a big viewport for desktop, the image is original size and sharp. But when I resize the browser down, smaller images seem to be served instead for tablet and then phone (768w and 300w). And because I have the wide panoramic image in the div (overflow:hidden) set to stay at full size in the CSS, no matter what–so it can be scrolled sideways by the viewer–the small substituted images are stretched bigger look terrible.

So: I think this automatic image-swapping is the issue. I wonder how I can disable it?

You can see the image here, under the ‘Scrollable Panorama‘ heading.
https://johnwhiteillustrator.com/wordpress/portfolio/game-irelandtown/

And because I have the wide panoramic image in the div (overflow:hidden) set to stay at full size in the CSS, no matter what–so it can be scrolled sideways by the viewer–the small substituted images are stretched bigger look terrible.

Ah that’s the catch.

I don’t know of a way to disable responsive images just for one instance, so I’m afraid you may have 2 options:

1. Disable responsive images for your site as a whole: https://www.ads-software.com/plugins/disable-responsive-images/
2. Remove this panoramic image

The responsive images feature—presumably—is to reduce load on mobile devices by giving them smaller images to download?

Rather than just using the same image for any device, re-sized by CSS: which is the usual way.

I don’t think I’m worried about the former. I think the slow speed of this current site is more about the system itself or my host. It drags.

Interesting fact:

Firefox displays these alternative images,
Opera and Safari do not. No problems there at all.

Responsive images don’t work in all versions of Opera and some versions of Safari: https://caniuse.com/#search=srcset

The responsive images feature—presumably—is to reduce load on mobile devices by giving them smaller images to download?

I don’t think I’m worried about the former. I think the slow speed of this current site is more about the system itself or my host. It drags.

I don’t understand. This is directly related to your problem.

No, I’m happy that it’s fine in Opera and Safari.
I wish Firefox was the same.

What you’re saying is you want to disable responsive images. You can do so using that plugin.

Alternatively, you need to change the way you’re adding this image. It can no longer be implemented as part of the post, as WordPress will add the responsive image functionality to it.

Instead the image should be uploaded into a Child Theme, then referenced there using a custom modification of the page’s template (through your Child Theme): https://codex.www.ads-software.com/Child_Themes

Hi Andrew,
I’ll give the plug-in a go, thanks. Even if it does come with this caveat:

“This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.”

I use child themes for all my WP sites, but what you suggest there doesn’t sound very straight-forward to a non-techie like myself.

I’m having the same issue. Let’s say my image is 1675 x 2175. Every time I upload the image, it resizes to 462 x 600. It’s driving me crazy!

I don’t actually know the reason for that. Another WP site of mine is shrinking them.