Skip to main content

Adding Images

Pictures make your slides more interesting! Let's learn how to add them. 📸

Method 1: Drag & Drop (Easiest!)​

This is the simplest way to add images:

  1. Find an image on your computer
  2. Drag it from your folder
  3. Drop it into the editor (left panel)
  4. Done! The image appears automatically 🎉
Supported Formats

You can use: JPG, PNG, GIF, and WebP images

Method 2: Using an Image URL​

If your image is already online, you can use its web address.

Basic Image​

![A beautiful sunset](https://example.com/sunset.jpg)

Format Explained:​

  • ! - Tells Slidepicker "this is an image"
  • [A beautiful sunset] - Description (alt text)
  • (https://...) - Image web address (URL)
Alt Text

The description helps if the image doesn't load and makes your slides accessible!

Image Layouts​

Slidepicker offers three special layouts for images:

1. Full-Screen Background Image​

Make an image fill the entire slide as a background!

<!-- image-url: https://example.com/background.jpg; image-background -->

# Text on Top of Image

This text appears over the image

When to use:

  • Hero slides
  • Section dividers
  • Impactful statements
Pro Tip

Use dark images with white text, or light images with dark text for best readability!

2. Image on Left Side​

Split your slide: image on left, content on right.

<!-- image-url: https://example.com/product.jpg; image-left -->

## Our Product

* Feature 1
* Feature 2
* Feature 3

When to use:

  • Product showcases
  • Before/after comparisons
  • Team member introductions

3. Image on Right Side​

Split your slide: content on left, image on right.

<!-- image-url: https://example.com/chart.jpg; image-right -->

## Sales Growth

We increased sales by:

* 50% in Q1
* 75% in Q2
* 100% in Q3

When to use:

  • Data visualization
  • Screenshots
  • Diagrams

Image Tips & Best Practices​

✅ Do's​

  1. Use High-Quality Images

    • Clear and crisp
    • Appropriate size (not too small)
    • Professional-looking

  2. Optimize File Size

    • Keep under 2MB per image
    • Compress large images before uploading
    • Faster loading = better experience

  3. Choose Relevant Images

    • Related to your content
    • Adds value to your message
    • Professional and appropriate

  4. Credit Sources

    ![Photo](url)
    *Photo by Artist Name*

❌ Don'ts​

  1. Don't Use Too Many Images

    • One strong image per slide is often enough
    • Too many = distracting

  2. Don't Use Low-Quality Images

    • Blurry or pixelated = unprofessional
    • Small images stretched = bad quality

  3. Don't Forget Copyright

    • Only use images you have rights to use
    • Free stock photo sites: Unsplash, Pexels

Where to Find Free Images​

Need images for your presentation? Try these sites:

  1. Unsplash - Beautiful free photos
  2. Pexels - High-quality stock photos
  3. Pixabay - Photos and illustrations
License

Always check the license! These sites offer free images, but may require attribution.

Complete Examples​

Example 1: Product Showcase​

<!-- image-url: https://example.com/laptop.jpg; image-left -->

# Introducing MacBook Pro

## Features:

* M3 Chip
* 18-hour battery
* Stunning Retina display

**Order now!**

Example 2: Team Introduction​

---

<!-- image-url: https://example.com/team.jpg; image-right -->

## Meet Our Team

We're a passionate group of:

* Designers
* Developers
* Dreamers

*Together, we make magic happen!*

Example 3: Full Background Hero​

<!-- image-url: https://example.com/mountains.jpg; image-background -->
<!-- white -->

# Adventure Awaits

*Your journey starts here*
Combining Modifiers

Notice we used <!-- white --> to make text readable on the dark mountain image!

Troubleshooting​

Image Not Showing?​

Problem: Image appears as broken link icon

Solutions:

  1. Check if URL is correct
  2. Make sure image URL ends in .jpg, .png, .gif, or .webp
  3. Try opening URL in new browser tab - does it work?
  4. Some websites block image linking - try uploading to imgur.com

Image Too Big or Small?​

Problem: Image doesn't fit well

Solutions:

  1. For background images: Use large images (1920x1080 or bigger)
  2. For side images: Use medium images (800px wide is good)
  3. Resize images before uploading using free tools like:

Image Loads Slowly?​

Problem: Slides lag when loading

Solutions:

  1. Compress images before uploading
  2. Use TinyPNG to reduce file size
  3. Aim for under 500KB per image

Practice Exercise​

Create a slide about your favorite place:

<!-- image-url: [URL-TO-PLACE-PHOTO]; image-background -->
<!-- white -->

# My Favorite Place

*Where I feel most at home*

---

<!-- image-url: [URL-TO-ANOTHER-PHOTO]; image-left -->

## Why I Love It

* Beautiful scenery
* Peaceful atmosphere
* Great memories

*Visit someday!*