[wp-trac] [WordPress Trac] #21038: Provide an option for creating 2x images of user content (for Retina Displays)

[WordPress Trac]

#21038: Provide an option for creating 2x images of user content (for Retina
Displays)
-----------------------------+-----------------------
 Reporter:  twam             |       Owner:  Otto42
     Type:  feature request  |      Status:  assigned
 Priority:  normal           |   Milestone:  3.5
Component:  Media            |     Version:  3.4
 Severity:  normal           |  Resolution:
 Keywords:  needs-patch      |
-----------------------------+-----------------------

Comment (by Otto42):

 Image replacement proposal:

 Basic outline: Use Javascript image replacement to dynamically replace
 images that have HiDPI versions available with the larger images.

 How to do it:

 - For every image size, generate a HiDPI version at 2x the size if the
 following conditions are met:
   1. No larger image exists that is at least 2x the desired size, and
 which has the same cropping conditions.
   2. The "full" image is large enough to support such a resizing.

 To simplify, if we have a thumbnail which is 150 wide and not-cropped,
 then as long as the medium or large size is at least 300px wide and not-
 cropped, then we don't have to generate a special hidpi-thumbnail image
 size, since we can simply use the next larger size.

 This does mean that we will most likely always need to generate a hidpi-
 large size that is twice the size of the large size, if the full version
 is large enough to allow us to do it reasonably.

 Next:

 - When inserting that image into the editor, include a data-hidpi-url or
 similar to provide the browser with the URL of the hidpi version of that
 image. Since we already include appropriate width/height tags, then the
 larger image will be displayed correctly at that width/height.

 - For the case where no hidpi version is available or can be created, then
 simply do not include the data-hidpi-url tag.

 Finally:

 - Use some small static JS code inserted into the header or footer to scan
 for data-hidpi-url tags and do the image replacement for appropriate
 browsers. Ideally do this without the use of jQuery.


 Notes:

 - This intentionally does not cover handling existing posts. Only "new"
 posts would be covered by this. Older posts don't have the images
 generated properly, and also won't have the data-hidpi-url in their HTML.
 A plugin can go retro-fit older posts, if desired. Perhaps add it into the
 various regen-thumbnail plugins.

 - Same image replacement code with the data-hidpi-url could be used to
 handle img tags for the custom-headers in #21389.


 Finally:

 - All of the above can be made into an "option" on the Settings->Media
 page if it's felt that it's worth it. Ideally, this approach would be
 fully backwards compatible and not break anything, but some people may
 feel it's not worth having the (most likely just one) extra image
 generated.

 Suggestions welcome.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/21038#comment:15>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software