Retina All the Things

[matt]

We did an okay job of getting some menu icons and such Retina in 3.4, but we missed some key parts. Wanted to start a main ticket for all of these, so we don't miss anything. I think we should put these into the 3.4.1 update, and do a nice blog post about it. Places I've noticed missing 2x graphics so far:

• WYSIWYG toolbar icons
• Media upload icons
• W favicon on Press This page
• Spinner used on Press This, probably some other places
• The "scheduling" calendar icon next to where you edit the date for a post.
• The video media icon, when zoomed in on gallery page, probably other media icons - ​http://cl.ly/0E1u3O1c3x0H3f3Q1Q2N
• Generic plugin menu item icon, possibly the arrow to collapse menu - ​http://cl.ly/1I0N470u1z2g3b1Y3N3Q
• Screenshots on about.php (logo at top looks great)
• Comment bubbles, icon at top, point at bottom, and centering of text - ​http://cl.ly/34100L3q1m120d1P3p0Q

Those are the bugs. Longer term we should think about enhancements, and probably new tickets, for:

• Theme screenshots
• Gravatars
• Header graphics on plugin directory
• .org showcase
• Our Tracs

[nacin]

I've been thinking about how we should be handling retina images for a few days now. Ultimately, loading 2x images is not particularly easy. You can do it all via CSS, but that means you may need to know the height and width of the image (for background-size), and also the URL of the image. Not good when you want to potentially 2x every image on the page. Alternatives via JS could mean double-loading (1x then 2x).

There are a number of interesting techniques out there. The one I've liked the most is ​https://github.com/adamdbradley/foresight.js, mainly because its dense readme is very informative, and its ​challenges document clearly outlines a set of philosophies -- a manifesto, if you will. It also does a bandwidth check before deciding whether a device/browser should be served 2x images, which is appealing when a lot of retina devices are still operating over mobile networks.

foresight.js does something like this:

<img data-src="imagefile.jpg" data-width="320" data-height="240" class="fs-img">
<noscript>
    <img src="imagefile.jpg">
</noscript>

For search engines and those without JS, they get the standard 1x image. In order to get the 2x image, you have to pass the bandwidth test, and then the image tag can be set as either 1x or 2x.

