Lesson Length -


Bring life to your experiences with Images.
Close Video


Let’s bring in some Images

We can either add an Image element from our Insert Menu or we can use the keyboard shortcut I.

An image can either come from a URL, or we can load a File from our hard drive.

Image from File

To do bring an Image in from our hard drive, we hover over the image area in the inspector, and click Choose Image:

Our image is now embedded in our Judo file so when you send this design to someone else or store it for yourself, there's no need to send the image asset as well; just the .judo file.

Image from URL

To load an image from a URL, choose URL from the top then type or paste in the address of your image:

Resolution (Scale Factor)

We can set the Resolution that our Image asset was created for by selecting the appropriate Resoltution of either 1x, 2x or 3x.

You can read some more helpful information on Image Resolution as quoted directly from Apple's website as part of their Human Interface Guidelines Documentation:

Image Size and Resolution
"The coordinate system iOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x). As a result, high-resolution displays demand images with more pixels. For example, suppose you have a standard resolution (@1x) image that's 100px × 100px. The @2x version of this image would be 200px × 200px, and the @3x version would be 300px × 300px."

Resizing Mode

These allow your Image to fill your layout in different ways.

Original Size: 

If you want your image to always display at the size you sliced it from something like Sketch or Adobe XD, we’d choose Original Size here.

However, if we want our image to respond with different screen sizes, we’d choose scale to fit or fill.

Scale To Fit: 

This mode will not crop our image and will maintain our aspect ratio.

Scale To Fill: 

This mode will fill the space given with the image even if that means cutting some of it off, but the aspect ratio will be maintained.

That’s it for Images, next up is Icons.

Was this lesson helpful?