Displaying colorbar shrinks displayed image.

I would like to have two images of the same size, side-by-side, but with the image on the right having a colorbar next to it. I can have two images side by side with the same size, however when I display the colorbar on one image, that image suddenly shrinks. Questions:

1. Why does this shrinking happen?
2. Is there any way to prevent it from happening?
3. If not, is there anyway I can undo the shrinkage once it has happened?

By the way, this shrinking happens both in a simple m-file script (like below) as well as in my AppDesigner app that has two axes placed on the GUI.

Minimum code to demonstrate the problem:

% Read in standard demo image.
fileName = 'peppers.png';
rgbImage = imread(fileName);
% Display image in two axes, side-by-side.
ax1 = subplot(1, 2, 1);
img1 = imshow(rgbImage);
ax2 = subplot(1, 2, 2);
img2 = imshow(rgbImage);

% At this point they're equal size.
% Calling colorbar will shrink the right hand side image.
colorbar; % This immediately shrinks the right hand side image.

% Print out the various position values to see where they differ.
% The format is [xLeft, yTop, width, height].
ax1.Position

ans = 1×4

0.1300 0.1100 0.3347 0.8150

<mw-icon class=""></mw-icon>

<mw-icon class=""></mw-icon>

ax2.Position

ans = 1×4

0.5703 0.1100 0.3347 0.8150

<mw-icon class=""></mw-icon>

<mw-icon class=""></mw-icon>

ax1.OuterPosition

ans = 1×4

0.0788 0 0.3983 1.0000

<mw-icon class=""></mw-icon>

<mw-icon class=""></mw-icon>

ax2.OuterPosition

ans = 1×4

0.5234 0 0.3006 1.0000

<mw-icon class=""></mw-icon>

<mw-icon class=""></mw-icon>

ax1.InnerPosition

ans = 1×4

0.1300 0.1100 0.3347 0.8150

<mw-icon class=""></mw-icon>

<mw-icon class=""></mw-icon>

ax2.InnerPosition

ans = 1×4

0.5703 0.1100 0.2272 0.8150

<mw-icon class=""></mw-icon>

<mw-icon class=""></mw-icon>

% Try to change size (enlarge width and height) of ax2 to match ax1.
% (It doesn't work);
ax2.OuterPosition(3) = ax1.OuterPosition(3);
ax2.OuterPosition(4) = ax1.OuterPosition(4);
ax2.InnerPosition(3) = ax1.InnerPosition(3);
ax2.InnerPosition(4) = ax1.InnerPosition(4);

If I try to change image1 to match image2:

% Change size (width and height) of ax1 to match ax2.

% (Now both images are shrunken);

ax1.OuterPosition(3) = ax2.OuterPosition(3)

ax1.OuterPosition(4) = ax2.OuterPosition(4)

ax1.InnerPosition(3) = ax2.InnerPosition(3)

ax1.InnerPosition(4) = ax2.InnerPosition(4)

That works, but unfortunately now both images are tiny and there is a ton of gray space around the images. Is there any way to have both images the original/larger size?

Answer 1

[Kevin Holly]

Mark,

Here are 3 techniques that you can you depending on what you desire:

Method 1

% Read in standard demo image.
fileName = 'peppers.png';
rgbImage = imread(fileName);
% Display image in two axes, side-by-side.
figure
ax1 = subplot(1, 2, 1);
img1 = imshow(rgbImage);
c1 = colorbar;
c1.Visible = "off";
ax2 = subplot(1, 2, 2);
img2 = imshow(rgbImage);
colorbar

●

Method 2

figure

img1 = imshowpair(rgbImage,rgbImage,"montage");
colorbar

Method 3

tiledlayout(1,2)
nexttile
img1 = imshow(rgbImage);
c1 = colorbar;
c1.Visible = "off";
nexttile
img2 = imshow(rgbImage);
colorbar

[DGM]

Also consider:

% we have a test image
inpict = imread('peppers.png');

% overlay the colorbar without altering image axes position
imshow(inpict);
c1 = colorbar('location','east'); % default is 'eastoutside'

●

... but note that in this example (as in many others), the image content and tick label contrast make readability problematic. The colorbar also obscures part of the image. Whether this is useful depends on what the image and expectations are. It's not a broadly useful suggestion, but I suppose it's fair to mention if preserving axes geometry is the topic.

[Mark H]

Thanks @Kevin Holly, I think method 2, imshowpair will work best in my situation.

Thanks @DGM for your contribution too.