Answers.Body: <p>You can do that like so:</p>
  
  <ol>
  <li><p>Create a new <a href="http://buildwithcraft.com/docs/assets-fields">Assets field</a> called “Hi-Res Image” (handle “<code>hiResImage</code>”) with the following settings:</p>
  
  <ul>
  <li><strong>Restrict uploads to a single folder</strong>: [ √ ]</li>
  <li><strong>Upload Location</strong>:
  <ul>
  <li>[same source you’re uploading 1X images to]</li>
  <li><code>{folder.path}_2x/</code></li>
  </ul></li>
  <li><strong>Restrict allowed file types</strong>:
  <ul>
  <li>[ √ ]</li>
  <li>[Images]</li>
  </ul></li>
  <li><strong>Target Locale</strong>: [Same as source]</li>
  <li><strong>Limit</strong>: 1</li>
  </ul></li>
  <li><p>Go to Settings > Assets > [your source] > Fields tab, and add your new Hi-Res Image field to the layout.</p></li>
  </ol>
  
  <p>With that set up, after you select 1X images in your main Assets field, you will be able to double-click on them and see your “Hi-Res Image” Assets field in their metadata modals. You can drag your 2X image into that, and it will automatically get saved into a _2x/ subfolder wherever its parent image lives.</p>
  
  <p>From your templates, you can then output <code>&lt;img&gt;</code> tags that point to both images:</p>
  
  <pre class="lang-twig prettyprint-override"><code>{% for image in entry.myAssetsField %}
      {% set hiResImage = image.hiResImage.first() %}
  
      &lt;img srcset="{{ image.url }}
          {%- if hiResImage %}, {{ hiResImage.url }} 2x{% endif %}"&gt;
  {% endfor %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-08T12:57:31.983Z
Answers.LastActivityDate: 2014-08-08T15:39:19.920Z
Answers.LastEditDate: 2014-08-08T15:39:19.920Z
Answers.UserDisplayName: Brandon Kelly
Body: <p>I want my site to serve 1X and 2X images depending on the browser using something like <a href="http://scottjehl.github.io/picturefill/" rel="nofollow">Picturefill</a>, and I don’t want the 1X version to just be automatically generated using a transform - I want to be able to upload separate 1X and 2X versions, and have them be linked together. How can I go about that?</p>
  
Tags: <assets><image><responsive-images>
Title: How can I upload separate 1X and 2X images?
ThreadText: # How can I upload separate 1X and 2X images?
  
  (Asked by: username_0 on 2014-08-08)
  
  I want my site to serve 1X and 2X images depending on the browser using something like [Picturefill](http://scottjehl.github.io/picturefill/), and I don’t want the 1X version to just be automatically generated using a transform - I want to be able to upload separate 1X and 2X versions, and have them be linked together. How can I go about that?
  
  **Tags:** assets, image, responsive-images
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2014-08-08. Score: 7 | Accepted answer
  
  You can do that like so:
  
  1. Create a new [Assets field](http://buildwithcraft.com/docs/assets-fields) called “Hi-Res Image” (handle “`hiResImage`”) with the following settings:
  
     * **Restrict uploads to a single folder**: [ √ ]
     * **Upload Location**:
       + [same source you’re uploading 1X images to]
       + `{folder.path}_2x/`
     * **Restrict allowed file types**:
       + [ √ ]
       + [Images]
     * **Target Locale**: [Same as source]
     * **Limit**: 1
  2. Go to Settings > Assets > [your source] > Fields tab, and add your new Hi-Res Image field to the layout.
  
  With that set up, after you select 1X images in your main Assets field, you will be able to double-click on them and see your “Hi-Res Image” Assets field in their metadata modals. You can drag your 2X image into that, and it will automatically get saved into a \_2x/ subfolder wherever its parent image lives.
  
  From your templates, you can then output `<img>` tags that point to both images:
  
  ```twig
  {% for image in entry.myAssetsField %}
      {% set hiResImage = image.hiResImage.first() %}
  
      <img srcset="{{ image.url }}
          {%- if hiResImage %}, {{ hiResImage.url }} 2x{% endif %}">
  {% endfor %}
  
  ```
  
  
  ---
  
  