How to output transforms for retina images from one upload?

Question

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/[email protected] 2x,
    /assets/images/logos-sponsors/[email protected] 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/[email protected] 2x,
    /assets/images/logos-sponsors/[email protected] 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/[email protected] 2x,
    /assets/images/logos-sponsors/[email protected] 3x" 
    alt="company3_logo" width="130" height="11">

The goal is to have the image uploaded once and then

Answer 1

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

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

Hope this helps.