It is clever. But I don't entirely like this. It's not a great experience especially on a content-heavy page to need to wait for the DOM to finish loading in order to even get an HTTP request to fire in order for an image to be displayed — which would include regular 1x browsers too. (It should be noted that sometimes, HTTP requests for images don't fire until after DOM ready, but only sometimes.)

I think the best thing is foresight.js with a twist: Since we can do bandwidth checks, we should forgo the idea of preventing a double-loading. (This crosses off the first bullet point on the challenges document.) And then we end up with something like this:

<img src="imagefile.jpg" width="320" height="240" class="fs-img">

Then we get an image, and then some JS can convert img.fs-img's src to -2x.jpg (or _2x, or @2x), and then they become sharper. It's progressive JPGs all over again.

[johnjamesjacoby]

The 2x images in WordPress core, look a bit... wimpy.

Since they are just recycled icon32 images, the borders don't pop like thy used to. You could argue this is a good thing, or intentional, but they just don't look as good as they used to in my opinion.

I had Chelsea redo the bbPress menu icons, without using their icon32 equivalent, so you could see the differences. I've attached a comparison between non-retina and retina, and while subtle, you'll notice the thicker borders on the bbPress icons have more contrast than the thinner borders on the others.

[DrewAPicture]

On 3.4 launch day there was some discussion ​in IRC about how adding the first set of retina graphics and screenshots added significant size to the WordPress footprint (from 3.8 to 4.8 mb or something).

Jane said it best:

Jane__: it's kind of lame that such a small percentage of users causes such a big file size increase

Do we have other options like remote-linking images or maybe doing a retina graphics pack plugin that would have less of an impact on the users who won't use/need these bigger graphics?

[nacin]

We currently pull in Browse Happy browser images from wordpress.org. I wouldn't object to doing it for screenshots on the about page, either. (And that could allow for localizing these graphics, too.)

I don't have any problem with the footprint for 2x images in general that are used throughout WordPress, but I do agree it'd be quite nice to offload all about screenshots to wordpress.org, as all of that together could pretty significantly bring down the zip size and thus speed up upgrades.

[helenyhou]

Related: #16461. Also, per dev chat, we should consider combining with #20980 while we're at it.

[chexee]

2x media upload icons

[matt]

JJJ: let's not let the perfect be the enemy of the better. (Especially for a +0.0.1 release.) For now, let's get all these missing / broken things fixed, and then we can start tweaking and iterating.

[chexee]

I uploaded the media icon sprite Ben sent to us. The source file is committed in the design repo here: ​http://design.trac.wordpress.org/browser/production/wp-admin/images/media-2x.psd

I'm collecting as many source files as I can find so we can get more people redrawing them and not leave it all to Ben.

We should also keep what JJJ said in mind. The thinner borders give a much different look on Retina displays than the normal icons do on normal displays, but like Matt said, not necessary right now.

The scheduling icon will have to be redrawn, as I believe its from a pixelated icon set that was designed specifically for that pixel size. We might even want to think about Dunkle-izing that icon.

We should look into finding CSS3 shapes and rotation solutions for the comment bubbles, menu arrows, and similar shapes (similar to what we did for menu pointers).

[helenyhou]

Not mentioned above, but I thought I'd redraw something I can actually handle - the wp-admin/images/align-*.png images. I've committed the sliced PSD source to the design repo: ​http://design.trac.wordpress.org/browser/production/wp-admin/images/align-icons.psd

The redraw also cleans up some pretty ugly artifacting that was going on in the original images, which also means that the PNGs could be compressed much better - they are now around 120 bytes for the 1x and 150 bytes for the 2x versions, as opposed to being over 500 bytes each as they are currently in trunk. Uploaded here as align-images.zip​. These are used in CSS, so we can patch it that way.

[jane]

Replying to chexee:

The scheduling icon <snip> we might want to think about Dunkle-izing that icon.

Sounds good. Will ping him to take a stab.

[empireoflight]

Replying to jane:

Replying to chexee:

The scheduling icon <snip> we might want to think about Dunkle-izing that icon.

Sounds good. Will ping him to take a stab.

Sorry for being awol on this ticket-working on TINYMCE, bbpress and scheduling icons.

[azaozz]

Replying to nacin:

I think the best thing is foresight.js with a twist: Since we can do bandwidth checks, we should forgo the idea of preventing a double-loading. (This crosses off the first bullet point on the challenges document.) And then we end up with something like this:

<img src="imagefile.jpg" width="320" height="240" class="fs-img">

Then we get an image, and then some JS can convert img.fs-img's src to -2x.jpg (or _2x, or @2x), and then they become sharper. It's progressive JPGs all over again.

This may work well for the screenshots on the About screen, but not for most of the other places. The problem is that most images are loaded as css backgrounds (all the sprites), so there aren't <img /> tags for them.

Another (big?) drawback of using JS is that replacing the images at DOM ready leaves the screen "imageless" for couple of seconds. What happens is the low-rez images start to load together with the html, at DOM ready all half-loaded low-rez images are replaced with the high-rez. That makes the browser send another set of requests for them before the requests for the low-rez images have completed. So now we have double the number of image requests.

During that time the html is rendered and since the "src" for the low-rez images is already replaced, they aren't shown. What makes this look worse is that the screen is rendered without any images and then they start to appear here and there.

Did some quick tests and on slower networks that may be several seconds.

[nacin]

Replying to azaozz:

This may work well for the screenshots on the About screen, but not for most of the other places. The problem is that most images are loaded as css backgrounds (all the sprites), so there aren't <img /> tags for them.

Backgrounds = media queries. It's the <img> tags that are difficult and require this extra work.

Another (big?) drawback of using JS is that replacing the images at DOM ready leaves the screen "imageless" for couple of seconds. What happens is the low-rez images start to load together with the html, at DOM ready all half-loaded low-rez images are replaced with the high-rez. That makes the browser send another set of requests for them before the requests for the low-rez images have completed. So now we have double the number of image requests.

In comment 6, I specifically discuss double requests as a benefit, if done properly.

[azaozz]

Replying to nacin:

In comment 6, I specifically discuss double requests as a benefit, if done properly.

Right, it makes the coding for it easier. The problem is that the low-rez images are never shown, so there's no point in loading them at all.

Alternatively we can try pre-loading the high-rez images with JS and then replacing them after they have loaded. This would have the "progressive JPEGs" effect.

[azaozz]

Replying to azaozz:

Alternatively we can try pre-loading the high-rez images with JS and then replacing them after they have loaded. This would have the "progressive JPEGs" effect.

For this the JS that replaces them would have to run after window.loaded.

[nacin]

Replying to azaozz:

Alternatively we can try pre-loading the high-rez images with JS and then replacing them after they have loaded. This would have the "progressive JPEGs" effect.

Yes, that's what I was suggesting.

[empireoflight]

Source file for retina tinyMCE editor icons

[empireoflight]

What about SVG for a future release? We'd lose some of the subtlety, but scaling wouldn't be an issue. I did a WP home icon at ​http://bendunkle.com/wpsvg/ and showed how it scales up 200%, 400% etc.

[azaozz]

Replying to nacin:

Yes, that's what I was suggesting.

Ah, sry, foresight.js runs at DOM ready so I assumed you were suggesting the same.

In that case the "timeline" should be:

• In the head: determine if 2x images should be loaded and cache that in a session cookie so we don't have to do it on each page load.
• At DOM ready: start pre-loading 2x images.
• As each 2x image loads, replace the original.

[sabreuse]

Replying to empireoflight:

What about SVG for a future release? We'd lose some of the subtlety, but scaling wouldn't be an issue. I did a WP home icon at ​http://bendunkle.com/wpsvg/ and showed how it scales up 200%, 400% etc.

+1 for SVG where possible - it would help with load time/size regardless of resolution, even aside from not needing to maintain multiple sets and helper scripts

[azaozz]

Yes, SVGs would be perfect for the icons assuming the browsers on retina display devices would "know" to render them in higher quality. The problem is... IE8 and under (surprise!). There is an Adobe plugin for IE < 9, not sure how reasonable it would be to force all users with these browsers to install it.

[helenyhou]

Replying to empireoflight:

What about SVG for a future release? We'd lose some of the subtlety, but scaling wouldn't be an issue.

Well, vector sources for assets certainly wouldn't hurt. :)

I'm not sure I agree about using SVG at this moment. Given the level of detail, amount of color, and small sizes currently in use, I would be rather against leaving the end result of the scaling to the browser/OS, and of course then we have to worry about browser support. Good write-up about scaling issues and the need for hand hinting: ​http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html

I'd say any further discussion about SVG usage would need to happen separately from this particular ticket since, at least to me, it implies a redraw and move to single-color/masked icons, which definitely should not happen for something scheduled for a maintenance release. I've seen discussion about making a custom icon font as well, somewhere in the WordPress world.

[empireoflight]

Replying to helenyhou:

Replying to empireoflight:

What about SVG for a future release? We'd lose some of the subtlety, but scaling wouldn't be an issue.

Well, vector sources for assets certainly wouldn't hurt. :)

I'm not sure I agree about using SVG at this moment. Given the level of detail, amount of color, and small sizes currently in use, I would be rather against leaving the end result of the scaling to the browser/OS, and of course then we have to worry about browser support. Good write-up about scaling issues and the need for hand hinting: ​http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html

I'd say any further discussion about SVG usage would need to happen separately from this particular ticket since, at least to me, it implies a redraw and move to single-color/masked icons, which definitely should not happen for something scheduled for a maintenance release. I've seen discussion about making a custom icon font as well, somewhere in the WordPress world.

Thanks Helen; I've read similar articles about the drawbacks of vector icons at low resolutions, but that's the first I've seen that one.
Mainly the articles examine app icons, and not "action" icons, which can be much simpler, and I find that if you adhere/snap to a 16x16 pixel (8x8 is even better) grid, SVGs are crisp at any "2" exponential size (x2,x4, etc but not x3 or x6, I wish I could explain better but I'm bad at math), without hinting. We should definitely revisit this in a new thread.

[azaozz]

In [21101]:

Add 2x TinyMCE icons, props empireoflight, see #21019 for trunk

[azaozz]

In [21102]:

Add 2x TinyMCE icons, props empireoflight, see #21019 for 3.4

[azaozz]

Replying to chexee:

We should look into finding CSS3 shapes and rotation solutions for the comment bubbles, menu arrows, and similar shapes (similar to what we did for menu pointers).

Sounds good, but only for places where the shape can be missing or fall back to rectangle in IE :)

[empireoflight]

Attached with psd. I did a couple others in the psd, but this one's my favorite.
Is there any way we can put the actual day number in the calendar instead of 11?

Replying to jane:

Replying to chexee:

The scheduling icon <snip> we might want to think about Dunkle-izing that icon.

Sounds good. Will ping him to take a stab.

[empireoflight]

I just tested out the new date-button.gif and it's too big at 16x16, at least in Chrome on Mac.
I did this in developer tools:
.curtime #timestamp {
background-repeat: no-repeat;
background-position: left 1px;
padding-left: 18px;
padding-bottom: 2px;
padding-top: 5px;
position: relative;
top: 2px;
}

