Featured image size
-
This is a general question about image sizes. I’m using two themes as examples, but I want to understand the basic principles if I can please.
I am curently using the Resonar theme, and thinking about upgrading my plan and switching to the Dorna theme. But before I do, I want to understand featured image sizes please.
In the Resonar theme page, it says the best featured image size is 2000 x 1500. In practice I have used a whole range of sizes, and they all seem to work, some better than others. But I notice that some sizes allow almost the entiure image to appear, whereas other sixes, including the recommended 2000×1500, crop quite a lot off the image, depending on screen size. I’m feeling that 2000 x 1500 may not be best, but rather something like 1600 x 900
The Dorna theme documentation doesn’t seem to mention featured image sizes, so I’m wondering how to work out what’s best.Can anyone give me a reference, or some advice, about how WordPress treats large featured images and the best sizes please?
Thanks so much.
The blog I need help with is: (visible only to logged in users)
-
Hey @overturntables, can you share links to a few pages where the images are being inappropriately cropped? My guess it that it’s more about the image aspect ratio than anything, but I’d need to see some affected images to confirm.
For what it’s worth, different themes handle the decision to crop differently, and decisions on how to crop are a lot more adjustable with the newer themes. If you’d like, I’d recommend creating a new free site, then exporting a copy of the existing one and importing into your new one. It can be a private site for now, and it’ll let you tinker around to see how different themes work with your content. Let us know if you need help getting that!
-
Hi supernovia, thanks for your reply. I think you are right, it is about aspect ratio. It seems that Resonar theme shows a height of 409px for a range of widths from 1600 down to 780, which are aspect ratios from 3.9 down to 1.9. At these screen sizes, the full width is shown but the vertical height is heavily cropped for the recommended image size of 2000×1500, which has an aspect ratio of 1.3.
For smaller screens, the aspect ratio gradually drops down to 1.4 and the width is gradually cropped and the height is less cropped.
You can see al this in this page – https://overturntables.wordpress.com/true-stories/coffee-with-spirit/
In contrast is this page – https://overturntables.wordpress.com/disciples/disciples-in-2021/ – which has an image 1280 x 601, and seems to function far better than the recommended image size.
The Dorna theme seems to function in the same way but its image is only 1440 x 664 (aspect ratio = 2.2), and shows at 591 px high, so very little of the vertical image is lost, though some of the width is lost at small screen sizes.
I think this shows that Dorna has a better image size than Resonar’s recommended, but it would be nice for the image not to be so cropped in width at small sizes.
My feeling, after going through this explanation is that either (1) images need be no higher than the height they are shown at, or (2) they should be higher if the software was written to not truncate the width at lower screen sizes (the height is needed to allow the change in aspect ratio at small screen sizes).
I don’t know if you follow all that, but I think there are two lessons. For me, I don’t need images tallers than about 600 px. For WordPress, maybe the software could b written slightly differently to reduce truncation of widths at lower screen sizes and the recommended images sizes worked out better and stated more clearly.
Thanks so much for your suggestion, which catalysed my thinking here. And I may follow your suggestion of experimenting with a new trial site. Thanks.
-
I’m sorry, the number in that post are all wrong. I used the numbers which showed up when I used “Inspect element” to check the code, and thay aren’t what shows normally. I tried to edit but I wasn’t allowed. Please disregard that post while I correct it.
-
Hello again, I have re-tested all this and the last post was all incorrect. Please trash it if you are able to.
It seems that both themes truncate as required to fit the screen size, as you’d expect. This Resonar page (2000 x 1500, aspect ratio = 1.3) – https://overturntables.wordpress.com/true-stories/coffee-with-spirit/ – seems to lose more of the photo than this page (1280 x 601, aspect ratio = 2.1) – https://overturntables.wordpress.com/disciples/disciples-in-2021/ .
Dorna theme (1440 x 664, aspect ratio = 2.2) seems to work well too.
So my conclusion is much simpler now. I think that for both themes, an aspect ratio of 2+ works better than 1.3. The exact size doesn’t matter so much, although small sizes would get grainy and large sizes might be unnecessarily large files. I think 1600 x 800 might be somewhere near optimal.
Thanks for your patience with my mistakes, and for your suggestion of checking aspect ratio as the key.
-
It is worth adding that mobile screens are different. And there I think the software might be improved. Currently, where I have tested it, mobiles show the graphic square or even portrait, rather then the landscape of the actual graphic. I wonder whether it would be better to reduce the vertical height shown, which shows the graphic more complete but smaller and allows more text to appear on the initial screen. Just a thought.
-
Hey there @overturntables, no worries; I understand what you meant regardless of the numbers. The main issue is that the aspect ratio changes depending on screen size and a theme’s handling, and it sounds like you’re seeing that.
We won’t be able to rewrite the theme’s function, but there are a few options:
- You can use a theme that displays images full width with a height to match its natural ratio. No cropping, and if you use tall images that can get weird. I want to say you can tinker with the settings on Dorna, but you may consider this other option as well:
- Pick featured images that can handle cropping. This may be a better option anyway, since social media previews also get cropped in all sorts of random ways. You can use your uncroppable images in the article, and if your theme supports it, you can make those images wider or full width.
I hope this helps!
-
Thanks again. Curiously, I wrote a reply and it disappeared when I pressed the reply button.
Anyway, thanks for your comments, you have helped me think about all this a lot more. I will see if I can “tinker with the settings” in Dorna – I chose it because I like the look of it, but also because it allows use of the Site Editor.
- The topic ‘Featured image size’ is closed to new replies.
WordPress.com Forums 