[wp-trac] [WordPress Trac] #24024: Twenty Thirteen: Consider Header Image Sizing for HiDPI, non-HiDPI, Mobile, and IE8 Compatibility

[WordPress Trac]

#24024: Twenty Thirteen: Consider Header Image Sizing for HiDPI, non-HiDPI, Mobile,
and IE8 Compatibility
------------------------------+---------------------------
 Reporter:  celloexpressions  |       Type:  defect (bug)
   Status:  new               |   Priority:  normal
Milestone:  Awaiting Review   |  Component:  Bundled Theme
  Version:  trunk             |   Severity:  normal
 Keywords:                    |
------------------------------+---------------------------
 Currently, all of the built-in header images are sent at 3200px wide to
 all browsers regardless of HiDPI or viewport, and sized down to 1600px
 with background-size.

 For non-HiDPI displays, there's no reason to go over 1600px wide, so the
 images should be shrunk to save on bandwidth (though they're quite small
 already). Load the smaller images by default and add the media queries to
 pull the larger ones on HiDPI devices (already being done for search icon
 and dotted-line images, not a big deal to do in custom-header.php as
 well).

 It's also worth considering even smaller images for mobile devices, but
 that could be somewhat messy to do in addition to HiDPI for those devices.

 IE8 doesn't support the background-size property, so the header image
 displays at full, 3200px size (see screenshot). The built-in Twenty
 Thirteen header images aren't designed to be size/position-dependent, but
 perhaps this is too visually different? Using 1600px by default would
 resolve this (this is what led me to notice all of these issues).

 Custom headers, on the other hand, are only created for frontend at the
 1600px width, so they will display normally in IE 8 but not optimally for
 HiDPI. I would suggest making multiple sizes for display at different
 resolutions of the images users upload, as would be done for built-in
 images. I doubt 3200px images will be uploaded frequently, but they might
 at least be more than 1600, and background-size will adjust accordingly if
 the images are between 1600 and 3200 px wide. Looking at custom-
 header.php, this may not be as easy as it seems due to the reliance on
 core functions for the custom header and the lack of support there. But it
 should be trivial with core's image resizing capabilities.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/24024>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software