<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>

CC BY-SA 3.0
2014-08-08T12:57:31.983Z
2014-08-08T15:39:19.920Z
2014-08-08T15:39:19.920Z
Brandon Kelly
<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>

<assets><image><responsive-images>
How can I upload separate 1X and 2X images?
# 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:

Create a new Assets field 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

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  tags that point to both images:
{% for image in entry.myAssetsField %}
    {% set hiResImage = image.hiResImage.first() %}

    
{% endfor %}


---

