›

IMAGES: What steps to you guys do to get them right?

ChaseFlorellChaseFlorell CAInsider, University mod
in Xamarin.Forms

I find that working with images in a cross-platform manner is quite tedious. Android requires 5 versions of an image (ldpi, mdpi (actual size), hdpi, xhdpi, and xxhdpi). And iOS requires 3 versions (default (actual size), @2x, and @3x)... I don't even know what versions WP takes as I haven't had the need to deal with it (yet).

So when I have a need for an image, my current process has been to build it at the largest version (xxhdpi and @3x the same), and then calculate the down-scaled sizes and scale them down.

Now, I feel as though I must be missing something simple because this can be quite time consuming since you'd need to do this for each file. Is there an easier way, or is there a need for a command line tool to do the down-scaling (note: I've already written one).

Also, other than re-sizing, are there any other steps required to make the image correct on all platforms? I've noticed that I get an iCCP warning in Android, and have to go into the droid images and pngcrush them.

Basically I'm just trying to get a handle on the whole image "thing" so that I can simplify my workflow. If there is actually a need for the command line tool that I wrote, I will open source it on Github, but I want to make sure I'm not barking up the wrong tree first. Is there already something baked in or available that I just haven't found yet?

Tagged:

Best Answer

Answers

  • CraigDunnCraigDunn USXamarin Team Xamurai

    FWIW, I also hacked together a little tool (always at the bottom of my todo list to tidy it up and publish it somewhere...).

    The positive side of taking care to provide correctly sized images is that your users get the nicest experience. I actually prefer the design to work best @2x (and hdpi) and scale that by half to get the 1x/default size. This is because the bulk of modern devices are Retina/hi-res and you can get away with a slightly more complex design that way.

    But I don't think you're missing anything. The alternative is to be lazy and provide a single resolution image -- but this is almost always going to look bad on a lot of devices. Maybe some sort of SVG renderer in the toolchain could automate this (depending on your image sources)...

    I wonder if there's already a lot of automation going on...

  • ChaseFlorellChaseFlorell CAInsider, University mod

    Thanks @CraigDunn.

    So the little tool I wired up does just that but at the @3x / xxhdpi level. I do this because I never want to scale UP.

    SVG might be cool, but if it were the case, I'd just embed the svg's in the app and run a custom renderer. I'm thinking more along the lines of images (jpg & png), which SVG doesn't do well (in contrast to icons).

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @ChaseFlorell - I would be interested in that tool, I don't know of anything like it and I spend a lot of time resizing images. As a Xamarin dev, I am quite good at GIMP now :)

    FYI - WP only takes 1 set of images. You just make them bigger and it scales them down as needed. Except for things such as the default icons, which has a small, medium, large. Though WP isn't as ridiculous as Android in its image handling processes so a large image doesn't chew all the memory up.

    Image handling for forms certainly has a need for a tool.

  • DavidDancyDavidDancy AUMember ✭✭✭✭

    There's been a tool called ImageMultiplier for quite a while now that automates not only the sizing but also placing images in the correct directories of your project.

    The source images for ImageMultiplier are SVGs. That's pretty appealing for the designer crowd.

    It works for Android and iOS, and it's a Xamarin Studio add-in.

    The silly thing is that if Image and ImageSource were subclassable, and the Toolbar used a ImageSource instead of a FileImageSource (pretty simple changes all round) we could make our own tools that would use SVGs as image sources and render the required PNGs to the right size dynamically.

    It's currently possible (with some small limitations) to use NControl to do this for all but Toolbar images, but because the Toolbar is so recalcitrant I've given up and just use PNGs for everything.

  • ChaseFlorellChaseFlorell CAInsider, University mod

    I'll be pushing an early alpha version up to github in the coming days. It seems to do what I need for iOS and Android.

    I see @DavidDancy's post re: some SVG tools, but I had a need for resizing PNG and JPG files.

  • ChaseFlorellChaseFlorell CAInsider, University mod

    Or command line

    image

  • JulienRosenJulienRosen CAMember ✭✭✭✭

    Is the tool available somewhere? I'd like to try it.

  • ChaseFlorellChaseFlorell CAInsider, University mod

    @JulienRosen
    I'll be posing it on GitHub once I get it semi well-factored and give it a cool name.

  • SturgmeisterSturgmeister USUniversity ✭✭

    @ChaseFlorell +1 for the image resizing tool - I hope to see it on GitHub soon! I'm sure the community would be happy to help add in WP support if desired.

  • ChaseFlorellChaseFlorell CAInsider, University mod
    edited January 2016

    Platform support will simply be a config parameter in app.config.

      <ImageConfigSection>
    <ImageCollection>
      <!--
        Index 0: root path
        Index 1: file name
      -->
      <add key="ldpi"   pathFormat="{0}\Android\drawable-ldpi\{1}"   scale="4" />
      <add key="mdpi"   pathFormat="{0}\Android\drawable-mdpi\{1}"   scale="3" />
      <add key="hdpi"   pathFormat="{0}\Android\drawable-hdpi\{1}"   scale="2" />
      <add key="xhdpi"  pathFormat="{0}\Android\drawable-xhdpi\{1}"  scale="1.5" />
      <add key="xxhdpi" pathFormat="{0}\Android\drawable-xxhdpi\{1}" scale="1" />
      <add key="[email protected]"    pathFormat="{0}\iOS\{1}"                     scale="3" />
      <add key="[email protected]"   pathFormat="{0}\iOS\{1}@2x"                  scale="1.5" />
      <add key="[email protected]"   pathFormat="{0}\iOS\{1}@3x"                  scale="1" />
    </ImageCollection>
  </ImageConfigSection>

    You can add as many as you like.

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @ChaseFlorell - how about Windows RT and UWP support as well. Some crazy people like myself actually use those platforms :)

  • ChaseFlorellChaseFlorell CAInsider, University mod
    edited January 2016

    @AdamP
    Yeah, it's super simple. Just update the config, adding in your desired resolution to the collection. The scale is simply the number that you'll divide your max resolution by to get your desired output.

    EG:

    original == 120
