Skip to content
Primer/Presentations
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Development
CSSReactViewComponents
About
About
Design guidelines
Presentation principlesColor usageText stylingImagesSlide backgroundsIcons and illustrations
Presentation formats
KeynotePowerPointGoogle SlidesDecksetFigma
Slide layouts
QuotesReactionsChartsFooter
Assets
Color paletteIcons packagesTemplate files
Versioning
GitHub

Image use

Table of contents
Table of contents

When using a screenshot it’s best to match the background. Take a screenshot on a similar color background or use a PNG with a transparent background as this will look the most seamless.

Usage guidelines

Do
example of using an image with a white background on top of a slide with a white background

Use images with a similar or transparent background

Don't
example of using an image with a white background on top of a slide with a black background

Don't use images with opposite backgrounds to the slide background

📍Tip: Seamless image backgrounds

If you need to use a specific image but the slide background doesn't match, you can change the background color to match the image's background color.

animated gif showing the background color of the slide being color picked from the background color in the image

Adding images

Images can be added to any presentation by dragging and dropping, copy and pasting, or inserting from the toolbar in Keynote, Google Slides, and Figma.

Adding images in Keynote

SourceDescriptionExample
BrowserDrag and drop any image from the web browser into Keynoteanimated gif example of dragging and dropping an image from a web browser into keynote
Local machineDrag and drop any image from the Finder into Keynoteanimated gif example of dragging and dropping an image from a the Finder in macOS into keynote

Replacing images in Keynote

StepExample
Select the image and click the Image tabThe keynote inspector on the right side of the window with the mouse clicking on the middle Image button
Click the ReplaceThe keynote inspector on the right side of the window with the Replace button available
Select the new image and click OpenSelecting an image from the finder and inserting by clicking Open

Adding images in Google Slides

SourceDescriptionExample
BrowserDrag and drop any image from any tab in your web browser into the tab with Google SlidesExample showing an image from one tab in the web browser being moved to the tab opened to the presentation in Google Slides
Local machineIn the toolbar select Insert > Image > Upload from computerGoogle Slides toolbar above the slide with Insert Image displayed
By URLIn the toolbar select Insert > Image > By URL and paste the image's URLMouse moves to menu time By URL in the Google Slides toolbar

Replacing images in Google Slides

StepExample
With the image selected, click Replace Image in the toolbarClick Replace Image in toolbar, second from the right
Select which method to replace your imageReplace images by uploading from computer, searching on the web, add from Google Drive, Google Photos, by URL, or from the camera on your device
Edit this page on GitHub
2 contributorsashygeecolebemis
Last edited by ashygee on December 11, 2020