Email Design Email Images and Media 2 — Questions and Answers
Question 1: Which image format is most widely supported for displaying animations in marketing emails?
- PNG
- SVG
- MP4
- GIF (Correct answer)
Correct answer: GIF
GIFs are universally supported across email clients and are the standard format for simple looping animations in emails.
Question 2: What should email designers always include when using background images in an email?
- JavaScript fallback code
- A fallback background color (Correct answer)
- A visible border around the image area
- An alt attribute on the background image
Correct answer: A fallback background color
Many email clients, including Outlook, do not support background images, so a fallback background color ensures the design remains readable.
Question 3: What is a 'hero image' in the context of email design?
- A small thumbnail used in the email footer
- A clickable image linked to a product page
- An image featuring the brand's mascot
- A large, prominent banner image placed at the top of the email (Correct answer)
Correct answer: A large, prominent banner image placed at the top of the email
A hero image is the large, visually impactful banner typically placed at the top of an email to immediately capture the reader's attention.
Question 4: Which CSS property is most commonly used to make images scale responsively in email layouts?
- object-fit: cover
- width: auto
- max-width: 100% (Correct answer)
- display: flex
Correct answer: max-width: 100%
Setting max-width: 100% allows images to shrink to fit narrower screens while preventing them from exceeding their container's width.
Question 5: Why should email designers avoid creating emails composed entirely of images?
- Images are difficult and expensive to design
- Image-only emails cannot include hyperlinks
- Many email clients block images by default, hiding all content from the recipient (Correct answer)
- Images significantly slow down the email editing process
Correct answer: Many email clients block images by default, hiding all content from the recipient
Image-only emails become completely blank when images are blocked by the email client, making the message unreadable and ineffective.
Question 6: What is the best practice for delivering video content within a marketing email?
- Embed the video directly using HTML5 video tags in the email body
- Use Flash to play the video inline within the email
- Attach the video file directly to the email
- Use an animated GIF preview or static image with a play button linking to the hosted video (Correct answer)
Correct answer: Use an animated GIF preview or static image with a play button linking to the hosted video
Most email clients don't support embedded video playback, so a GIF or static image with a play button linking to the hosted video is the reliable standard approach.
Question 7: What is the primary purpose of the HTML 'width' attribute on an email image tag?
- To define the maximum size the image can display
- To set the display width so layout renders correctly even before CSS loads (Correct answer)
- To control the image file's actual pixel dimensions
- To set the image resolution for retina displays
Correct answer: To set the display width so layout renders correctly even before CSS loads
The HTML width attribute ensures the image renders at the correct width immediately, maintaining layout integrity even before external CSS stylesheets are applied.
Email Design Email Images and Media 2
Which image format is most widely supported for displaying animations in marketing emails?