Ok - trying to get my head around retina images in Xojo.
NORMALLY, I would create 2 images for a canvas:
200 x 200 pixels @72dpi
400 x 400 pixels @72 dpi (retina)
Is it not possible to just create 1 image at the normal size (200 x 200 pixels), but make the image at 300 dpi?
Seems stupid having to make 2 images for every canvas, when I can just make one with a higher dpi.
Is there any reason why this cannot be done?
Thank you all in advance.
Well you could, but traditionally it’s not done this way because the 1x version is not simply a scaled down version of the 2x image. Especially when dealing with very small images like icons. Imagine if you did this for icons that needed a 32 and 16px variant. Scaling down from 300px you’d probably just get a blob of color.
[quote=268707:@Richard Summers]200 x 200 pixels @72dpi
400 x 400 pixels @72 dpi (retina)[/quote]
Resolution stands in dpi.
Having two images one the double l x h than the other at the same resolution di-oes not do the trick.
When thinking about HIDPI images, you have two dimensional values.
Pixels, is the amount of… pixels the image contains.
Points, which is the pixel value divided by the DPI scale. The DPI scale is the DPI divided by 72.
When you display graphics on screen, you only worry about the points.
I once tried an Apple recommend image resizing application, apart from a very counter-productive interface, it simply didn’t work. Images came out completely the wrong size. I realized that it only occurred with images that had a DPI of something different to 72. My camera uses 350dpi (I don’t know why), so his software was useless, unless I scrubbed the DPI meta data first.
[quote=268707:@Richard Summers]Is it not possible to just create 1 image at the normal size (200 x 200 pixels), but make the image at 300 dpi?
Seems stupid having to make 2 images for every canvas, when I can just make one with a higher dpi.[/quote]
Right okay, the DPI is simply meta data, it doesn’t alter the amount of pixels, it only takes effect when software choose to draw the image at the images specified DPI. If you did this, you’d have the same image, just drawn 4.16x smaller. If you specified the image to be drawn into 200 x 200, it would still be blurry on a HIDPI display.
In regards to having two images, if you use the correct API, the OS will dynamically load the correct one when needed. A tool like ICNSMini can compress PNG or TIFF files so that they take up less disk space, in some cases, two images use less space than a single 1x image.
The other alternative is to use PDF vector graphics, you draw out your icon or image at the correct resolution. 200 x 200 and the OS will scale the vector artwork for you. You manage only one image, and it’s drawn as sharply and crispy as the OS can.
Hope that this helps.
I can’t decide if HiDPI or RegEx hurts my head worse.
Ok - I did a test.
I have a canvas 396 x 396 pixels.
I created my image to be displayed in it at the following size: 396 x 396 @300 dpi.
This image looks perfectly crisp on both my 27" iMac (non-retina) AND my 13" MacBook Pro (retina).
This seems to confirm my theory, and I can see no blurriness at all???
Now I’m even more confused 
How do you display your image?
I have this code in the Canvas.Paint event:
// CENTER IMAGE IN CANVAS
g.drawpicture CodeSnippets,(me.width - CodeSnippets.width)/2,(me.height - CodeSnippets.height)/2,CodeSnippets.width,CodeSnippets.height,0,0,CodeSnippets.width,CodeSnippets.height
What Picture1.HorizontalResolution/ Picture1.VerticalResolution did you give to CodeSnippets at creation time ?
Youre on OS X. Add a new testing folder (Finder), place two copies of your image: one at 72 dpi, the other one at 300 dpi. cmd-j, click in the bottom radio button, then move the 72 dpi image above the rection area (right of the radio buttons). Watch carefully the size of your image.
Do the same with the higher dpi image (300dpi), and watch the difference (smaller to far smaller ?).
In the old time, the 72 (96 for WIndows) dpi images were for the screen display (like web today), while 300dpi images are for printings purposes. Now, things are a bit different.
Emile - when i do as you described above, the 300dpi image appears smaller when show as the Finder folder background image.
However - this does not happen in my app. The image appears at the correct scale in my app when viewed on both retina AND non-retina screens.
Try it yourself.
// CENTER IMAGE IN CANVAS
g.drawpicture MyImageName,(me.width - MyImageName.width)/2,(me.height - MyImageName.height)/2,MyImageName.width,MyImageName.height,0,0,MyImageName.width,MyImageName.height
Same scale and clear on both 
[quote=268842:@Richard Summers]Try it yourself.
// CENTER IMAGE IN CANVAS
g.drawpicture MyImageName,(me.width - MyImageName.width)/2,(me.height - MyImageName.height)/2,MyImageName.width,MyImageName.height,0,0,MyImageName.width,MyImageName.height
Same scale and clear on both :)[/quote]
Ok, if you want to have to set the width/height every time you draw an image, this will mostly work… But you’re still scaling the image. Try making the canvas 32x32 or 16x16 and you’ll see what I mean.
The example that I like to use for Retina are model train buildings. I used HO and O sizes which are 1:87 and ~1:48 scale, Lets call them 1x and 2x for this example. When you look at the buildings, they’ve done a very good job of making things look sufficiently real while not trying to be over detailed. For instance, @1x, a brick wall will probably be a red wall with tiny raised rectangles, but @2x you can usually clearly see mortar lines a detail which looks great, but would be lost at the smaller scale. Doors and windows are also good examples. Doors @1x don’t have door knobs (how those tiny people get into the buildings is beyond me) and Windows tend to be a simple rectangle. At 2x doors have knobs and windows have cross braces. It’s all about the amount of detail that you need to represent a particular thing at that particular scale so that the observer understands what you’re trying to convey, without going overboard.
In any case, if you want to be able to use the form
g.drawpicture myPic, 0, 0Where you don’t specify width and height, you’ll need two images.
I’d also like to point out that the memory/storage requirements of the two images at 72ppi and 144ppi would actually be slightly smaller than one at 300ppi… Around 25% less.
BTW, if you have a Retina and non-Retina monitor attached to your computer, take a look at the icons in the Navigator for an example of what I’m talking about by actually dragging the IDE between your screens. Specifically the icon for an Image. At 1x, the image has only two frames, but the 2x actually has three. Now these are tiny details, but it’s also a great example why two different images are better than one. The three frames are a much better representation of what we wanted to convey, but at 1x there just aren’t enough physical pixels to draw the middle one, and so it was removed. Just scaling down the 2x icon wouldn’t have worked. Having worked on preparing the Retina graphics for the IDE over the last 15 months, there were quite a few places where this was done.
Another point I’d like to convey… If you’re migrating an old project to Retina, most people didn’t start out with 2x images. Everything is probably 1x and needs to be converted, so you’ll be adding details to your icons as opposed to removing them.
Thanks Greg.
At the moment, my images are reasonably large - thus I can see all the details.
When I need to display smaller images, I will indeed create @1 and @2 versions.
Luckily, all my apps are for personal use, and only small apps, so the extra memory usage is not really a major issue
Thank you for the advice.
What are you using to create the images? It sounds like it’s scaling the perceived pixel dimensions for you. Can you share an image?
Photoshop CC 2015
Hi Richard,
This is what I expected (not sure for smaller): depending on the resolution, the image size will vary.
i created a simple project (2016r1.1) that display two defined images (72 / 144 * dpi).
project with images (260KB).
I set the Picture.HorizontalResolution and Picture.VerticalResolution before loading the image in the Picture.
Watch carefully the code (some lines only), run the project and you will see both images at the same size beside the facts their resolution are different (72 / 144* dpi).
Since I set the Pict as 72 or 144 dpi, the displayed image have the same size.
Also, I do not have my Windows HiDPI laptop handly, so I create the whole on OS X.
I hope this will help.
I searched for 300 dpi (real 300 dpi images, not resized ones) on the internet and found none.
A better (and more real) test will be to use scanned image at 72 dpi AND 300 dpi. If I remember, I will do that this afternoon (using my scannerto get the real images).
I found a site that explains differences netween 36 dpi to 36xx dpi images but all images share the same size on disk which is not possible !
At 144 dpi, two pixels are used to create a dot / At 288 dpi, four pixels are used to create a dot. What makes things confusing is that nowadays, we have monitors that are able to display dots (nonRetina / HiDPI monitors only displays pixels) go figure !
Emile,
The size of an Image doesn’t change if you adjust the PPI.
Maybe I’m wrong (please correct me) but here is my attempt to explain.
DPI = Dots Per Inch is used for printers. The amount of Dots it is able to print per Inch.
PPI = Pixels Per Inch. the amount of Pixels a Screen is able to show per Inch
Points = Often used here on the board when talking about Pixels. Not sure how it’s related because I thought that was for Fonts.
Imagine your Image as a rubber band.
Take a rubber band and draw 10 lines on it within an Inch. Now if you stretch it twice the size, you have the same number of lines but it’s 5 lines per inch.
If you squeeze it together half the size it’s 20 lines per inch.
So you can change the Lines Per Inch as much as you want but the rubber band itself stays the same.
An Image has a number of Pixels.
It also has Metadata that contains the output size. This Metadata is just some additional information and one part of this is the PPI.
This PPI tells you how to draw the Image in the correct (intended) size.
So if an Image is 1000*1000 and the Metadata says that the PPI should be 500, it must be drawn with a width of 500 Pixels per inch.
By default, Images are set to 72 Pixels Per Inch because a long time ago, when Apple’s Printer could only print 72 DPI, it was easier to make the Monitor and everything else 72 PPI as well. (Microsoft went with 96. Not sure why but doesn’t matter)
Nowadays, Monitors display higher amounts of Pixels per Inch but the OS handles the math for you. So if everything works correctly, the above 1000*1000 @ 500 PPI Image should be 2 inch on your Monitor if you measure it with a ruler.
Now if you take this same 10001000 image and open in with Preview. Then go to Tools->Change Size and set the PPI to 250 you’ve changed the Metadata. The Image itself didn’t change. Just the Metadata.
If you display this 10001000 Image again, it will now be 4 Inch wide. (250 Pixels per Inch instead of 500)
So the Metadata is nothing more than some additional information. You can set it to 72 PPI, 150 PPI or 100000 PPI but that’s just the Metadata. The Image itself stays the same.
What you do with this PPI information is up to you. Either let Xojo handle things for you or override/ignore it.
As for Non-Retina vs Retina. Assume you have a 72 PPI Image.
Retina shows twice the amount of Pixels per Inch vs Non-Retina.
This means that when you display the same image with the same PPI on Retina, it will display half the size.
So you can either resize the Image for Retina so that it has twice the amount of Pixels OR use the same Image and adjust the Metadata by setting its PPI to 144.
(Now I’m not into web design anymore but up until 5 years (or so) ago, browsers ignored PPI settings. Highly confusing but multiple 100*100 Images with different PPI settings all showed the same size. So if that’s still the case, please don’t use that as an example.)