to get it looking right. We can either mess with

the css or I can do a 13x13 version, and I guess a 26x26 version for retina?

[helenyhou]

Replying to empireoflight:

Is there any way we can put the actual day number in the calendar instead of 11?

There are certainly ways, but maybe something to think about in the future instead? Thoughts? I worry about things like how that will go over for a screen reader if it's text, and making every single one an image is pretty lame.

Replying to empireoflight:

I just tested out the new date-button.gif and it's too big at 16x16

It looks okay to me at the larger size on a regular display, and quite nice on a retina display. Patch: 21019.curtime.diff​. Needs date-button-retina.gif​ renamed to date-button-2x.gif; patch doesn't SVN add it.

Screenshot from FF on OSX, also tested in Chrome and Safari - could probably use IE eyes just in case. I still need to get set up on my current machine.

[empireoflight]

13x13 pixel like the original

[empireoflight]

16x16 with the border a little lighter

[empireoflight]

New psd for date icon with 13x13 icon in it

[empireoflight]

Replying to helenyhou:That looks better than it did when I uploaded it to my wp install:
​http://bendunkle.com/date.png (how do you insert an image into a reply???)
I added a 13x13 icon in case we just want to use that

Replying to empireoflight:

Is there any way we can put the actual day number in the calendar instead of 11?

There are certainly ways, but maybe something to think about in the future instead? Thoughts? I worry about things like how that will go over for a screen reader if it's text, and making every single one an image is pretty lame.

Replying to empireoflight:

I just tested out the new date-button.gif and it's too big at 16x16

It looks okay to me at the larger size on a regular display, and quite nice on a retina display. Patch: 21019.curtime.diff​. Needs date-button-retina.gif​ renamed to date-button-2x.gif; patch doesn't SVN add it.

Screenshot from FF on OSX, also tested in Chrome and Safari - could probably use IE eyes just in case. I still need to get set up on my current machine.

[markjaquith]

Talked to nacin and helenyhou about this. My conclusion is that full and well-thought-out HiDPI coverage for WordPress is going to take time. Many different people need to be wrangled, many assets to need to be re-made, and we face decisions like whether HiDPI screenshots should be in the package or should be hotlinked to WP.org (which has historically concerned people and is not something we like plugins doing). Also, if we take the time to do this really well and thoroughly, this gets to be a headline feature for 3.5, instead of a minor 3.4.x release. Therefore, changing the milestone.

Open question: do we keep the one HiDPI commit we have for 3.4?

[helenyhou]

Replying to markjaquith:

Open question: do we keep the one HiDPI commit we have for 3.4?

Only if you'll allow another commit to tweak some positioning of the icons within the sprite - to my eye it is imperfect, and I don't see why we should bloat the CSS to move things around a couple pixels.

[azaozz]

Replying to markjaquith:

Open question: do we keep the one HiDPI commit we have for 3.4?

If we revert it, that would give enough time to look at refreshing the editor toolbar looks too as discussed in #18141.

In any case the HiDPI sprite for the editor icons should be tweaked a little to position the icons better. There are 2 pixels for each pixel in the "LoDPI" sprite so the icons placement can be more precise. Think that's better than tweaking the positions in css.

[nacin]

In [21118]:

Revert [21102] for 3.4. see #21019.

[matt]

Found another place we've missed, the list / excerpt switchers on the edit posts page:

​http://cl.ly/1l261I280o113D2y2H45

[matt]

Another, the arrow on the help tab:

​http://cl.ly/3z00002L0i2W3W1N3A3g

[lessbloat]

made some sprite positioning tweaks

[brandondove]

What about approaching this like github did? They created a symbol font with all of the icons they needed. That would allow for infinite scaling, it would simplify the iconography, and it would reduce the file size.

[empireoflight]

List expanded view icons at 2x resolution

[empireoflight]

list expanded view icons psd file for design repo

[empireoflight]

2x retina arrows for help etc.

[empireoflight]

2x retina arrows for help etc. psd for design repo

[empireoflight]

The video media icon on gallery page at 2x

[empireoflight]

The video media icon on gallery page at 2x, psd for design repo

[helenyhou]

2x TinyMCE icons, positions tweaked

[helenyhou]

wpicons-2x.tweaked.png​ from lessbloat (smushed) looks good for 2x TinyMCE - better icon placements. Tweaked PSD committed to design repo.

[azaozz]

In [21245]:

TinyMCE icons sprite with tweaked positions, props lessbloat, see #21019

[azaozz]

In [21246]:

Add 2x icons for the list/excerpt switch on the Posts screen, props empireoflight, see #21019

[johnjamesjacoby]

desrosj has a plugin in the repo for adding retina support to core uploads.

Noting here if there's an opportunity to work together, and to see an already-existing approach.

