<blockquote>
  <p>I'd like to use image transforms to output the retina images but need
  to preserve the width and height of the original as they vary in look
  and dimensions.</p>
</blockquote>

<p>This statement kind of contradicts itself. :) You want to create different sizes, but keep the width and height of the original? My interpretation is that you'll always be uploading an image that's a number of times bigger that the @1x size? Let's say you always upload these images @3x, try something like this:</p>

<pre><code>{% set myImage = entry.myImage() %}
{% set baseWidth = myImage.getWidth() / 3 %}
{% set baseHeight = myImage.getHeight() / 3 %}

&lt;img 
  src="{{ myImage.getUrl({ width: baseWidth, height: baseHeight }) }}" 
  srcset="
    {{ myImage.getUrl({ width: baseWidth, height: baseHeight }) }} 1x,
    {{ myImage.getUrl({ width: baseWidth*2, height: baseHeight*2 }) }} 2x,
    {{ myImage.getUrl() }} 3x"  
  alt="{{ myImage.title }}" 
  width="{{ baseWidth }}" 
  height="{{ baseheight }}"&gt;
</code></pre>

<p>Hope this helps.</p>

CC BY-SA 3.0
2016-02-17T15:43:03.943Z
2016-02-17T15:43:03.943Z
André Elvan
<p>I have a slide show that shows logos of different dimensions working well in HTML/CSS - the image output looks like below. I'd like to only upload one retina/hdpi image once for the entry where the asset is. I'd like to use image transforms to output the retina images but need to preserve the width and height of the original as they vary in look and dimensions. I can't find an example. I have read <a href="https://craftcms.stackexchange.com/questions/1723/how-can-i-automatically-generate-responsive-images-from-a-single-hi-res-asset/10955#10955">this post</a>
10 times but not really seeing if this holds a solution. </p>

<p>HTML code:</p>

<pre>
[image tag srcset01] srcset="
    /assets/images/logos-sponsors/company1_logo.png 1x,
    /assets/images/logos-sponsors/company1_logo@2x.png 2x,
    /assets/images/logos-sponsors/company1_logo@3x.png 3x" alt="company1_logo" width="130" height="12">


[image tag srcset01] 
 src="/assets/images/logos-sponsors/company2_logo.png" srcset="
    /assets/images/logos-sponsors/company2_logo.png 1x,
    /assets/images/logos-sponsors/company2_logo@2x.png 2x,
    /assets/images/logos-sponsors/company2_logo@3x.png 3x"  
alt="company2_logo" width="52" height="30">
</li>

[image tag srcset01]  src="/assets/images/logos-sponsors/company3_logo.png" srcset="
    /assets/images/logos-sponsors/company3_logo.png 1x,
    /assets/images/logos-sponsors/company3_logo@2x.png 2x,
    /assets/images/logos-sponsors/company3_logo@3x.png 3x" 
    alt="company3_logo" width="130" height="11">

</pre>

<p>The goal is to have the image uploaded once and then </p>

<image-transforms>
How to output transforms for retina images from one upload?
# How to output transforms for retina images from one upload?

(Asked by: username_0 on 2016-02-16)

I have a slide show that shows logos of different dimensions working well in HTML/CSS - the image output looks like below. I'd like to only upload one retina/hdpi image once for the entry where the asset is. I'd like to use image transforms to output the retina images but need to preserve the width and height of the original as they vary in look and dimensions. I can't find an example. I have read this post
10 times but not really seeing if this holds a solution. 
HTML code:

[image tag srcset01] srcset="
    /assets/images/logos-sponsors/company1_logo.png 1x,
    /assets/images/logos-sponsors/company1_logo@2x.png 2x,
    /assets/images/logos-sponsors/company1_logo@3x.png 3x" alt="company1_logo" width="130" height="12">


[image tag srcset01] 
 src="/assets/images/logos-sponsors/company2_logo.png" srcset="
    /assets/images/logos-sponsors/company2_logo.png 1x,
    /assets/images/logos-sponsors/company2_logo@2x.png 2x,
    /assets/images/logos-sponsors/company2_logo@3x.png 3x"  
alt="company2_logo" width="52" height="30">


[image tag srcset01]  src="/assets/images/logos-sponsors/company3_logo.png" srcset="
    /assets/images/logos-sponsors/company3_logo.png 1x,
    /assets/images/logos-sponsors/company3_logo@2x.png 2x,
    /assets/images/logos-sponsors/company3_logo@3x.png 3x" 
    alt="company3_logo" width="130" height="11">


The goal is to have the image uploaded once and then

**Tags:** image-transforms


---

## 1 answers

### Answer by username_1 on 2016-02-17. Score: 3

I'd like to use image transforms to output the retina images but need
  to preserve the width and height of the original as they vary in look
  and dimensions.

This statement kind of contradicts itself. :) You want to create different sizes, but keep the width and height of the original? My interpretation is that you'll always be uploading an image that's a number of times bigger that the @1x size? Let's say you always upload these images @3x, try something like this:
{% set myImage = entry.myImage() %}
{% set baseWidth = myImage.getWidth() / 3 %}
{% set baseHeight = myImage.getHeight() / 3 %}



Hope this helps.


---