desired == 40
scale == 3

    Unfortunately, since I don't do much with those platforms, I don't know what the pathFormat should look like.

    Feel free to submit a PR if you know what those should look like.
    NOTE: There's also a DefaultCollection in the assembly, and if we want to always support the pathFormat, we can add it in there as well.
    https://github.com/ChaseFlorell/Downsize/blob/master/src/Downsize/ImageConfigSection.cs#L19

    Contributing

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @ChaseFlorell - I need to test these but they should be correct. However the scales are going to not get the right sizes exactly and be off my a small amount. For example the wpa81-180 is of scale 1.33 but it gets to 180.45. So do the calculations do rounding to the nearest full pixel amount?

    WP8.1 SL just auto scales downwards

      <add key="wp81" pathFormat="{0}\WP81\{1}" scale="1" />

    WP8.1 RT

      <add key="wpa81-100" pathFormat="{0}\WPA81\{1}.scale-100" scale="2.4" />
  <add key="wpa81-140" pathFormat="{0}\WPA81\{1}.scale-140" scale="1.714285714285714" />
  <add key="wpa81-180" pathFormat="{0}\WPA81\{1}.scale-180" scale="1.3333334" />
  <add key="wpa81-240" pathFormat="{0}\WPA81\{1}.scale-240" scale="1" />

    UWP

      <add key="uwp-100" pathFormat="{0}\UWP\{1}.scale-100" scale="4" />
  <add key="uwp-125" pathFormat="{0}\UWP\{1}.scale-125" scale="3.2" />
  <add key="uwp-150" pathFormat="{0}\UWP\{1}.scale-150" scale="2.66666667" />
  <add key="uwp-200" pathFormat="{0}\UWP\{1}.scale-200" scale="2" />
  <add key="uwp-400" pathFormat="{0}\UWP\{1}.scale-400" scale="1" />

    But the question is does the full size version equal the same on each platform. For example

    Scale-400 = Scale-240 = @3x = xxhdpi

    And if not how do we compensate for that?

  • ChaseFlorellChaseFlorell CAInsider, University mod

    @AdamP The rounding will round up to the nearest pixel amount. As for your last question, I'm not sure. I ran the following command on an image that was 120 x 120.

    .\Downsize.exe -i .\test.png -v -d

    And got this for output.

    Begin Processing Images!
    Writing files to C:\Users\ChaseFlorell\Documents\New folder\
    Processing test.png
    New File Name: test.png
    Original Dimensions: 120W by 120H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\Android\drawable-ldpi\test.png
    New Dimensions for ldpi: 30W by 30H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\Android\drawable-mdpi\test.png
    New Dimensions for mdpi: 40W by 40H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\Android\dBrawable-hdpi\test.png
    New Dimensions for hdpi: 60W by 60H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\Android\drawable-xhdpi\test.png
    New Dimensions for xhdpi: 80W by 80H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\Android\drawable-xxhdpi\test.png
    New Dimensions for xxhdpi: 120W by 120H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\iOS\test.png
    New Dimensions for [email protected]: 40W by 40H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\iOS\[email protected]
    New Dimensions for [email protected]: 80W by 80H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\iOS\[email protected]
    New Dimensions for [email protected]: 120W by 120H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\WP81\test.png
    New Dimensions for wp81: 120W by 120H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\WPA81\test.scale-100.png
    New Dimensions for wpa81-100: 50W by 50H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\WPA81\test.scale-140.png
    New Dimensions for wpa81-140: 71W by 71H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\WPA81\test.scale-180.png
    New Dimensions for wpa81-180: 90W by 90H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\WPA81\test.scale-240.png
    New Dimensions for wpa81-240: 120W by 120H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\UWP\test.scale-100.png
    New Dimensions for uwp-100: 30W by 30H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\UWP\test.scale-125.png
    New Dimensions for uwp-125: 38W by 38H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\UWP\test.scale-150.png
    New Dimensions for uwp-150: 45W by 45H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\UWP\test.scale-200.png
    New Dimensions for uwp-200: 60W by 60H
    Would have created C:\Users\ChaseFlorell\Documents\New folder\UWP\test.scale-400.png
    New Dimensions for uwp-400: 120W by 120H

    Finished Processing Images!

    Is that what you would expect to see for Windows Phone? The one that is a little odd to me is the scale-400... is that equivelant to xxxhdpi on android? If so, I didn't take that into consideration since Android doesn't support xxxhdpi images other than launcher icons.

  • AdamPAdamP AUUniversity ✭✭✭✭✭
    edited January 2016

    I will see if I can get some testing on this done over the week to see how they compare across platforms. I think we need a side by side visual in different emulator sizes to see how it all lines up. That can be my next blog post :)

  • ChaseFlorellChaseFlorell CAInsider, University mod

    @AdamP maybe we can continue the WP Support conversation in an issue?

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    @ChaseFlorell I'm having trouble running the tool through cmd. I edited Downsize.exe.config so that each line under ImageCollection has a desired attribute with the desired pixel size. When I run the program, I get:

    Unrecognized attribute "desired". Note that attribute names are case-sensitive.

    Here's my config:

          <add key="ldpi"     pathFormat="{0}\Android\drawable-ldpi\{1}"   scale="4" desired="36x36"/>
      <add key="mdpi"     pathFormat="{0}\Android\drawable-mdpi\{1}"   scale="3" desired="48x48"/>
      <add key="hdpi"     pathFormat="{0}\Android\dBrawable-hdpi\{1}"   scale="2" desired="72x72"/>
      <add key="xhdpi"    pathFormat="{0}\Android\drawable-xhdpi\{1}"  scale="1.5" desired="96x96"/>
      <add key="xxhdpi"   pathFormat="{0}\Android\drawable-xxhdpi\{1}" scale="1" desired="144x144"/>

      <add key="[email protected]"   pathFormat="{0}\iOS\{1}"                     scale="3" desired="60x60" />
      <add key="[email protected]"   pathFormat="{0}\iOS\{1}@2x"                  scale="1.5" desired="120x120"/>
      <add key="[email protected]"   pathFormat="{0}\iOS\{1}@3x"                  scale="1" desired="180x180"/>
  • ChaseFlorellChaseFlorell CAInsider, University mod
    edited February 2016

    There is no concept of 'desired'. The post to @AdamP was an example, not a syntax.

    For your situation, just create an image 144x144 and drop it on the exe.

  • DanielLDanielL PLInsider ✭✭✭✭

    As to topic of the original question. Here's my workflow: http://creativepro.com/generating-image-assets-photoshop-cc/

Sign In or Register to comment.