Twenty Thirteen: Consider Header Image Sizing for HiDPI, non-HiDPI, Mobile, and IE8 Compatibility
|Reported by:||celloexpressions||Owned by:|
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.
Change History (9)
- Keywords close removed
- Milestone Awaiting Review deleted
- Resolution set to wontfix
- Status changed from new to closed