Cropped social media image resolution is too high for twitter card

Hello!

TSF forces you to crop images when it’s over 4K (4096×4096) or 5MB (5242880 byte) when using the social image uploader form. When you upload an image smaller than those dimensions (in both width and height), you can opt to skip cropping.

TSF can fall back to an image uploaded via another form (such as the featured image). If that image is over 4K or 5MB, TSF will try to find the largest image near those boundaries, which may be scaled according to your theme or other plugin’s settings.

Twitter Card images may be up to 4K; they’ll crop or scale it accordingly once a link is embedded on their site, albeit unintuitively as of three days ago.

So, yes, this is expected behavior. Are you finding issues when sharing links, aside from Twitter’s new inaccessible embed that no longer features headlines?

Thanks for the response! The issue is not that cropping is occurring — this isn’t being done because the images are over 4K but because the images are not in the right aspect ratio. This is a feature I want! When I upload a featured image that is (for example) 1:1, I like that I can select a region that is 1.91:1 (twitter card ratio) for social media.

But in my experience twitter does *not* support images that are up to 4K. We have been plagued by issues with unreliable twitter cards for months: the image will not display if the width is greater than 1200px. We would like to use TSF (or a different SEO framework) to also scale images down until the width is accepted by twitter. If others have found that twitter truly supports larger images, then I would love feedback about what we might be doing wrong.

Thanks!

Hi there I just wanted to follow up about this: I think I’m correct that twitter card images should not exceed 1280px for reliable display on twitter. (For example, take any New Yorker article and you will see that twitter meta information links to a 1280px x 720px image. This mirrors my experience that images larger than this won’t always appear in the card.)

The SEO Framework [suggests a width of 1200](https://github.com/sybrew/the-seo-framework/blob/f2b9df85614aee8a37adbb1eb4b6ece5d38df185/lib/js/media.js#L104). This is great! Unfortunately then this width is only used to define the final aspect ratio, because the ultimate dimensions are [scaled back up](https://github.com/sybrew/the-seo-framework/blob/f2b9df85614aee8a37adbb1eb4b6ece5d38df185/lib/js/media.js#L413C19-L413C19) to have the highest resolution supported by the initial image.

It would be great to have an option that disables this behavior for some croppers where we want to crop to an exact target resolution rather than a target aspect ratio. (Which we do want to do for twitter meta images and social media images in general).

I can create a git issue for the subject, but in the meantime it would also be great to know how to properly “compile” the plugin after I make these changes. Presumably I need to execute some script that minifies the js. After I make changes to a fork, what’s the right way to make sure these changes will be reflected in the minified files / the plugin behavior? Sorry for the naive question — I’m new to plugin development.

Hi again!

Sorry for my belated reply.

I just tested it, and Twitter does support images up to 4K, but perhaps the encoding or something else is amiss on your website. Could you share a URL where image sharing doesn’t work?

Here’s the page I tested: https://cyberwire.nl/test-large-image2/.
The image is 3.3 MB and 4096×2730 pixels. The results are in the image attached below.

WordPress blocks large image uploads since it introduced filter big_image_size_threshold (WP 5.3). By default, that limits images to 2560 px width and height. I had to disable this feature to test the above.

About your findings, yes, we suggest 1200 x 630. This does only two things:

1. When you select an image, at the top left, you see “Suggested image dimensions: 1200 by 630 pixels.”.
2. We use it to determine the recommended (yet adjustable) aspect ratio.

When you select an image, and it’s over the maximum size of 4096 width or height, TSF will force cropping. When the image is smaller, it’ll allow you to skip cropping. Still, since the aforementioned WP 5.3 feature, a forced crop is unlikely.

As far as I’m aware, we are limited to these options when working with WordPress’s image cropper. Still, specific dimensions are rarely a requirement because window sizes are fluid — hence, larger is always better (with the support of srcsetting when possible, which Twitter should handle here).

TSF should not “increase” the image sizes via its cropper. If it does, it could be a bug in the image processor on your server.

Still, let me know if you find out how to add functionality. We use this to minify scripts: https://github.com/theseoframework/babel-tsf. Please note that the plugin is undergoing a major rewrite and refactor (32,000 lines parsed in the past month), so PRs may need to be rewritten once I get around to them.

If you want to be specific about the dimensions of an image (n.b., the outcome is different per device and service), I recommend using the much more capable GIMP or Photoshop to set the dimensions before uploading them to WordPress.

P.S. Instead of the long overdue Markdown support on these forums, we got blocks ??

• This reply was modified 1 year, 4 months ago by Sybre Waaijer. Reason: fixed HTML markup