​http://wordpress.org/extend/plugins/simple-wp-retina/

[johnjamesjacoby]

2x icons in 1x mode - bbPress vs WordPress

[johnjamesjacoby]

In the above attachment (1x-artifacting.png) you'll see what happens when HiDPI mode is off, but 2x icons are rendered by the browser. To purposely duplicate this odd behavior:

• Have a Retina MacBook Pro.
• Connect Cinema Display.
• Open Safari.
• Move Safari 50% between the rMBP display, and the Cinema Display.

The bbPress icons with thicker line widths render normally, the WordPress core icons with thinner line widths render with artifacts as a result of the downsizing. Currently, apps and websites need to earn the right to render 2x content. 1x is the default display mode. If anything fails during this communication, and we push out 2x icons on a 1x display, slightly thicker lined, dedicated 2x icons render much more smoothly than the current icon32 implementation.

It's edge-case, and you can argue it's the browser or OS's problem to deal with, but ultimately it impacts millions of users, and it's within our power to control.

[lessbloat]

A couple of these still seemed off (including ABC icon) so I make a few tweaks.

[azaozz]

Replying to johnjamesjacoby:

In the above attachment (1x-artifacting.png) you'll see what happens when HiDPI mode is off, but 2x icons are rendered by the browser.

Not sure what we can do about it if the browser "thinks" it's on a high-density display. We only can detect whatever the browser has detected.

[azaozz]

@lessbloat I see why all these tweaks are necessary. The positions in the original 1x sprite are all over the place. To fix the 2x sprite we need to start with the 1x and then reset the tweaks in the css.

[azaozz]

In [21295]:

Retina: fix the icon positions in the original editor buttons sprite, reset the css tweaks and adjust the positions in the 2x sprite, see #21019

[azaozz]

In [21296]:

Add query args to refresh the sprite images, see #21019

[helenyhou]

Continuation from comment:18, finally:

21019.image-align.diff​, needs the images in image-align-smushed.zip​. Bonus: total size of the 8 files is 1025 bytes, compared to 2167 for the current 4 files.

[helenyhou]

What's left:

Everything below needs 2x versions, likely .png files (smushed, please, and review the size of the original as well), source files (PSD, AI, or EPS, sliced and/or layered when appropriate), and a patch, which will probably be mostly CSS. Would love if we could aim for not increasing the overall package size too much - reviewing the compression of existing images is a good place to do that as well.

Really, anything in those images folders could use a 2x version for real retina support, but the following seem to be the most noticeable.

CSS-it

Some things can be done with CSS. Comment bubbles come to mind, as well as gradients. See #16461 for gradients.

wp-admin/images

