Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


update _retina-image.scss to use correct prefix #196

wants to merge 1 commit into from

3 participants


as it specifically says in Apples documentation, you shouldn't use the @2x prefix.

A common file-naming convention for high-resolution images on the web is to prepend _2x >before the file extension; for example, myImage_2x.jpg. Don’t use @2x in the filename, >since the @ character in a URL is reserved as the delimiter separating the username and >password from the host in authentication URL schemes.



Sounds good. :thumbsup:

This should be getting more attention, I know a lot of devs who are using the @2x prefix. uses @2x in their file naming conventions too.


Cool, is there a place I can update the docs or is that somewhere on a server which I can't access?


Great to see Apple providing documentation around this. Bourbon documentation is managed in the gh-pages branch.


I plan on merging this in, but it's going to break backwards compatibility. I want to be strategic about the merge and appropriate versioning. I'll make sure this gets in soon, possibly with bourbon v.3.2.0


@plapier did you merge a different branch than this for the retina image code?


Just pushed the stuff i've been working on. Somehow I missed this PR.

The code has diverged a bit from this PR. See my recent commit: 1bf573a

The suffix has changed to _2x per your recommendation.

@plapier plapier closed this

@plapier commented on 1bf573a

but other than that looks good. :+1:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 23, 2013
  1. update _retina-image.scss to use correct prefix

    Aaron Reisman authored
This page is out of date. Refresh to see the latest.
Showing with 2 additions and 2 deletions.
  1. +2 −2 app/assets/stylesheets/addons/_retina-image.scss
4 app/assets/stylesheets/addons/_retina-image.scss
@@ -8,7 +8,7 @@
background-image: image_url($retina-filename + "." + $extension);
@else {
- background-image: image_url($filename + "@2x" + "." + $extension);
+ background-image: image_url($filename + "_2x" + "." + $extension);
@@ -17,7 +17,7 @@
background-image: url($retina-filename + "." + $extension);
@else {
- background-image: url($filename + "@2x" + "." + $extension);
+ background-image: url($filename + "_2x" + "." + $extension);
Something went wrong with that request. Please try again.