Image size shown big in toolbar

Question

I have set 3 images on a toolbar. It looks like so...

Here I added a toolbar, added barbutton items and set images to those buttons. The image type is 1x,2x,3x format and is rendered asa default image.

But the images shown above are shown large while it should have been small given like so...

What have I done wrong..?

EDIT 1: Screenshot of UI layout

Answer 1

Your image resolution must be like below

Tool bar structure

Use barbutton not button

---

I tested it, its work properly

Output

Answer 2

Wherever you define you images you need to use this line:

let image = yourImage
image.size = CGSize(width: 40, height: 40)

If your image is in the storyboard click on the image and then go to the measurement attribute and change the values there.

Explanation: Our app doesn't know what size we want our image to be so it (by default) sets the image size from the image so we need to define our own size.

Answer 3

This because of your images too big. Downscale your image about twice. Good 1x size is 25x25; 2x - 50x50; 3x - 150x150. You could not put 1x images in your asset.