• Date/calendar icon (from publish metabox) - need to determine which versions to use; 21019.curtime.diff​ exists at the moment for a patch, may need position tweaking depending on what's chosen.
• Arrows - empireoflight uploaded one version here of the gray. We need three more - dark gray, blue (-vs), and dark blue.
• Media buttons - there are five of them, the most important being media-button.png. Need 2x + PSD with both sizes. Maybe consider generic classes in the admin CSS for plugins/themes to use to get the retina benefit, since we are keeping the other four icons due to high plugin usage (see #20980)
• Generic admin menu icon - this is generic.png
• Image edit icons
• Press This icon
• Ratings stars
• Spinners - these are mostly the wpspin_*.gif files, but there are a couple others that need a review and might not be used at all (see #20980 again). The dark one could really just use a redraw, or be dropped from core (see #20957). The light one wouldn't hurt from a redraw, either :)
• xit.gif

wp-includes/images

• Media library/mimetype icons - we have the video one from empireoflight, but looking more closely, these are from the ​Crystal icon set. We should just regenerate from the largest set and hand-hint the resized versions (some really look terrible resized down, notably the music/midi one), unless somebody wants to do a real redraw in a more WP style. If hand-hinting from the Crystal set, would like a PSD with both sizes of each icon.
• Admin pointer - blue arrow and flag icon
• RSS icon - might even be worth using a new one entirely for both sizes
• xit.gif - as above

And finally, if somebody wants to grab the current 2x version of the TinyMCE editor icons and move the pieces of the ​PSD in the design repo around, that would be great. chexee or I can commit the tweaked version. Would love to see the 1x version in PSD form if it exists as well. Source files for everything!

If I've missed anything, feel free to chime in. Just wanted to get a feel for where we are now and have a list to point to when getting people involved.

[johnjamesjacoby]

Replying to azaozz:

Replying to johnjamesjacoby:

In the above attachment (1x-artifacting.png) you'll see what happens when HiDPI mode is off, but 2x icons are rendered by the browser.

Not sure what we can do about it if the browser "thinks" it's on a high-density display. We only can detect whatever the browser has detected.

You're right, though a dedicated hidpi icon-set with thicker outlines and more contrast helps this tremendously.

[empireoflight]

OK, I'm going through these now...

Replying to helenyhou:

What's left:

Everything below needs 2x versions, likely .png files (smushed, please, and review the size of the original as well), source files (PSD, AI, or EPS, sliced and/or layered when appropriate), and a patch, which will probably be mostly CSS. Would love if we could aim for not increasing the overall package size too much - reviewing the compression of existing images is a good place to do that as well.

Really, anything in those images folders could use a 2x version for real retina support, but the following seem to be the most noticeable.

CSS-it

Some things can be done with CSS. Comment bubbles come to mind, as well as gradients. See #16461 for gradients.

wp-admin/images

• Date/calendar icon (from publish metabox) - need to determine which versions to use; 21019.curtime.diff​ exists at the moment for a patch, may need position tweaking depending on what's chosen.
• Arrows - empireoflight uploaded one version here of the gray. We need three more - dark gray, blue (-vs), and dark blue.
• Media buttons - there are five of them, the most important being media-button.png. Need 2x + PSD with both sizes. Maybe consider generic classes in the admin CSS for plugins/themes to use to get the retina benefit, since we are keeping the other four icons due to high plugin usage (see #20980)
• Generic admin menu icon - this is generic.png
• Image edit icons
• Press This icon
• Ratings stars
• Spinners - these are mostly the wpspin_*.gif files, but there are a couple others that need a review and might not be used at all (see #20980 again). The dark one could really just use a redraw, or be dropped from core (see #20957). The light one wouldn't hurt from a redraw, either :)
• xit.gif

wp-includes/images

• Media library/mimetype icons - we have the video one from empireoflight, but looking more closely, these are from the ​Crystal icon set. We should just regenerate from the largest set and hand-hint the resized versions (some really look terrible resized down, notably the music/midi one), unless somebody wants to do a real redraw in a more WP style. If hand-hinting from the Crystal set, would like a PSD with both sizes of each icon.
• Admin pointer - blue arrow and flag icon
• RSS icon - might even be worth using a new one entirely for both sizes
• xit.gif - as above

And finally, if somebody wants to grab the current 2x version of the TinyMCE editor icons and move the pieces of the ​PSD in the design repo around, that would be great. chexee or I can commit the tweaked version. Would love to see the 1x version in PSD form if it exists as well. Source files for everything!

If I've missed anything, feel free to chime in. Just wanted to get a feel for where we are now and have a list to point to when getting people involved.

[empireoflight]

This one has all 5 media icons.

[empireoflight]

PNG of the media icons. Needs to be sliced or arranged in a sprite

[empireoflight]

2x dark grey arrows

[empireoflight]

2x dark blue arrows

[empireoflight]

2x blue arrows

[empireoflight]

Arrows psd file

[empireoflight]

Generic gear icon in 16,32,and 64, with color and VS versions. No color version for 64 since that's the header icon.

[empireoflight]

Generic gear icon slices

[helenyhou]

@empireoflight - just a note: uploading attachments doesn't trigger any email notifications, so whenever you've uploaded something or are done uploading a bunch of things, please leave a comment indicating what's been done so somebody knows to check on the ticket and follow up.

[nacin]

Spun off #21388, retina theme screenshots.

[nacin]

Spun off #21389, retina custom headers.

[empireoflight]

Image editing icons at 2x, psd file for repo

[empireoflight]

Image editing icons at 2x

[empireoflight]

Image editing icons psd for repo, please delete the other one

[empireoflight]

Image editing icons are done at 2x

[empireoflight]

Press this icon psd for repo

[empireoflight]

Press this icons 2x...the hand is very strange and I don' know what it does

[empireoflight]

Added press this icons png and psd

[empireoflight]

2x rating star psd for repo

[empireoflight]

2x rating star

[empireoflight]

I think I just uploaded the star used for the ratings...

[Joen]

Retina version of the light spinner

[Joen]

Retina version of the dark spinner

[Joen]

Light and dark retina spinners, PSDs

[Joen]

Added light and dark retina versions of the spinners used on widget pages, menu pages and edit post pages. Looks like the dark version isn't used anywhere anymore -- a grep reveals it's only linked in manifest.php and the widget page, and on the widget page it's never shown.

[empireoflight]

2x xit.gif psd for repo

[empireoflight]

I actually started doing these, and then thought about doing it as a png and using css to rotate it, and then just put it off-thanks for jumping in.
My only suggestion would be to use a 1px border to define the edge of the spinner, rather than 2px as you have it, since that's how all the other 2x icons are.

Replying to Joen:

Added light and dark retina versions of the spinners used on widget pages, menu pages and edit post pages. Looks like the dark version isn't used anywhere anymore -- a grep reveals it's only linked in manifest.php and the widget page, and on the widget page it's never shown.

[empireoflight]

Added 2x xit.gif icon. The pink in that icon is really hot.

[empireoflight]

rss 2x psd

[empireoflight]

rss rx png

[empireoflight]

Added rss icons at 2x

[empireoflight]

flag icon 2x psd

[empireoflight]

flag icon 2x png

[empireoflight]

Added flag icon at 2x psd png
could that be...everything?

[Joen]

Replying to empireoflight:

I actually started doing these, and then thought about doing it as a png and using css to rotate it, and then just put it off-thanks for jumping in.
My only suggestion would be to use a 1px border to define the edge of the spinner, rather than 2px as you have it, since that's how all the other 2x icons are.

Glad you like them.

I'm concerned about using 1px border weights for retina screens. Keep in mind, the point of retina is that the pixel size remains the same, its density is just 2x higher. Which means if I were to make a 1px border width for the retina version spinner, when seen on a retina screen it would look like "half a pixel". So not only would it be stylistically different from the 1x version, the border width would be so thin it would be almost non existant. A colleage of mine has one of the new Macbooks, I've seen the pixels. They're REALLY small :)

[helenyhou]

Replying to empireoflight:

My only suggestion would be to use a 1px border to define the edge of the spinner, rather than 2px as you have it, since that's how all the other 2x icons are.

I'm with Joen - I think we should leave it with the thicker border. Since the spinner is not used as a background image, we need to figure out how to deal with it. If we just let the browser scale it down for regular displays, then a 2px border is likely necessary.

[Joen]

Replying to helenyhou:

Since the spinner is not used as a background image, we need to figure out how to deal with it. If we just let the browser scale it down for regular displays, then a 2px border is likely necessary.

One sort of hacky way, is this:

.cssclass img {
width: 16px;
height: 0;
padding-top: 16px;
background: url('spinner.png') no-repeat center center;
background-size: 16px 16px;
}

-- not super clean, essentially it pushes the actual image out of the img container, and shows the retina version as a bg image. Super easy, and works well, despite the hacky nature.

[empireoflight]

Replying to Joen:
Well now I have an excuse to go get one of those new retina macbooks ;)

Replying to empireoflight:

I actually started doing these, and then thought about doing it as a png and using css to rotate it, and then just put it off-thanks for jumping in.
My only suggestion would be to use a 1px border to define the edge of the spinner, rather than 2px as you have it, since that's how all the other 2x icons are.

Glad you like them.

I'm concerned about using 1px border weights for retina screens. Keep in mind, the point of retina is that the pixel size remains the same, its density is just 2x higher. Which means if I were to make a 1px border width for the retina version spinner, when seen on a retina screen it would look like "half a pixel". So not only would it be stylistically different from the 1x version, the border width would be so thin it would be almost non existant. A colleage of mine has one of the new Macbooks, I've seen the pixels. They're REALLY small :)

[azaozz]

In [21399]:

Retina: add image editor 2x icons, props empireoflight, see #21019

[taylorde]

Adding standard HiDPI media query as well as -webkit prefixed version

[taylorde]

Retina background images added to media.dev.css

[taylorde]

I noticed we're using the -webkit prefixed version of the retina query. e.g. @media only screen and (-webkit-min-device-pixel-ratio: 1.5) but the non-prefixed version should probably used as well for future compatibility. Also, specifying the background-size using auto as one of the parameters will ensure the original aspect ratio of the image is kept. Attached media.dev.css-retinaized.diff and will start going through and adding the -webkit prefixed version to other areas as well

[azaozz]

Replying to taylorde:

I noticed we're using the -webkit prefixed version of the retina query. e.g. @media only screen and (-webkit-min-device-pixel-ratio: 1.5) but the non-prefixed version should probably used as well for future compatibility.

There is an good article on this: ​http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

So this should work everywhere:

@media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
       (min-resolution: 150dpi)             /* Everyone else */ {
...
}

Also, specifying the background-size using auto as one of the parameters will ensure the original aspect ratio of the image is kept.

True, but the retina background images have to match exactly 2x the non-retina backgrounds, or the positions will shift.

[taylorde]

Replying to azaozz:

There is an good article on this: ​http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

Oh, good article. So yes, the unprefixed version uses min-resolution. That same article suggests that for pixel ratios < 2 there are some inconsistent implementations and offers the dppx unit instead. i.e. this:

@media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
       (min-resolution: 1.5dppx)              /* The Future */
...
}

Thoughts on using dppx vs. dpi?

True, but the retina background images have to match exactly 2x the non-retina backgrounds, or the positions will shift.

I think all of the incoming 2x graphics are exactly 2x, but I could be more explicit to avoid any issues. Thanks!

[azaozz]

Yes, dppx is "the future", only implemented in Firefox at the moment. The "early implementations" that are inconsistent seem to be in older browsers, not in use any more. Perhaps it would be safer to use dpi for now until dppx gets implemented everywhere.

When swapping the background images, the exact screen dpi doesn't really matter that much as long as we are on a high-density screen, i.e. the dpi is quite higher than the default CSS dpi of 96.

[taylorde]

HiDPI media queries for media.css, colors-fresh.css, colors-classic.css

[taylorde]

Attached a .diff for HiDPI media queries for colors-fresh.css, colors-classic.css, media.css

Requires the following image files in wp-admin/images

• align-none-2x.png
• align-left-2x.png
• align-center-2x.png
• align-right-2x.png
• xit-2x.gif
• arrows-2x.png
• arrows-dark-2x.png
• list-2x.png
• icons32-2x.png
• menu-2x.png
• arrows-dark-vs-2x.png
• arrows-vs-2x.png
• icons32-vs-2x.png

All of which are either already there, or are attached to this ticket already and needed to be (possibly) renamed and added. Also, for info, this doesn't cover all of the images possible (#header-logo used in press-this.php, for example) should probably be looked at as well. Ticket #16461 should take care of a lot of that, however.

[taylorde]

Media Queries for HiDPI files added to wp-admin.css

[taylorde]

Added a patch file for wp-admin.css to add media queries for the above HiDPI images.

[helenyhou]

azaozz said he will review HiDPI_media_queries_classic_fresh_media.diff​ and HiDPI-wp-admin_css.diff​, now that #16461 and #20980 are in.

[azaozz]

Thinking more about the @media queries:

• WebKit requires -webkit-min-device-pixel-ratio.
• No other browser supports HiDPI mode at the moment.
• All current browsers support min-resolution in dpi, only Firefox nightlies support it in dppx.

If we use min-resolution in dpi we will be sending 2x images to all browsers but they won't be using/showing them in HiDPI. As the browsers add support for HiDPI mode, they would most likely be adding support for min-resolution in dppx as well. So dppx can be used as another "check" whether to send 2x images to the browser.

In that terms it would be logical to go with what @taylorde suggested above.

[helenyhou]

Per dev chat today, let's go with just -webkit-min-device-pixel-ratio for now, and add support for things that don't really exist in the wild yet separately and comprehensively, since previous HiDPI additions don't have dppx or otherwise. taylorde is going to take a stab at refreshing and consolidating patches. See also lessbloat's upload of the 2x pointer flag.

[taylorde]

Consolidation of existing patches and some cleanup

[taylorde]

Images used in 21019.diff

[taylorde]

Uploaded 21019.diff and a .zip of the images used in that patch as a way to consolidate all previous patches and the many images uploaded.

Added HiDPI Support for the header logo of "Press This" on both color schemes. 32x32 logos sourced from wordpress.org/about/logos

2x images needed:

The HiDPI menu icon sprite for the classic (blue) color scheme seems to be missing. Until that image is available, I'm using menu-2x.png.
wp-admin/images/menu-vs-2x.png

Other images that don't have a 2x counterpart, but could probably use one:
wp-admin/images/media-button-2x.png
wp-admin/images/bubble_bg-2x.gif
wp-admin/images/comment-grey-bubble-2x.gif

[helenyhou]

Replying to taylorde:

Uploaded 21019.diff and a .zip of the images used in that patch as a way to consolidate all previous patches and the many images uploaded.

Awesome. Things I noticed in the zip: while these may end up not being needed at all in the end, the image alignment icons actually have redrawn 1x versions as well, that are significantly smaller. I also don't think we need to worry about the spinners in this ticket, and the dark one is gone.

2x images needed:

The HiDPI menu icon sprite for the classic (blue) color scheme seems to be missing. Until that image is available, I'm using menu-2x.png.
wp-admin/images/menu-vs-2x.png

Other images that don't have a 2x counterpart, but could probably use one:

• wp-admin/images/media-button-2x.png
• wp-admin/images/bubble_bg-2x.gif
• wp-admin/images/comment-grey-bubble-2x.gif

I think it'd be nice to see the bubbles done as CSS instead of cutting new images, and then we can use the IE stylesheet to fallback there, since I don't think we have to worry about HiDPI and versions of IE that don't support border-radius.

Other than that, though, would be good to see 2x version of the media button and the blue version of the menu icons.

[empireoflight]

Attached menu-vs-2x.png and menu-vs-2x.psd

[empireoflight]

Media button at 2x resolution

[empireoflight]

Media button at 2x resolution, psd file

[empireoflight]

Media button at 2x resolution, psd file

[empireoflight]

Added media-button-2x png and psd

[azaozz]

In [21980]:

Add menu-vs-2x.png and 2x media-button.png, pngcrush all in wp-admin/images, props empireoflight, see #21019

[azaozz]

Tried replacing the file type icons with 2x versions (from the 128px Crystal icons) but not looking that good at 1x (left: old 46x60 icons, right: new 96x120)

May need to convert these to backgrounds or use some CSS tricks to replace the images for HiDPI.

[empireoflight]

Replying to azaozz:

Tried replacing the file type icons with 2x versions (from the 128px Crystal icons) but not looking that good at 1x (left: old 46x60 icons, right: new 96x120)

May need to convert these to backgrounds or use some CSS tricks to replace the images for HiDPI.

Alternatively the current icons can be enlarged and sharpened a bit to look good at 2x and 1x.

Should I do a new set at all sizes in the WP style?

[helenyhou]

2x media-button.png scaled down does not look very good, almost impossible to discern.

[azaozz]

Replying to empireoflight:

No need, at least for now. We just have to figure out how it's going to work for these icons.

Replying to helenyhou:

Yeah, it doesn't look too different from the old one at least on my screen, but may need to bring it back (depending if that button/link changes).

[ocean90]

21019.media-icon-fullscreen.patch​:

Before:

After:

[azaozz]

In [22031]:

Consolidated patch for retina support, props taylorde, props empireoflight, fixes #21019

[azaozz]

In [22032]:

Fix image button in DFW, props ocean90, see #21019

[TobiasBg]

        background-image: url('../images/icon-pointer-flag.png'); 

in the corresponding HiDPI section of wp-pointer.css is missing the -2x, isn't it?

[azaozz]

In [22077]:

Fix "add media" icon in DFW for IE < 9, restore media-button.png, add media-button-2x.png and make them background images, see #21019

[azaozz]

In [22078]:

Fix typo in wp-pointer.css, props TobiasBg, fixes #21019

[miqrogroove]

Added a quickie patch for Retina Gravatars at #22329.

[lessbloat]

I did a quick audit of retina images in trunk, here are some 2x images I found missing:

In wp-admin/images/

No 2x icon:

• bubble_bg-rtl.gif
• bubble_bg.gif
• comment-grey-bubble.png
• media-button-image.gif
• media-button-music.gif
• media-button-other.gif
• media-button-video.gif
• no.png
• resize-rtl.gif
• resize.gif
• se.png
• sort.gif
• stars-rtl.png
• stars.png
• yes.png

Has 2x icon in attachment above, but hasn't been committed:

• press-this.png
• generic.png

In wp-includes/images/

No 2x icon:

• arrow-pointer-blue.png
• down_arrow.gif
• rss.png
• /smilies/
• toggle-arrow.png
• wpmini-blue.png

[lessbloat]

Images in thickbox plugin also needed 2x equivalents. Fixed in thickbox-retina.diff (should include new tb-close-2x.png and updated loadingAnimation.gif image).

[nacin]

So, of lessbloat's list, these need 2x in wp-admin:

• bubble_bg.gif and bubble_bg-rtl.gif
• comment-grey-bubble.png
• resize.gif, resize-rtl.gif
• stars.png, stars-rtl.png
• sort.gif

And in wp-includes:

• arrow-pointer-blue.png - part of pointers
• down_arrow.gif - part of the editor
• rss.png - part of the feed widget, and would be browser scaled down
• wpmini-blue.png - used in the My Sites toolbar menu, and should really be moved into the admin-bar-sprite.png files
• toggle-arrow.png - used in internal linking

These are no longer used in core and do not need 2x:

• media-button-image.gif, media-button-music.gif, media-button-other.gif, media-button-video.gif - exception is video.gif in Press This, see #19569
• yes.png, no.png - old media uploader
• se.png

The big unknown would be smilies. Not sure what to do there.

[nacin]

Our smiley image tags are not bound by height or width, which means we can't just shove a 2x image in there, even if we re-create all 22. Consider retina smilies punted.

[nacin]

In 22377:

HiDPI Press This bookmarklet image. props empireoflight. see #21019.

[nacin]

Patch expects that the generic sprite from empireoflight is merged into icons32.png, menu.png, menu-vs.png, and the 2x of all three.

[nacin]

In 22378:

Update Thickbox images for HiDPI. props lessbloat. see #21019.

[lessbloat]

Goes with 21019.2-with-sprites.diff

[lessbloat]

Updated CSS for 21019.2.diff​

[nacin]

In 22393:

HiDPI versions of the generic menu page icon. props empireoflight, lessbloat. see #21019.

[empireoflight]

I'll get working on these asap, especially if anyone has a a dribbble.com invite laying around... :)

Replying to nacin:

So, of lessbloat's list, these need 2x in wp-admin:

• bubble_bg.gif and bubble_bg-rtl.gif
• comment-grey-bubble.png
• resize.gif, resize-rtl.gif
• stars.png, stars-rtl.png
• sort.gif

And in wp-includes:

• arrow-pointer-blue.png - part of pointers
• down_arrow.gif - part of the editor
• rss.png - part of the feed widget, and would be browser scaled down
• wpmini-blue.png - used in the My Sites toolbar menu, and should really be moved into the admin-bar-sprite.png files
• toggle-arrow.png - used in internal linking

These are no longer used in core and do not need 2x:

• media-button-image.gif, media-button-music.gif, media-button-other.gif, media-button-video.gif - exception is video.gif in Press This, see #19569
• yes.png, no.png - old media uploader
• se.png

The big unknown would be smilies. Not sure what to do there.

[saracannon]

resize x2

[saracannon]

RTL resize x2

[saracannon]

sort retina version

[saracannon]

attached resize and sort x2 images.

[saracannon]

Retina Tails

[saracannon]

Attached Retina tails: noticed that the name uses an underscore instead of a standard dash (incase we want to change)

[saracannon]

Retina PSD for design repo

[saracannon]

RTL tails

[saracannon]

Added in Retina Comment Tails RTL: I propose that we eventually plan on switching to CSS for this (does IE really need tails?) :)

[saracannon]

Retina Grey Bubble

[saracannon]

Grey Bubble PSD for repo

[saracannon]

uploaded comment-grey-bubble-2x.gif​

[nacin]

Thanks saracannon! That leaves four:

• stars.png (and stars-rtl.png)
• arrow-pointer-blue.png - part of pointers
• down_arrow.gif - part of the editor
• toggle-arrow.png - used in internal linking

[empireoflight]

In the original, the solid star seems smaller than the outlined star. I made them the same size in these; not sure if that's right, please advise.

[empireoflight]

I think that;s everything. Forgot to add 2x to the stars and arrow pointer files, so someone should rename those.

[lessbloat]

Excellent! Thanks @saracannon and @empireoflight. I'll work up a patch of everything that's remaining later this afternoon.

[azaozz]

Replying to empireoflight:

In the original, the solid star seems smaller than the outlined star. I made them the same size in these; not sure if that's right, please advise.

Yes, they need to be different sizes. These are used in two overlayed divs so the yellow star fits inside the outline star (depending on ratings).

[SergeyBiryukov]

Related: #22375

[lessbloat]

A couple of notes for 21019.3.diff​:

• I ran all images through ImageOptim.
• I forced rss.png to display rss-2x.png all of the time (instead of having to add CSS into the theme). 2x version looks fine sized down on non-retina display.
• RE: smaller yellow stars - @azaozz, I tried this with a couple of different sizes, and could never get it to look right on retina. Leaving the yellow star full size would be my recommendation (as it looks sharp, and doesn't result in any weirdness).

[azaozz]

In 22439:

More retina backgrounds and bits, props saracannon, empireoflight and lessbloat, see #21019

[azaozz]

Replying to lessbloat:

...smaller yellow stars - @azaozz, I tried this with a couple of different sizes, and could never get it to look right on retina.

Perhaps we can ask @chexee to have a look. As far as I remember she made these :)

The stars don't look 100% on retina, the yellow is supposed to indicate the % rating so it may not show the whole star. Here is a screenshot from iPad (max zoom-in):

[lessbloat]

Replying to azaozz:

Perhaps we can ask @chexee to have a look. As far as I remember she made these :)

