Add warning when image size exceeds certain limits

[sybrew]

WhatsApp follows much stricter image-sharing requirements than other platforms.

This is because your phone actually loads the site, tries to parse the Open Graph image, downloads it, and then sends that to everyone you wish to send the message to. Normally, this transaction happens on a powerful server hosted by Apple, Meta, X, etc.

However, WhatsApp allows only 600kB images.

I added a new warning system for images in TSF v5.1. This test relies on actively downloading the image via the HTMLImageElement API, so it should be easy to estimate its size.

We could use this to warn users when the selected image is larger than:

1. 600kB, hindering support for many platforms, like WhatsApp.
2. 1MB, hindering support for Apple Messenger.
3. 5MB, hindering support for many platforms, like Twitter Card.
4. 8MB, preventing social sharing on most (all?) platforms, including Facebook.

We should also suggest how to fix this to prevent an influx of support inquiries. For example:

1. Reduce the image size using the editor.
2. Reduce the image size before uploading.
3. Cropping the image.

I don't know if we can select a "smaller" file from the image selector. If this is possible, then we can avoid this altogether.

We should also allow users to adjust the sensitivity of this warning; for example, someone wouldn't necessarily care about WhatsApp.

We may want to consider an image size limit that site owners can set, perhaps 600kB, 1MB, 5MB, and 8MB, with hints on which to use. Simultaneously, it can teach users about the impact of image sizes. Perhaps we can tie this in with the social image selector so that it will always pick the largest available size directly.

Currently, we hard-coded a 5MB limit for images processed via WordPress, and we try to obtain the largest version:

the-seo-framework/inc/classes/data/filter/sanitize.class.php

Lines 453 to 465 in 8417a57

	if ( $id && ( $width > 4096 || $height > 4096 || $filesize > 5 * \MB_IN_BYTES ) ) {
	$new_image = Meta\Image\Utils::get_largest_image_src( $id, 4096, 5 * \MB_IN_BYTES );
	$url = $new_image ? \sanitize_url(
	Meta\URI\Utils::make_absolute_current_scheme_url( $new_image[0] ),
	[ 'https', 'http' ],
	) : '';
	if ( empty( $url ) ) return $defaults;
	// No sanitization needed. PHP's getimagesize() returns the correct values.
	$width = $new_image[1];
	$height = $new_image[2];
	}

Lastly, we may want to register image sizes so that optimal image sizes are available. This should be optional because it can explode the site's disk usage. Before this can happen, we should determine if we can force a registered size selection in the image selector.