Say, you’re about to build a campaign for an e-commerce company. Perhaps it’s a retail outlet. Or a travel brand. Maybe it’s a fashion label.
Whatever the case, you know your emails will feature a lot of product images. But the challenge is you’re new to this, and you’re not a professional coder.
Furthermore, you’re not sure whether you’re going to get consistent design across email clients.
The solution? Sliced images! While not perfect, it’s a neat alternative to heavy coding.
We’re familiar with the limitations imposed by certain email clients when it comes to displaying images. As a result, we’ve had to switch to the “sliced image” design technique on several occasions. We’ve had good success with this, and you can too.
In this post, we’re going to tell you what sliced images mean, how to implement them in Salesforce Marketing Cloud, along with the technique’s pros and cons.
- What Are Sliced Images in Salesforce Marketing Cloud?
- Implementing Sliced Images in SFMC
- Pros of Sliced Image Email Templates
- Cons of Sliced Image Email Templates
- Best Practices for Using Sliced Image Email Templates
- How Often Should You Use Sliced Images?
What Are Sliced Images in Salesforce Marketing Cloud?
Sliced images in email templates refer to emails whose design is built using multiple separate images instead of HTML coding. A single image is cut up into smaller “slices” using an image editing software, such as GIMP and Photoshop. Each slice is a single image file. These individual images are then used to build the email layout.
Imagine your email layout as a pizza. You cut it up into slices (corresponding to tables in SFMC), which then become the building blocks of your email.
Implementing Sliced Images in SFMC
Implementing sliced images does not entail following a different set of instructions. You just need to follow the steps to create email templates in SFMC.
But let’s begin from the beginning:
- Design your email layout in an image-editing software, like Photoshop, Canva, etc. For the purpose of this post, we’ll be using Photoshop
- Use the Slice tool to cut up the image into separate pieces for the header, hero banner, logo, footer, and so on
- Utilize the “Save for Web” function to optimize each image slice. For more info, refer to Adobe’s documentation on slice images
- Log in to your Salesforce Marketing Cloud account
- Create a new template in SMFC using the drag-and-drop builder. Learn how to create an email template in SFMC.
- Use the Image content block to insert each sliced image into the template
Pros of Sliced Image Email Templates
1. Facilitates Beginner-friendly Email Design
Sliced image templates are ideal for beginners in email design. You don’t need any expertise in HTML or CSS—just your preferred image editing software.
2. Ensures Design Consistency across Clients
You want your emails to look stunning and consistent across email clients like Gmail or Outlook. Sliced images ensure that! Since the layout is embedded within the image itself, rendering discrepancies between email clients are minimized.
This consistency is crucial for maintaining brand identity across email campaigns.
3. Promotes File Size Reduction
Although image optimization is crucial regardless of the technique, sliced images can sometimes provide a file size advantage. You might achieve a slightly smaller overall email size by dividing the design into smaller segments. This translates to faster loading times for your emails, improving overall subscriber experience.
4. Streamlines A/B Testing
Sliced images make A/B testing a breeze. You can swap out specific image slices to test different headlines, CTAs, or product offers.
Think of it like a modular design system. You can quickly experiment and optimize your email campaigns for better results.
Cons of Sliced Image Email Templates
1. Limited Flexibility
Updating or modifying the email design involves editing the image slices and possibly re-uploading them, which makes implementing changes a bit challenging.
2. Accessibility Issues
Screen readers used by visually impaired individuals may struggle to interpret sliced images, which can hinder accessibility.
3. Limited Responsiveness
Sliced images can be difficult to adapt for responsive design across various screen sizes and devices, which may result in a poor user experience on mobile devices.
4. Image Blocking Risk
If email recipients have image blocking enabled, the entire email may appear blank since it relies heavily on images.
Best Practices for Using Sliced Image Email Templates
Keep the following in mind when using sliced images:
- Maintain standard image quality to avoid pixelation. (Pixelation is a common issue where individual pixels become visible in images)
- Align the slices with standard email design elements like headers, content sections, and footers to facilitate easy assembly in SFMC
- Test your email across various email clients before hitting the send button
How Often Should You Use Sliced Images?
There are chiefly two factors to consider for determining when and how often you should be using sliced images:
- Target segment: If the audience predominantly uses mobile to view emails, responsive email design becomes essential, making sliced images less suitable
- Campaign goals: If your goal includes interactivity or personalization, sliced images may not provide the required flexibility compared to other methods such as HTML emails with CSS
In either of the above cases, sliced images are nonessential. This technique serves as a fallback when you lack coding skills or don’t have access to a professional developer.
Catch our all-round infographic delineating responsive email design best practices.
Design Salesforce Email Templates with Email Uplers!
We are certified Salesforce partners. Our template production team is made up of seasoned designers and developers. All Salesforce templates are tested in more than 50 different email clients. Additionally, they are tested on 15+ devices to ensure they look good regardless of the screen size.
Building a new campaign? Get in touch with our Salesforce template experts today!