Yep, would love for someone else to give it a try. I tried reducing the size of the solid yellow star (at multiple dimensions), but there were always visible quirks on a retina display. For instance, there would be more white space at the bottom then the top.

[empireoflight]

In this one you could potentially just hide one as your reveal another instead of overlaying the solid one on the outlined one.

[lessbloat]

@empireoflight's stars in comment:128 look good to me with a very slight tweak: 21019.4.diff

[helenyhou]

Can we please not change the look of the stars? Remember that they appear on .org as well, and I think they are rather nice as-is. Can see if chexee can recreate at 2x.

[lessbloat]

Works well with 21019.4.diff​ to get the stars looking the same whether retina or not.

[helenyhou]

stars-2x.3.png​ is courtesy of chexee. Probably just need a flip for RTL, if I remember correctly. Have the source as well - there's a lot here to go through and commit to design/asset repo whenever we're all set.

[nacin]

In 22479:

HiDPI rating stars. props chexee. see #21019.

[nacin]

rss-2x.png doesn't look like the formal RSS logo (which rss.png is), and it doesn't look as good when scaled down. Also, since this affects the front-end of the site, it is outside of the scope of this ticket.

wpmini-blue-2x.png looks good but could cause some compatibility issues with people overloading this and inserting actual favicons. I'm going to clean that up a bit.

