Problems standardising image size across devices/browsers
-
Hi,
I need to upload images as icons for partners for our projects. I’ve downloaded various images from these partners to use as icons with hyperlinks. I standardised height (75px) across all images and uploaded them as images onto the pages. It looks fine on my screen (OSX with Chrome, Firefox and Safari) but a few of them are much smaller when looking from other devices, (ipad, iphone) including my boss’s computers (OSX, safari, both desktop and laptop). A couple of them are/were low resolution, but others are fine and still shrink? This page is the one I’m talking about image page
The html is set to standardise the height to 75px, but wordpress seems free to ignore this whenever it feels like it.
Is there a way to standardise some dimensions across all platforms?
Thanks
The blog I need help with is: (visible only to logged in users)
-
Hi –
I’m happy to take a look at this. You’re referring to the header image on this page https://nccc490.wordpress.com/ecological-engineering/ ?
The theme is responsive by nature and that header should be responsive across all devices.
-
Hi, Thanks for having a look at this. It’s not the header that’s the problem. Images under the ‘Partners’. A few of screenshots from an ipad are on
this page and they appear the same on some desktops.As far as I can tell from trying different things it’s to do with the aspect ratio of the pictures. All of the problematic ones are square or closer to square than banner ratio. I’ve tried downloading different versions, different positions, different resolutions, and they end up the same.
Thanks
-
I can’t seem to find the option to edit a reply, but I’ve confirmed that any image with an aspect ratio of less than 2.1:1 will end up being resized, but above it it’s not. Any idea whether I can address this?
-
Hi there,
The problem is Retina, as in this specifically happens on Retina displays – I don’t see it on my MacBook Pro’s external non-Retina monitor, but I do see it on the laptop’s Retina monitor.
Normally if we detect a site is being loaded on a Retina display, we check the size of the image in the media library, and if the image in the library is bigger than the actual image in the post, we instead show the original version of the image and compress it down to the dimensions specified in the post so the image is still crisp on the Retina display.
For this reason, and what would be the best fix in this case, we recommend uploading images at two times the resolution at which they’ll actually be displayed on the site, to ensure they look as good as possible no matter if they’re being loaded on Retina or non-Retina.
If there’s not a bigger version of the image in the media library we can’t do this, which is why some of the images appear low-res to you on Retina displays. And that should be all that happens – the image should just be of a bit poorer quality.
But it would appear that images with a certain aspect ratio is instead compressed to display with original quality. I can’t see why that is happening, but there is an easy way to prevent it without replacing the image with a double-sized version.
Edit the post in the WP-Admin editor: https://nccc490.wordpress.com/wp-admin/post.php?post=70&action=edit
Click on the image and click the pencil icon. In the image settings, change the Size option from Full Size to Custom Size. It should still keep the same dimensions, but for some reason if I do that the image doesn’t get resized on my Retina display any more.
-
Thanks very much for that information, it’s really helpful, I’ll make sure to upload higher res images where possible and if not change the aspect ratio.
-
- The topic ‘Problems standardising image size across devices/browsers’ is closed to new replies.
WordPress.com Forums 