---
title: "Image"
description: "Image views and resizable image views in SwiftUI"
url: https://www.swiftuifieldguide.com/layout/image
markdown_url: https://www.swiftuifieldguide.com/layout/image.md
---
> Convenience Markdown export of the HTML page. Interactive samples, diagrams, and visualizations stay on the canonical page.
# Image

An `Image` view has two modes: By default, it displays itself at its [original size](#originalSize). Alternatively, we can make an image `resizable`, which will make it accept any proposal, stretching the image to fit inside the proposal exactly.

> Interactive example on HTML page: Basic.

Note that above, the image is stretched to fit the proposal, and the aspect ratio isn't preserved. To fix this, we can use the [aspect ratio](/layout/aspect-ratio) modifier with either `fit` or `fill` as the content mode. The aspect ratio modifier isn't image specific; it works by first getting the image's [ideal size](/layout/ideal-size) and then using that to either fit or fill the image within the proposed size.

> Interactive example on HTML page: Image With Aspect Ratio.

## Image Sizes {#originalSize}

In SwiftUI, every image has a static size. In general, this is the pixel size of the image. For example, a 100×100 pixel image will be rendered as a 100×100 point image. If we load a static image from our bundle or the asset catalog, the scale factor is considered. For example, a 100×100 pixel image that's marked as 2× will be rendered at 50×50 points. We can also load images and specify the scale factor manually.

## System Images {#systemImages}

When we create system images using `Image(systemName:)`, the image has a very different layout behavior. The system image is rendered at the current font size. While we can still make the images resizable, this is not recommended. Instead, we should use the `font` modifier to adjust the size of the image, as described on the [Dynamic Type](/layout/dynamic-type) page.