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?
Hey All, I've uploaded the Source Code to GitHub, and I also uploaded the Initial Release.
I would love your feedback and pull requests.
Answers
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...
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).
@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.
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
andImageSource
were subclassable, and theToolbar
used aImageSource
instead of aFileImageSource
(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 theToolbar
is so recalcitrant I've given up and just use PNGs for everything.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.
This is what it'll look like.

Or command line
Is the tool available somewhere? I'd like to try it.
@JulienRosen
I'll be posing it on GitHub once I get it semi well-factored and give it a cool name.
@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.
Platform support will simply be a config parameter in app.config.
You can add as many as you like.
Hey All, I've uploaded the Source Code to GitHub, and I also uploaded the Initial Release.
I would love your feedback and pull requests.
@ChaseFlorell - how about Windows RT and UWP support as well. Some crazy people like myself actually use those platforms
@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:
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
@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
WP8.1 RT
UWP
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?
@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.
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 toxxxhdpi
on android? If so, I didn't take that into consideration since Android doesn't supportxxxhdpi
images other than launcher icons.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
@AdamP maybe we can continue the WP Support conversation in an issue?
@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:
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.
As to topic of the original question. Here's my workflow: http://creativepro.com/generating-image-assets-photoshop-cc/