[wp-trac] [WordPress Trac] #33641: Add support for responsive images using srcset and sizes

[WordPress Trac]

#33641: Add support for responsive images using srcset and sizes
----------------------------+--------------------------
 Reporter:  joemcgill       |       Owner:  DH-Shredder
     Type:  task (blessed)  |      Status:  assigned
 Priority:  normal          |   Milestone:  4.4
Component:  Media           |     Version:
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |     Focuses:
----------------------------+--------------------------
Changes (by joemcgill):

 * keywords:   => has-patch


Comment:

 This is a first pass at a patch for adding responsive image support to
 core, via `srcset` and `sizes`, to core.

 ## Code changes

 This patch adds the following new functions to media.php:

 * `wp_get_attachment_image_srcset_array` - Returns an array of image
 candidate string data used to build a `srcset` value for an attachment
 given an `attachement_id` and `size`.
 * `wp_get_attachment_image_srcset` - Returns the `srcset` value for an
 attachment given an `attachement_id` and `size`.
 * `wp_get_attachment_image_sized` - Returns the `sizes` value for an
 attachment given an `attachement_id` and `size` and optional arguments
 used to alter its output.
 * `wp_make_content_images_responsive` - A display filter for adding
 `srcset` and `sizes` to images embedded in content.
 * `wp_img_add_srcset_and_sizes` - A utility function used by
 `wp_make_content_images_responsive` to add `srcset` and `sizes` to a
 single `img` element.

 This patch also modifies the following existing core functions:

 * Modify `wp_get_attachment_image` so the HTML returned for an image
 includes `srcset` and `sizes`.
 * Modify `get_media_embedded_in_content` by adding `img` to the list of
 accepted tags that can be matched in content. This is used in
 `wp_make_content_images_responsive` to find all of the images embedded in
 content before passing them off to `wp_img_add_srcset_and_sizes`.

 ## Unit tests

 This adds 12 new unit tests to `tests/media.php` and a new factory method
 to `WP_UnitTest_Factory_For_Attachment` named `create_upload_object` which
 creates an attachment and metadata from a file, as discussed in #34075.
 Several existing unit tests were updated to make use of this new factory
 method.

 ## Performance info

 Based on our internal tests, the display filter is adding ~1ms per image
 being filtered. https://github.com/ResponsiveImagesCG/wp-tevko-responsive-
 images/pull/207#issuecomment-145506195

 Running the `wp_make_content_images_responsive` display filter adds 2
 queries to page loads total. By passing an array of all the attachment ids
 to `_prime_post_caches`, we avoid needing to query for post data
 associated with each individual image being transformed.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/33641#comment:9>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform