Think you know Sketch? — Let’s bust some myths!

Learn more

Think you know Sketch? — Let’s bust some myths! Learn more

Skip Navigation
Documentation Designing Images

Images

Last updated on 19 Sep 2023
3 min read

Aside from working with vector-based shapes, you can also add and edit images directly in Sketch.

Inserting images

The simplest way to add an image to a Sketch document is to drag it straight from your Mac or a browser window (or right-click to copy, then paste it into Sketch). Alternatively, choose Insert > Image from the Menu Bar and select an image, or choose Image Image Layer from the Toolbar.

Do you use Sketch in full screen mode but want to quickly insert an image from your Mac? As you drag an image from Finder, press ⌘⇥ to quickly bring Sketch to the foreground again, then drop your image.

You can drag images directly on to the Canvas from your Mac

Replacing images

If you’ve resized and styled an image layer in your document but want to replace the image itself, select it and choose Layer > Image > Replace in the Menu Bar.

You can quickly replace an existing image using the Layer menu

You can also replace an image by dragging it from your Mac onto an existing image layer, or a layer with an image fill.

Reducing image size

Adding lots of images to a document will increase its file size and ultimately start to slow down the Mac app. To help prevent this, try to reduce an image’s size using Layer > Image > Minimize File Size from the Menu Bar. Sketch will also tell you if it can’t reduce the file size any further.

If your docment contains lots of images, try File > Reduce File Size as a quicker alternative to reducing image sizes one by one.

An image of the minimize file size modal

If your document is very large, try to minimize image sizes

Editing images

To edit an image you added to the Canvas, double-click on it to open the image editing tools in the Inspector. Alternatively, select the image and press ⏎ on your keyboard.

Image editing tools include:

  • Selection Selection: Drag a rectangular selection on the image.
  • Magic Wand Magic wand: Click and drag anywhere on the image to select a specific area. The further you drag, the greater the selection tolerance.

After you’ve selected an area, you can hold ⇧ to add more selections — or hold ⌥ and drag over selections to remove them.

  • Invert Invert: Flip your selection, so unselected areas are now selected.
  • Crop Crop: Crop an image to only include currently selected areas.
  • Fill Fill: Fills the selection with a color from the Color Picker.
An image showing image editing tools in Sketch

You can invert, crop or fill image selections in Sketch

When you’re done editing an image, click on the Finish Editing button. Alternatively, click anywhere outside the image, or press Esc, or ⏎.

In addition to image editing tools, you can apply various Styles to your image in the Inspector, including Fills, inner and outer Shadows, as well as various types of Blurs.

Finally, you can also make non-destructive color adjustments to your image using the Color Adjust panel in the Inspector. Select the image you want to edit, then move the sliders or enter new values to adjust its hue, saturation, brightness, or contrast. To revert to the image’s original color values, select the image again and click on the Reset Arrow counterclockwise button.

Quickly make non-destructive color adjustments using the Color Adjust tool sliders

You can turn off Blurs and Color Adjust changes entirely by pressing the button in their respective panels in the Inspector.