I'm designing a web application for web designers and I'm having some trouble with semantics. I'm trying to figure out whether the word "HiDPI", "@2x", or "Retina" best describes the secondary image a web designer would include in their website to cater to HiDPI screens. Which one instantly makes you think "Oh I know what that's for!" at the sight of the word.


Default Button: Upload HiDPI Image

Uploaded image results in: HiDPI image uploaded.

  • High resolution? Dec 8 '12 at 9:53
  • 1
    @MarjanVenema high resolution doesn't technically imply high DPI
    – Ben Brocka
    Dec 8 '12 at 15:06
  • @BenBrocka: maybe not, but retina is platform specific, "@2x" doesn't mean anything (never even heard of it) and HiDPI does imply high resolution? Upvoted your answer High DPI at least cuts down on the acronyms... :-) Dec 8 '12 at 15:29
  • DPI has nothing to do with the image being uploaded, but rather the screen the image will be viewed on, so all the terms are technically problematic. That said, Retina is an iOS term @2x is an iOS naming convention, though may apply to other platforms. That said '2x' seems to be the least technically troublesome term (as there are 2x the number of pixels in each dimension)
    – DA01
    Dec 9 '12 at 5:31
  • You could always provide the caption as "@2x (double-resolution)".
    – Kit Grose
    Dec 11 '12 at 0:06

I would suggestion High DPI; It's an accurate technical description and not all high-res displays are actually at a pixel ratio of 2 (though if you need to specify multiple images for multiple ratios, individually showing the ratios would be best), and "@2x" makes sense if you think about it, but it requires a higher familiarity with how high DPI stuff works on the web. Worst case when a user has to google "WTF does X mean" it's a lot easier to find what High DPI means as opposed to @2x.

Retina is probably the most recognizable term at the moment, but I hesitate to suggest it as it's the least accurate. Retina is a marketing term used by Apple products; they're not the only high DPI devices out there. If it were a site for Apple enthusiasts, products for iOS/OSX or non-technical users I'd find Retina a more appropriate term, but not in the general case for technical users (who of course should be doing the designing/uploading in most cases).

  • I agree that High DPI helps the designer understand what the image is for. But 2x helps the designer understand how big the image should be compared to the original. Dribbble uses both 2x and HiDPI. The text: "We now support 800×600 pixel images @2x for HiDPI displays. (Huh?)" HiDPI makes more sense when referring to different displays that are <72dpi and 2x makes more sense when deciding what size the HiDPI image should be. Are HiDPI images always 2x bigger than the original? Dec 8 '12 at 20:06
  • 1
    @SergieMagdalin - I think the problem is so young that bests practices for solving it haven't been determined, that's why I don't think "2x" is a good idea. Soon there will be 300dpi desktop monitors, for a dpi range of 72 to 300+.
    – obelia
    Dec 8 '12 at 22:20

For what it's worth, Dribbble, a site targetting graphic and UI designers, uses the term '@2x' for the higher resolution version.

I'd rule out Retina unless you are specifically targetting iOS.

HighDPI could work, though technically, the DPI is irrelevant to the images being upload.

@2x, while someone iOS-centric, is a) still somewhat generic b) relatively self explanatory (twice the pixels in each dimension) and c) short.

So that's my vote: @2x.


I suggest consideration for "hi-res" if you want something terse, or "high resolution" if terseness isn't needed.

I agree with Ben Brocka's points about the problems with "@2x" and "retina". But I think "High DPI" is not necessarily accurate because I may provide to 2 images with the same DPI, one is just much more compressed than the other (and it will have lower resolution).

The problem of such high device DPI disparity (HDDPID ;)) is a new one and we're still trying to figure out solutions to it. (Here's an article about that, note they use the term "HIDPI" to refer high pixel density.) I could envision a methodology that uses the same pixel size images for all devices, but a highly compressed version for low DPI devices and a less compressed version for high DPI devices. Both versions are the same DPI but one is higher resolution.

Then again it might be best to refer to the image's targeted device type, in which "High DPI" or "HIDPI" (as used in the linked article) would be appropriate.

In summary, if we are referring to the characteristics of the image I vote for "hi-res" or "high resolution", but if referring to the image's targeted device "HIDPI" or "High DPI". Either way it would be nice to standardize on something.


This is more of an SEO angle but some keyword analysis might be helpful. Figure out what your users will be searching for and optimize your labels for that.

  • 1
    The approach makes sense, but this web app doesn't have much to do with HiDPI images. That's just one of the features. Nonetheless it's important to focus on the right keywords. I tried to use Google Adwords' keyword tool, but am not sure if it's possible to get a clear cut answer to the question. Dec 8 '12 at 20:24
  • Understandable! Dec 8 '12 at 20:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.