Image sizes and tips for Alexa Skill graphics

While some people have audio-only smart speakers, such as the Echo Dot, the majority of active users have multimodal (voice + visual) devices like the Echo Show 5, Kindle Fire, and Amazon Fire TV.

That’s why your WealthVoice app (custom Alexa Skill) is built for both:

Echo Dot is audio-only	Echo Show, Fire TV, and Kindle Fire are multimodal (voice + visual)

WealthVoice allows you to create a voice-first experience that is supported by clean, simple visuals matching your unique brand.

Much like Squarespace does with built-in site layouts and themes, we have templatized the layout of these visuals based on voice user interface best practices. Our layouts are responsive across device screens ranging from the Echo Show 5 (5-inch screen) to the Amazon Fire TV display (5-foot screen).

All screens in your WealthVoice Alexa Skill have two image components that you can control in your Alexa Skill Builder.

1. Foreground (square images up to 1080×1080 pixels, .png or .jpg)
2. Background (either a solid HEX code OR upload a rectangular image: 1080×720 pixels, .png or .jpg) 

Here’s what you’ll need:

1 of 2: Foreground images (square)

512×512 to 1080×1080 pixels, .png or .jpg

Larger images are preferable to avoid pixelation: We suggest at least 800×800 png images.

Transparency:

• If you are using a solid color background, then a transparent .png for your foreground image will look best. 
• If you upload a background image instead of using a solid color then you may prefer a logo with a solid color background (such as a black logo on white background).

Where foreground images appear:

1. Your Branding (your Alexa skill icon) – use your company logo
2. Welcome / Welcome Back screen – use your company logo
3. About – use your company logo
4. Bios/Topics – use up to three individual headshots

2 of 2: Background images (solid color HEX or rectangular image)

Choose a solid color, or upload a rectangular image:

Images must be 1080×720 pixels, .png or .jpg

If you opt for an image instead of a solid color: 

• You can use the same or different images for Welcome, About, Bios/Topics, and Goodbye. Keep your images on brand and in the same color family. All on-screen text is white so use a dark enough image or background color to make white text visible.
• Textural backgrounds such as landscapes or nature are ideal for smart displays because they are not sensitive to cropping and resizing, which Amazon does automatically across varying screen sizes. You should avoid a team photo due the way Amazon programs responsiveness – cropping can be a challenge across screen sizes.
• You can find quality royalty free photos for free on sites like unsplash.com or pexels.com
• Then resize those images into 1080×720 using an image editing tool such as Photoshop or a free tool like Canva.com or Pixlr.com
• QUICK and EASY – grab these free pre-sized textural backgrounds: 

• 🌿 Leaf and plant theme
• 💧 Water theme
• Download the images you like then upload into your WealthVoice Skill Builder for any background.
• If you need the original high-res images for other purposes, grab them free from our Unsplash collections:
  • Plants and Leaves – Textural Backgrounds (Unsplash royalty free)

Where background images appear:

1. Welcome / Welcome Back screen – use a solid color or a textural background: this will go behind your foreground image (your company logo)
2. About – use a solid color or a textural background: this will go behind your foreground image (your company logo)
3. Bios/Topics – use a solid color or a textural background: this will go behind your foreground image(s) (your headshot(s))