[nacin]

In 22481:

Final HiDPI tweaks. Don't use rss-2x.png on a front-end widget. Improve selectors for favicons in the toolbar to avoid breaking existing images. Remove unnecessary RTL styles. FIXES #21019.

[miqrogroove]

The anti-aliasing on the text alignment buttons looks really weird to me on my iPad 3. Retina images should be sharp instead of blurry. Left, center, right, and justify are my least favorite. The ordered list and unordered list buttons have a similar issue that is slightly less noticeable. By comparison, the new indent and outdent buttons look much better.

Everything else looks great.

[nacin]

Replying to miqrogroove:

The anti-aliasing on the text alignment buttons looks really weird to me on my iPad 3. Retina images should be sharp instead of blurry. Left, center, right, and justify are my least favorite. The ordered list and unordered list buttons have a similar issue that is slightly less noticeable. By comparison, the new indent and outdent buttons look much better.

I see what you mean. Worth a new ticket? A screenshot from a retina device (so, looking at them in context) could also help.

[miqrogroove]

Sure. Added #22431

[TobiasBg]

Considering that WP 3.5 will be the "in-the-wild" version for a few months, and that we'll likely be promoting "Full Retina/HiDPI support" as a key feature for 3.5, wouldn't #22238 be a candidate for 3.5, given the steadily increasing support of HiDPI browsers/devices that we have seen in the past few months and that we will see in the upcoming months?
MT has done some nice testing of the media query in that ticket for wp.com already.

[azaozz]

In 22586:

TinyMCE: fix styles, add 2x background icons and load buttons.css in the Edit Image modal, remove wp-view styles from content.css, add 2x icons for the popup buttons (for editing image and gallery), fixes #22447, see #21019

[helenyhou]

Looks like the down_arrow-2x.gif that went in inadvertently had a white background. Need to replace with down_arrow-2x.2.gif​, via lessbloat.

[helenyhou]

Oh, right, new tickets. #22481

[helenyhou]

Committed source files provided in [D8], [D9], and [D10]. If I missed anything, let me know.