WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 6 hours ago

#43524 new enhancement

Add another default image size

Reported by: azaozz Owned by:
Milestone: 5.0 Priority: normal
Severity: normal Version:
Component: Media Keywords:
Focuses: Cc:

Description

We've had the srcset and sizes attributes for quite some time and they seem to work quite well.

One problem is that we don't have a 2x images for the built-in large size. Currently when displaying images larger than 512 px on the front-end on devices with high pixel density screens, the browser has only one choice: to output the full size/original image. These images are often as large as 6000px x 4000px and 4MB or even larger.

To fix this and not output needlessly large images we need a new size that should be 2x the current "large" size, max 2048px width or height.

Change History (8)

#1 @azaozz
4 months ago

Once we add that, we can consider changing the logic when outputting the srcset attribute and use the new "xlarge" size as the largest available.

Last edited 4 months ago by azaozz (previous) (diff)

#2 follow-up: @joyously
4 months ago

Would you call it "2xlarge" and have it be a computed size?

#3 in reply to: ↑ 2 @azaozz
4 months ago

Replying to joyously: Hehe, yep, can be any name that makes sense. If we follow t-shirt sizes, 2xlarge should come after xlarge, right? :)

The size should be 2 x large, so 2048px should be the max width (for landscape) or height (for portrait).

Last edited 4 months ago by azaozz (previous) (diff)

#4 follow-up: @birgire
3 months ago

Sounds like xlarge could be a good addition, but then there's the default 1600 maximum image width for the srcset:

/**
 * Filters the maximum image width to be included in a 'srcset' attribute.
 *
 * @since 4.4.0
 *
 * @param int   $max_width  The maximum image width to be included in the 'srcset'. Default '1600'.
 * @param array $size_array Array of width and height values in pixels (in that order).
 */
$max_srcset_image_width = apply_filters( 'max_srcset_image_width', 1600, $size_array );

#5 in reply to: ↑ 4 @azaozz
24 hours ago

Replying to birgire:

We can increase that :)

Also been thinking if we would need 2x medium_large size. That'd be 1536px (can round it up to 1600px?). This will be used for the 2x (retina) images in post_content, as the main column in pretty much all themes is not wider than 768px (800px).

Adding these two new sizes will significantly improve the selection of image sizes, so the browsers will be able to pick a better match from the srcset attribute when displaying images on the front-end. However it will also bump up the processing time/resource usage on the server when creating the image sub-sizes after uploading an image.

This may cause more timeout errors on some shared hosting accounts. Ideally we should have a way of regenerating missing image sizes after an image is uploaded. That depends on #40439 and #43525 being done.

#6 follow-up: @joyously
19 hours ago

Could the 2x stuff be made optional? Most of the sites I work with do not need this, and it seems like such a waste of disk space (out of the client's quota), along with not needing to worry about that extra processing causing timeouts, etc.

#7 in reply to: ↑ 6 @azaozz
14 hours ago

Replying to joyously:

Could the 2x stuff be made optional? Most of the sites I work with do not need this

You mean you never use "large" image size on a retina screen? What about your site's visitors, do any of them have larger high-density screens? :)

#8 @joyously
6 hours ago

I'm saying that most of my client sites have small images and/or themes that don't display wider than about 1200px.

Note: See TracTickets for help on using tickets.