Traditionally, links in emails lead to web pages, but their capabilities do not end there. Links can also direct users straight to a specific action: for example, open an app or proceed to a phone call.

Deep links are used for these types of transitions. Let’s take a look at what they are, how they work, and what to consider when using deep links in email campaigns.

## What Are Deep Links

A deep link is a link that leads to a specific section or screen of an app. In general, the mechanism works like this: the user taps a link, the operating system checks whether there is an app on the device that can handle it, and, under the appropriate conditions, opens the required screen in that app.

This shortens the path between the email and the target action. For example, with deep links:

- in a delivery email, the “View order” button can lead to the relevant order in the app; 
- in a price-drop email, the user can immediately open the [**product card**](https://pixcraft.io/blog/dynamic-product-cards-how-they-work-in-the-pixcraft-editor); 
- from a subscription renewal email, the user can go to the relevant form in the app, and so on.

## How Deep Links Interact With Mobile Apps

One common type of deep link is a regular HTTPS link associated with a mobile app. It looks like a simple web address:

`https://shop.example.com/products/xxxx`

When the user opens it, the operating system checks whether the installed app can handle this address. If so, the user is taken to the relevant section of the app. If the app is not installed, the URL opens as a regular web link.

At the same time, iOS and Android provide special deep-linking mechanisms designed for their respective systems.

### Deep Links on iOS

On Apple devices, **Universal Links** are used to open apps from HTTPS links. These are essentially regular web addresses that are associated with an app. If this association is configured and the app is installed, iOS can pass the link to the app instead of opening it in Safari.

However, a Universal Link should not be treated as a command that forcibly launches the app every time. iOS takes context into account: for example, if the user has already opened a website in Safari and clicks a link from the same domain, the system may continue navigation in the browser.

### Deep Links on Android

On Android, a similar task is handled by **App Links** — HTTP or HTTPS links for which the association between a website and an app has been verified. After verification, the system can pass the link to the app without asking the user to choose a handler. These links are called Verified App Links.

If the app is not installed, the address continues to work as a regular web link and opens in the browser.

App Links are supported starting from Android 6 on devices with Google Services. If Google Services are unavailable, verification of the association between the website and the app may work differently. Therefore, App Links should be tested separately on such devices.

<Img
img="/api/uploads/01_howdeeplinkswork_98d55beedf.png"
alt="How deep links work"
/>

### Custom URI Schemes

In addition to HTTPS links, an app can use its own **URI scheme**, for example:

`shopapp://products/XXXX`

The operating system looks for an installed app that is registered to handle links with this scheme. If a suitable app is found, it receives the data from the link and determines which screen to open.

It is important to note that `shopapp://products/XXXX` is not a regular web link and cannot be opened as a web address. If no suitable app is installed on the device, the transition may result in an error or simply fail to trigger the expected action. The outcome depends on the device and the application through which the user opens the link.

### Deferred Deep Linking

Another mechanism worth mentioning is **Deferred Deep Linking**, where the destination of a deep link is preserved even if the app has not yet been installed.

For example, a user taps the “View product” button in an email, but the store app is not installed on the device. In this case, the user is first directed to install the app, and after the first launch, the relevant product card opens.

A regular Universal Link or App Link is not enough for this scenario: on their own, they do not preserve the transition context through the app installation process. The original data must be stored separately and then passed to the app. To achieve this, additional app-side logic or specialized services (such as Branch or AppsFlyer OneLink) are used.

## What Other Links Can Lead to Actions Outside the Email

Emails can also use other URI schemes. These are not mobile app deep links in the same sense as Universal Links or App Links, but they can also take the user from the email client to a specific action.

### tel:

The `tel:` scheme is used for phone numbers:

`<a href="tel:+1234567890">Call Us Now</a>`

After the click, the device passes the number to an application capable of handling `tel:` links. The URI itself does not mean that the call will start automatically: making the call requires an action or confirmation from the user.

On a smartphone, the call interface usually opens. On a computer, the result depends on whether a suitable application is installed. Therefore, it is better to keep the phone number visible in the email body instead of relying only on a [**“Call Us” button**](https://pixcraft.io/blog/how-to-increase-email-click-through-rates-with-the-right-ctas).

### mailto:

The `mailto:` URI scheme is used to create a new email. A simple version may look like this:

```xml
<a href="mailto:support@example.com">
 Contact Support
</a>
```

A `mailto:` link can also include a predefined subject line and message body. For this, the `subject` and `body` parameters are used:

```xml
<a href="mailto:support@example.com?subject=Order%20question&amp;body=Hello">
 Contact Support
</a>
```

Characters in the link must be encoded correctly. For example, a space is represented as `%20`, while a line break in the message body is represented as `%0D%0A`. Cyrillic characters are first encoded in UTF-8, after which the bytes are written using percent-encoding — a special format for representing characters in URLs as `%XX` sequences.

Third-party apps, such as messaging apps or banking services, can also have their own deep links, including both HTTPS links and URI schemes. The format depends on the specific app, so before launching a campaign, it is worth checking the service’s current documentation and verifying that the link works correctly on the required devices.

## What to Consider When Using Deep Links in Email

A link that works correctly when opened directly may behave differently inside an email.

One reason for this is click tracking. To count clicks, an email service may replace the original URL with a link on its tracking domain. As a result, the user first follows that address, the system records the click, and only then redirects the user to the final page.

This is important for Universal Links and App Links because they are associated with specific domains. If the email service replaces the original URL with a tracking link, the direct transition to the app may behave differently.

For certain links, click tracking can be disabled. For example, [**Altcraft Platform**](https://altcraft.com) can remove the tracking redirect so that the user goes directly to the original URL. In this case, however, clicks on this link will not be tracked.

<Img
img="/api/uploads/02_addlinkaltcrft_67751f4b9e.png"
alt="Adding a link in Altcraft"
/>

For this reason, deep links are best checked in a [**test email**](https://pixcraft.io/blog/checklist-what-to-test-before-sending-an-email) sent through the same service and with the same click-tracking settings that will be used in the actual campaign.

The device on which the email will be opened should also be taken into account. For example, it may make sense to show a `tel:` link only at smaller screen widths. For this, CSS media queries can be used.

However, a condition such as `max-width: 600px` only checks the width of the display area and does not determine the device type. CSS support also depends on the email client. Therefore, an important action should not be available only through an element that appears via a media query.

Overall, before launching a campaign, it is better to test the finished email on the devices and in email clients used by the audience, both with and without the app installed. It is also worth checking that the correct screen opens after the click and that the fallback route works properly.

## How to Add a Deep Link to an Email Template in Pixcraft

In the Pixcraft email builder, a deep link is added in the same way as a regular link. Simply select the required email element, such as a button, image, or text fragment, and specify the address in its properties.

No separate deep-link configuration is required inside Pixcraft: ready-made links are placed in the email, while their behavior is determined by the settings of the website, mobile app, and user device.

<Img
img="/api/uploads/03_linksinpix_319a30036d.png"
alt="Links in the Pixcraft email builder"
/>

For quick search and replacement of links in an email, use the Link Map. It displays all links in the template: you can easily edit them and quickly find the elements associated with them.

<Img
img="/api/uploads/04_linkmappix_5ba0b1ee6c.png"
alt="Link Map in the Pixcraft email builder"
/>

And to check how the template works, including how links behave in a real email client, you can send a test email.

<Img
img="/api/uploads/05_testemailpix_1934c66ee6.png"
alt="Sending a test email in the Pixcraft email builder"
/>

## Conclusion

Deep links shorten the path from an email to the required action in an app, but their behavior depends on more than just the URL itself. You need to consider the link type, whether the app is installed, operating system specifics, and how the email service handles the link. Therefore, before launch, it is important to test the entire user journey: from the click in the email to the required screen.

This article covers deep links: how they work, what types exist, what are the best practices for ensuring they function correctly, and what other types of links drive actions outside the email.

small_deeplinks_cover (1).png

thumbnail_deeplinks_cover (1).png

deeplinks_cover (1).png

Deep Links in Email: What They Are and How to Use Them

Background images make emails more expressive. You can place text, buttons, logos, and other elements over them, making the background part of the design that can set the tone of the email and emphasize its content.

At the same time, there are quite a few technical nuances regarding markup associated with email template backgrounds. Outlook for Windows presents the most challenges since it does not support most CSS properties due to the rendering engine specifics.

Let’s take a look at how background images work in emails and what you should keep in mind when configuring them.

## How Background Images Work in Emails

In HTML, backgrounds are usually set with CSS using the `background-image` property. A background image in email code looks like this:

`background-image: url('background.jpg')`

By default, the image retains its original size, starts from the top-left corner, and repeats until it fills the entire block.

<Img
img="/api/uploads/001_bckgrndplaceexample_275a1c1713.png"
alt="Background image starts from the top-left corner"
/>
 
This behavior can be changed using the following CSS properties:

- `background-size`: controls the size of the background image. 
- `background-position`: sets the position of the background image within the block. 
- `background-repeat`: determines whether the background is repeated.

While these properties generally behave predictably in web development, the result in email depends on the email client.

## How Background Configuration in Outlook Differs from Other Email Clients

To implement background CSS properties that Outlook cannot process correctly, **VML (Vector Markup Language)** is used. This is a Microsoft technology for working with vector graphics.

VML markup is usually placed inside conditional comments. This gives Outlook a separate version of the block with a background image, while other email clients ignore it and process the CSS properties instead.

A simplified VML structure looks like this:

```xml

 

```

Here, `v:rect` creates the area, `v:fill` sets its background, and `v:textbox` allows regular HTML content to be placed inside it.

Visually, the structure may resemble a standard HTML block with a background. However, the principles of configuring images in VML differ significantly from familiar CSS properties.

### Scaling

In CSS, the `background-size: cover` property means that the image should be scaled up or down so that it completely fills the block. If the proportions differ, part of the image will extend beyond the block and be cropped.

The closest VML equivalent to `cover` is `atleast`, which is set through the `aspect` attribute:

`<v:fill type="frame" aspect="atleast" src="background.jpg" />`

This value specifies that the image should be large enough to fill the entire area. For example, if the block is square and the image is wide, its side portions may extend beyond the block.

<Img
img="/api/uploads/02_atleastproperty_0ae924f856.png"
alt="Background image when using atleast"
/>

The `background-size: contain` property, in turn, scales the background image so that it fits entirely within the block while preserving its original proportions. The VML equivalent here is `atmost`:

`<v:fill type="frame" aspect="atmost" src="background.jpg" />`

<Img
img="/api/uploads/03_atmostproperty_7c4abee174.png"
alt="Background image when using atmost"
/>

If you need to specify the exact background image size, CSS lets you set it precisely in pixels, for example `background-size: 300px 150px`. In VML, the `sizes` parameter is used for this purpose, while the dimensions themselves are usually specified in `pt`:

`<v:fill type="frame" src="background.jpg" sizes="300pt,150pt" />`

### Positioning

In CSS, the position of a background image is set using the `background-position` property and the corresponding values such as `background-position: center`.

In VML, two parameters are used to configure positioning: `origin` and `position`. Together, they perform roughly the same task as `background-position`, but work differently by describing **two anchor points**:

- `origin` defines a point within the image; 
- `position` defines the position of that point within the VML area.

In the simplest cases, positioning can be fairly straightforward. For example, `background-position: top right` can be represented in VML as follows:

`origin="1,0"`
`position="1,0"`

To center the image, the following values are used:

`origin="0.5,0.5"`
`position="0.5,0.5"`

<Img
img="/api/uploads/04_originposition_21089d8f73.png"
alt="Background image positioning"
/>

However, positioning becomes more complicated when `aspect` is used alongside `origin` and `position`. VML first scales the image according to `aspect` and then determines its position. Therefore, the result depends on the dimensions of the original image, the VML area, and the selected scaling mode.

Because of this, a combination such as:

`aspect="atmost"`
`origin="0.5,0.5"`
`position="0.5,0.5"`

will not always be visually equivalent to the following CSS:

`background-size: contain;`
`background-position: center;`

Simply put, when working with VML, it is often not enough to merely convert `background-size` and `background-position` into the corresponding parameters. You need to determine the size of the image after scaling and then calculate its position within the block.

### Repeating

By default, `background-repeat` property is set to `repeat`: if the background image is smaller than the area, it repeats horizontally and vertically. To prevent the background from repeating, `background-repeat: no-repeat` is required.

In VML, background repetition is controlled by the `type` parameter. For an image that should fill the entire area as a single background, `type="frame"` is used:

`<v:fill type="frame" src="background.jpg" />`

For a repeating image, `type="tile"` is used instead:

`<v:fill type="tile" src="pattern.png" />`

In this case, the image repeats horizontally and vertically. This is useful for small patterns, textures, and other backgrounds that do not need to be stretched across the entire block.

VML should not be treated as a direct equivalent of CSS. Background scaling, positioning, and repetition work differently here. Therefore Outlook markup has to be generated according to a separate set of rules, which often require complex calculations when done manually.

## What Else to Consider When Working with Background Images in Emails

### Fallback Color

In some cases, a background image in an email may fail to load. For example, the user may have disabled image loading in their email client, the file may be unavailable, or there may be a network issue.

As a fallback, you should specify a background color:

```xml
<td
 bgcolor="#17233C"
 style="
 background-image: url('background.jpg');
 "
>
```

If the image fails to load, this color will remain behind the content of the block. This is especially important to consider when text is placed over the image.

It is best to choose the fallback color together with the image during the design stage. For example, a white heading may be easy to read against a dark photo but lose contrast against a light fallback background.

### Background Display in Dark Mode

Email clients do not follow a single approach to [**dark mode**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it). Some do not alter the content of an HTML email at all, some change colors only partially, while others apply more noticeable inversion.

A problem arises when an email client changes the text color but leaves the background image unchanged. For example, dark text may become light while the image beneath it remains the same. As a result, the text may begin to blend into the background.

One way to reduce this risk is to use a semi-transparent background image together with a block background color. The background color, which the email client may change when switching to dark mode, will show through the transparent areas. As a result, the appearance of the block partially adapts to the new color scheme, and the [**text remains readable**](https://pixcraft.io/blog/typography-in-email-how-to-make-text-more-effective).

<Img
img="/api/uploads/002_trnsprnc_9371b6f6ef.png"
alt="Semi-transparent background image"
/>

### Nested Backgrounds

In layouts where background images are used across multiple layers, another complication arises. Imagine that:

- a section has its own background; 
- inside is a block with another background image; 
- inside that block is another element with its own background.

While standard HTML markup allows you to build such a structure, the situation is different with VML. Here, nested structures are not natively supported, therefore each new background level cannot be handled independently. VML structures begin to conflict when nested, and the markup has to be assembled with the entire nesting structure in mind.

In other words, in complex layouts, VML limitations affect the structure of the markup itself, not just individual background parameters.

## How Pixcraft Simplifies Working with Background Images

Constantly accounting for differences between email clients can be difficult, while manually creating separate markup for them is time-consuming. [**Pixcraft email builder**](https://app.pixcraft.io/user/register) accounts for these technical nuances, making it much easier to work with background images.

In both the builder and the Pixcraft plugin for Figma, you only need to add background images and set the required parameters. You can configure the display mode, background color for the email and its content, background image position, repetition, and other parameters. All of this can be done without manually working with the markup.

<Img
img="/api/uploads/05_backgrndsttingspixcrft_7b727083e0.png"
alt="Email background settings in Pixcraft"
/>

Compatibility with email clients is handled by [**TJML**](https://pixcraft.io/blog/tjml-framework-how-to-create-emails-quickly-and-easily) — an email framework that generates the email markup: 

- For email clients where CSS is sufficient, the corresponding properties are used. 
- For Outlook, VML markup is generated with the required background image parameters.

As a result, Pixcraft users do not need to work out how to configure background images in the email code. The required background parameters are set directly in the interface, while TJML handles the generation of compatible markup (including VML).

## Conclusion

Background images offer more options for email design, but they require careful coding and testing across different email clients. In Pixcraft, the background is configured directly in the interface, while the markup is generated automatically. This eliminates a significant amount of manual work and makes creating complex email layouts much more convenient.

This article explains how background images work in emails, how handling backgrounds in Outlook differs from many other email clients, and how Pixcraft simplifies working with background images in emails.

small_covbackpic.png

thumbnail_covbackpic.png

covbackpic.png

Background Images in Emails: How to Set Them Up Correctly

What’s the purpose of email analytics? First, it allows you to look at an email through the eyes of your audience: what they notice, what they click on, and what they leave without attention. Second, it provides data for further decisions about email content and design.

In this article, we take a look at email campaign analytics: how it works in Pixcraft and what practical value it provides.

## What Metrics Are Used in Email Campaign Analytics

Email analytics is not a new invention. Email has been a popular communication channel between brands and customers for many years. Over time, numerous ways to evaluate campaign performance have emerged.

The main metrics include:

- **Delivery Rate**. The percentage of emails successfully delivered to recipients’ inboxes: _(Delivered / Sent) × 100%_. 
- **Open Rate (OR)**. The percentage of recipients who opened the email. It's calculated based on the number of delivered emails: _(Unique opens / Delivered) × 100%_. 
- **Click-Through Rate (CTR)**. The percentage of recipients who clicked on one or more links in the email. Again, it's calculated based on the number of delivered emails: _(Unique clicks / Delivered) × 100%_. 
- **Conversion Rate**. The percentage of readers who completed the target action: _(Conversions / Selected calculation base) × 100%_. 
- **Unsubscribe Rate**. The percentage of readers who unsubscribed after receiving the email: _(Unsubscribes / Delivered) × 100%_.

However, these metrics are often not enough for a deeper analysis. This is why Pixcraft offers advanced capabilities for evaluating the effectiveness of your email campaigns based on the required parameters.

## How Analytics Works in Pixcraft

The foundation of Pixcraft's email analytics is tracking pixels. These are invisible images used in both HTML and [**AMP emails**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy). When a pixel loads, it sends a request to the server with parameters that indicate what event occurred and which subscriber triggered it.

In **HTML emails**, a pixel is added as a regular image (`<img>`) or as a background image (`background-image`). An `<img>` element usually loads and dispatches an event when the email itself loads, while a `background-image` loads only when it's displayed. This means that image loading, and therefore event dispatch, can be controlled using CSS and media queries.

The principle is the same for **AMP emails**, except that the `<amp-img>` tag is used instead. It's better to place it at the beginning of the email since AMP images are loaded asynchronously. For the pixel to work correctly, it must also be located within the visible area of the email; otherwise, it will not load.

Events are tracked using special parameters. By combining them, you can build clear performance metrics:

- `e (event_name)`: Indicates the event type. Pixcraft uses view for standard email open tracking and time for tracking the time spent in AMP emails. For custom events, you can use any other names. 
- `ea (event_action)`: Defines an additional event parameter. For example, for a `view` event, this parameter contains `html` when the HTML version is opened and `amp` when the AMP version of the email is opened. 
- `ev (event_value)`: An additional parameter for numeric values. For example, when tracking the amount of time spent in an email, this parameter is used to track the number of seconds.

The following parameters are also used to identify the event:

- `trkid`: the unique identifier of the analytics campaign. It's generated automatically when the campaign is created in Pixcraft. 
- `cid`: the recipient identifier used to distinguish unique events from repeated ones. Here, you need to use your email service provider’s personalization variable containing a unique user identifier (for example, `{lead._md5}` for [**Altcraft**](https://altcraft.com) or `{{SubscriberId}}` for Unisender).

Open tracking works according to the scheme described above: the email is opened, the tracking pixel is activated, and the data is sent to the server. Keep in mind that email client image-loading settings and privacy protection mechanisms may affect open tracking.

To measure the time spent in an email, Pixcraft uses a hidden `amp-carousel` component with automatic scrolling. The carousel switches between tracking pixels at specified intervals, and specific pixels show how long the email remained open. For example, the following time points can be tracked:

**1 → 3 → 5 → 10 → 15 → 20 → 25 → 30 → 40 seconds**

In this case, if the system received events at 1, 3, 5, 10, and 15 seconds but did not receive an event at 20 seconds, this means that the email remained open at least until the 15-second mark.

Based on the collected data, Pixcraft calculates the average time spent in the email and generates audience retention data.

<Img
img="/api/uploads/01_timecohort_34b607146f.png"
alt="Analytics graphs"
/>

## How to Enable Email Analytics

If you create emails using the Pixcraft builder, you can enable open and time tracking during export.

For example, select **ZIP archive export**, enable open and time statistics at the bottom, then select the checkbox next to **AMP** and click **Download**. The archive will contain two versions of the email. Both opens and time will be tracked for the AMP template, while only opens will be tracked for the HTML version.

**Important!** Statistics are unavailable for EML emails because this format is intended for manual sending without any personalization tags.

<Img
img="/api/uploads/02_exprtemailtempltstats_302fdfc4b2.png"
alt="Template export"
/>

In this case, an analytics campaign for the downloaded email template will be created automatically in the **Analytics** section. The data is displayed as charts in the **Statistics** tab:

- **Events**. A chart showing the total number of events. Each event is displayed separately in the legend, while the total number of events is also shown in the **Total** panel on the right. 
- **Opens**. The number of email opens, both unique and non-unique. A separate breakdown of HTML and AMP email opens is also available. 
- **Average time in email**. The average time in seconds that users spent in the email, broken down by day. 
- **Retention by cohort**. A chart showing audience retention based on the time spent in the email.

<Img
img="/api/uploads/03_graphstats_8ce08cdc4d.png"
alt="Email stats"
/>

However, even if you design emails manually, you can still connect them to Pixcraft analytics. To do this, create a new analytics campaign and add tracking pixels to the email template code.

In the **Analytics** section, click **New Campaign**, enter its name, save it, and go to the **Connection** tab, where the tracking pixels are located. Directly below them is the custom events configuration block.

<Img
img="/api/uploads/04_connectntab_beb989fd6b.png"
alt="Connection tab"
/>

## How Custom Events Work

Creating a new event is easy: click **Add Event** and specify its name and action. Then click **<>**, copy the generated code, and add it to the email template.

<Img
img="/api/uploads/05_cstmevents_cdf2e646f9.png"
alt="Custom events"
/>

However, the code itself does not determine what action the recipient performed. If you simply insert it into the email template, it will load alongside the rest of the content, and Pixcraft will immediately register the event.

To track a specific action, the pixel loading must be tied to the required condition in the email code. The logic is as follows: **action or condition → tracking pixel loads → event is registered in Pixcraft**.

### Custom Events in AMP

AMP technology offers extensive possibilities for tracking interactions inside an email. Tracking pixel loading can be tied to a user action or a specific stage of a scenario:

- the total number of clicks in the email; 
- completion of [**AMP games**](https://pixcraft.io/blog/snake-in-an-email-how-we-created-a-game-for-an-amp-newsletter-with-altcraft), tests, and [**surveys**](https://pixcraft.io/blog/nps-surveys-whats-their-purpose-and-how-to-implement-them-in-pixcraft); 
- interactions with [**product cards**](https://pixcraft.io/blog/dynamic-product-cards-how-they-work-in-the-pixcraft-editor); 
- transitions between states of an interactive block; 
- clicks on elements that do not contain links.

In this case, the AMP code determines when exactly the pixel is loaded, while Pixcraft receives the request and records the corresponding event. For example, in an email containing a survey, you can create separate events for:

- starting the survey; 
- moving to the next question; 
- receiving the result; 
- clicking the final button.

As a result, you can see how many recipients started interacting with the survey, how far they progressed, and at which stage they stopped most often.

### Custom Events in HTML

In HTML emails, CSS acts as the trigger that launches the tracking. Its properties can be configured so that the tracking pixel loads when a specific condition is met rather than immediately after the email is opened.

For example, `:hover` can be used to load the pixel when the cursor moves over a particular element and to evaluate how many users read the email to the end. In this case, the pixel is defined as a background image through CSS, then added to the lower part of the template and activated when the user hovers over the element.

Another scenario involves media queries. The pixel can be displayed only at a specific screen width or height, screen orientation, or PPI (pixels per inch) density. Based on the resulting events, you can evaluate, for example, the percentage of opens on [**mobile devices**](https://pixcraft.io/blog/mobile-email-adaptation-how-to-ensure-proper-rendering-across-different-devices-and-email-clients).

Other conditions can be analyzed in a similar way. For instance, events can be tracked when [**dark mode**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it) is enabled in email clients that support the relevant CSS conditions.

The limitation here lies in the capabilities of email clients themselves, particularly their varying support for media queries and CSS properties.

## How to Use Analytics Data in Practice

Email metrics data is a treasure trove for marketers. But it's only useful when analyzed regularly and applied in practice:

- **Optimizing email structure**. The audience loses interest before reaching important parts of an email? This is a reason to reconsider the content order, text length, and CTA placement. If certain elements consistently receive more attention, you can place additional emphasis on them. 
- **Comparing different presentation options**. For example, you can compare emails with different structures, text lengths, numbers of offers, or placements of primary CTAs and see how the recipient behavior changes. 
- **Understanding audience interests**. When preparing future campaigns, you can take into account how recipients reacted to different content groups. For example, you can show particular product categories or content topics more often to users who have previously expressed interest in them. 
- **Setting priorities**. If tracking shows that a significant share of emails are opened on smartphones, it’s worth paying particular attention to the mobile version and the placement of elements on smaller screens. Similarly, you can evaluate the share of opens in dark mode or in specific email clients and determine if it’s important to adapt your emails to these conditions.

At the same time, a single event is often not enough. It’s better to draw conclusions based on a series of email campaigns and compare several metrics at once: the same recurring pattern can become a reason to change email content, structure, or design.

## Conclusion

The value of analytics lies less in the number of events collected and more in how practical and meaningful they are. Therefore, analytics should be treated as part of the work on the email itself: formulate a question or hypothesis, select goals and metrics, and then use the results when developing future email campaigns.

With Pixcraft, you get comprehensive capabilities for managing your email campaigns, from creating email templates to analyzing their performance. Try it yourself: [**sign up today**](https://app.pixcraft.io/user/register) to receive a free 14-day trial. And if you have any questions about our service, [**contact us**](mailto:experts@pixcraft.io) by email.

In this article, we discuss email analytics: what benefits it offers, how to set it up in Pixcraft and integrate it into your emails, and how to use analytics data in practice.

small_cov_analytics.png

thumbnail_cov_analytics.png

cov_analytics.png

Email Analytics: How to Evaluate the Effectiveness of Your Email Campaigns

More than [**390 billion emails**](https://www.emailtooltester.com/en/blog/how-many-emails-are-sent-per-day/) are sent worldwide every day. For businesses, this can mean dozens or even hundreds of email campaigns that need to be created and sent regularly.

However, building every email from scratch is time-consuming and requires significant resources. On top of that, when several different people work on campaigns without clear guidelines, this poses a risk of losing consistency and uniformity.

A master template addresses these issues systematically: it serves as a shared foundation for creating emails faster while maintaining a consistent style. In this article, we take a look at what master templates are, what makes them useful, and which master template creation features are available in the Pixcraft email builder.

## What Is a Master Template

A master template can be described as a full-fledged foundation for creating email campaigns. Unlike a regular email template, it serves not as a single message but as a library of prepared blocks that can be used to assemble emails for various scenarios.

What are the benefits of a master template?

- **Faster email production.** When a master template is used, the team only needs to select the appropriate structure, add content, and adapt the blocks to a specific campaign instead of creating every element from scratch. 
- **Consistent style and brand recognition.** A master template establishes the design logic for the main email components. Visual rules for fonts, colors, headings, spacing, and element placement make campaigns more consistent. 
- **Lower risk of errors.** Although a master template does not eliminate the need to test emails before sending them, it can reduce the likelihood of errors because the template elements have already been checked beforehand.

## Which Components Does a Master Template Include

A typical master template contains several block variations divided into categories according to their purpose. Its composition depends on the company’s area of business, the types of emails it sends, and the frequency of its campaigns.

A master template may include the following elements:

- **System blocks.** These include a preheader, header, footer, contact details, social media icons, and other basic elements of email campaigns.

<Img
img="/api/uploads/01_headerfootersocial_f41b92adf4.png"
alt="System blocks"
/>

- **Hero blocks.** Large email elements that are the first to attract the reader’s attention. They usually contain a heading, a brief description, an image, a primary button, and sometimes additional links.

<Img
img="/api/uploads/02_herobloki_847d2adca5.png"
alt="Hero blocks"
/>

- **Content blocks.** These may include text sections, article cards, tips, quotations, lists, link collections, FAQs, or sections with additional materials.

<Img
img="/api/uploads/03_kontentbloki_cd71fbf51e.png"
alt="Content blocks"
/>

- **E-commerce and promotional blocks.** Online stores and services that regularly run promotions may require product cards, product grids, category blocks, coupons, promo codes, recommendation collections, abandoned cart sections, and blocks describing delivery terms.

<Img
img="/api/uploads/04_kartochkitov_37de133e61.png"
alt="E-commerce and promotional blocks"
/>

- **Trust / social proof.** Reviews, ratings, customer quotations, expert comments, case studies, certificates, “how it works” blocks, and answers to common objections strengthen an email when used appropriately.

<Img
img="/api/uploads/05_socproofblocks_9646fe10c6.png"
alt="Social proof blocks"
/>

- **Interactive AMP blocks.** Image carousels, [**NPS surveys**](https://pixcraft.io/blog/nps-surveys-whats-their-purpose-and-how-to-implement-them-in-pixcraft), dynamic product collections, or interactive feedback forms may also be included for certain scenarios.

<Img
img="/api/uploads/06_ampinteractblocks_3e0f4ace36.png"
alt="Interactive AMP blocks"
/>

- **Bento blocks.** A bento grid is a card-based composition in which content is arranged across rectangular or square cells of different sizes. A single section may combine a large block containing the main message, smaller benefit cards, a product image, a review, and a [**CTA**](https://pixcraft.io/blog/how-to-increase-email-click-through-rates-with-the-right-ctas).

Each block is usually designed in several versions: for example, with one or several columns, with or without images, in different color schemes (if that falls in line with the [**design system**](https://pixcraft.io/blog/developing-a-guideline-in-figma-components-variants-and-variables)), and so on.

As for bento blocks, they should not replace every other block in a master template. Bento is just one of the options, suitable for content-rich emails that need to present several ideas while preserving order and visual hierarchy.

In web design, bento layouts are often based on flexible grids. However, email clients handle modern CSS properties differently. For this reason, bento in email templates should be treated primarily as a visual principle: cards, hierarchy, balanced spacing, a clear structure, and [**adaptation for mobile devices**](https://pixcraft.io/blog/mobile-email-adaptation-how-to-ensure-proper-rendering-across-different-devices-and-email-clients).

## What to Consider When Creating a Master Template

### Identify Email Types and Repeated Elements

Start by reviewing which emails the brand already sends and which ones it plans to launch in the future. For each email type, determine its purpose, basic structure, and sending frequency. Priority should first be given to the main elements, such as the header, footer, buttons, cards, promotional blocks, product grids, dividers, and so on.

### Divide Blocks Into Categories

To prevent the master template from becoming disorganized, blocks should be arranged into groups (for example, system, hero, content, product, and transactional blocks). When a team uses internal names such as `promo_card_v2`, everyone involved in the process should agree on clear and understandable naming conventions.

### Prepare Variations for Different Scenarios

As noted above, a single block does not always fit every task. Variations are therefore often required. To avoid confusion, start with a set that covers the needs of current campaigns and expand it when necessary.

### Test Responsiveness and Dark Mode Display

Each block should be tested as part of an email: check how it behaves on mobile devices, what happens when a heading is long, whether the grid retains its structure, whether the text remains readable, and whether the logo is still visible in [**dark mode**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it).

When bento is used, particular attention should be paid to the mobile version. On a narrow screen, cards will usually need to form a clear vertical sequence while preserving their meaning: for example, the main message first, followed by supporting arguments and the call to action.

### Establish Usage Guidelines

Finally, describe the basic rules for working with the blocks: which limits apply (such as character number limits), which elements can be changed and how, which campaigns should use particular blocks, and so on. It’s not always necessary to create an extensive guide. In some cases, a short instruction covering the block types is sufficient.

## How to Tie a Master Template With the Website Style

A good practice is to base the master template on the visual language the brand already uses on its website, in its mobile app, in advertising materials, and on social media. Shared stylistic elements, including image and button design, element structure, and [**typography**](https://pixcraft.io/blog/typography-in-email-how-to-make-text-more-effective), emphasize consistency across communication channels.

In this case, the website serves as a source of patterns whose design principles can be transferred to email components. For example:

- a large hero section on the home page can be adapted into the first content block; 
- product cards can be converted into a product grid; 
- feature cards can be adapted into a benefits block; 
- a bento section can become a card-based composition for an announcement; 
- the website footer can be converted into an email footer containing contact details, legal information, and an unsubscribe link.

However, this doesn’t mean that you need to make a literal copy of a website. Email clients do not process HTML and CSS in the same way as browsers. This needs to be considered when adapting elements to the email format.

## How to Create Master Templates Using Pixcraft

The Pixcraft email builder offers features for both convenient email creation and working with master templates. In particular, master templates can be created in several ways.

### Saving Custom Blocks

Pixcraft users can save their own blocks for use in future emails. To do this, select the required block and click the star icon. The block will then be added to “Saved blocks.”

<Img
img="/api/uploads/07_savecustomblocks_515785dad4.png"
alt="Saving custom blocks"
/>

The saved block will be available in any other campaign created within the current project: simply select it, add it to the canvas, and edit the block as required. This is especially convenient for components that are used in numerous emails without significant changes.

### Creating a Master Template in the Builder

A master template can be assembled in Pixcraft as a base email containing prepared block categories for future campaigns. When working on a new email template, you can:

- create a copy of the master template, keep only the required blocks, and delete the ones that are not needed for the current email; 
- use the block-saving feature described above by saving only the currently required components and adding them to the new template.

### Using Ready-Made Templates

Pixcraft features a [**template gallery**](https://pixcraft.io/templates) that contains a variety of templates for different campaign types, occasions, and industries. Their components can serve as the foundation for your master template: select the required email elements and use their structure and design as the basis for your own blocks.

### Creating a Master Template in Figma

If your team uses Figma to design email campaigns, give our [**dedicated plugin**](https://pixcraft.io/figma) a try: it can turn an email layout into a complete master template. Save your own assets in the library and organize them into categories for quick and convenient access in the future.

**To save time on creating a master template, order one from the Pixcraft specialists! [Contact us](mailto:team@pixcraft.io), and we'll create a convenient, customized master template that fully meets your needs and wishes.**

## Which Mistakes Should Be Avoided When Working With a Master Template

- **Master template gets overloaded.** The more blocks it contains, the harder it becomes to navigate, especially when the elements are not grouped. Therefore, the best option is to start with a compact set that covers the main scenarios and add new blocks as needed. 
- **Emails are not tested after assembly.** Even a well-designed master template does not guarantee that an email will display without errors. Replacing content may result in broken links, large image files, nonfunctional buttons, and other issues. This means that email testing remains an essential part of the process. 
- **The website design is copied without adaptation.** As noted above, adapting a website style means preserving brand recognition rather than creating an exact copy of every section. Complex grids, hover effects, custom fonts, and multi-level cards may look good on a website but perform poorly in an email client. 
- **Master template is not updated.** A brand’s style may change over time, including its colors, tone of communication, and approach to visual design. Without timely updates, the master template becomes outdated.

## Conclusion

A proper master template addresses the team’s current needs. It does not contain unnecessary blocks simply for the sake of quantity, but instead includes everything required for regular campaigns. It reflects the brand’s style and creates a consistent foundation for a wide variety of emails.

Pixcraft serves as your assistant for working with both emails and master templates. Create them in accordance with your brand guidelines, save your own blocks, configure styles, and test how email elements appear on mobile screens and in dark mode.

To make an informed decision, [**sign up today**](https://app.pixcraft.io/user/register) and try Pixcraft for free for 14 days. And if you have any questions, simply [**contact our team**](mailto:experts@pixcraft.io).

_Facebook is owned by Meta Platforms Inc., recognized as an extremist organization and banned in the Russian Federation._

_Access to the social network X (formerly Twitter) is restricted in the Russian Federation._

In this article, we'll discuss the benefits of master email templates and how to work with them in the Pixcraft visual email builder.

small_Обложка Pixcraft (2) (1).png

thumbnail_Обложка Pixcraft (2) (1).png

Обложка Pixcraft (2) (1).png

Email Master Templates: What’s Their Purpose and How to Work With Them

We have released a major Pixcraft update, one of the largest in the history of our service. The changes affect the interface and the functionality of both the email builder and the Figma plugin.

In this article, we’ll take a look at what has changed, which new features have been added, and which existing features have been improved.

## Working With Email Templates

### Updated Workspace Screen

Perhaps the most noticeable change is the redesigned workspace screen, which contains the list of your templates. The interface is now more concise yet informative, while navigation has become significantly more convenient.

<Img
img="/api/uploads/01_interface_40fc19f00e.png"
alt="Updated workspace"
/>

### Template Preview

In earlier versions of Pixcraft, email previews were available only inside the builder itself. To evaluate how the template looks, you first had to open it in the editor and then switch to the “Preview” mode.

The latest update introduces the option to preview email templates directly from the list in the main workspace. This feature is particularly useful when you need to quickly review or compare several emails.

Here is how it works: hover the cursor over a template, and the email will become slightly larger on the screen and scroll up and down as you move the cursor vertically. As soon as you move the cursor away, the email will return to its original size.

<Img
img="/api/uploads/02_prevwanimation_87ddcf7fd8.gif"
alt="Email preview in the list"
/>

### Tag System

You can now add custom tags to templates and AMP components, making navigation and search easier.

The tag names are defined by the user. For example, you may specify the template type (such as a triggered email, promotional email, or regular newsletter), its association with a particular campaign, the name of the employee who worked on the email, or any other relevant information.

Adding a tag is easy. Click the three vertical dots below a template or next to an AMP component to open the context menu. After that, simply select "Edit tags" and create a new tag or assign an existing one from the list.

<Img
img="/api/uploads/03_tagsnew_4878cf1159.png"
alt="Tags in the templates list"
/>

### Sending Test Emails

One of the most important updates in the Pixcraft email builder is the “Send test” feature, which allows you to check how a template appears in the required email clients [**before launching the campaign**](https://pixcraft.io/blog/checklist-what-to-test-before-sending-an-email).

The "Send test" icon is located in the upper-left panel next to the “Preview”, “Export”, and “Save” buttons. Click it to open a window where you can select a test address from the list or enter a new one. Then send the email to the selected inbox and make sure the received version of the template matches the intended design.

<Img
img="/api/uploads/04_testemailsend_0283b348f2.png"
alt="Testing the emails"
/>

### Updated Export and Integrations Panel

The template export section has been substantially redesigned: we updated the export panel to make it much more visually comfortable to use. On top of that, we added an option to compress the code when exporting an email. You can enable or disable it using the corresponding toggle.

<Img
img="/api/uploads/05_emailexportnew_a97f92a5fa.png"
alt="Template export"
/>

The ESP integration interface has also been redesigned, becoming more intuitive. You can configure a connection to the required platform either through the "Export" function in the builder or in the "Integrations" section on the main screen.

<Img
img="/api/uploads/06_espintegrationcreate_fb9829821c.png"
alt="ESP integrations"
/>

### Assets Separated by Project

The next update affects custom assets that can be saved while working on a template. They are now stored separately within each project and are no longer mixed with custom blocks from other projects.

This separation is particularly relevant for teams that work with several brands, products, or business areas at the same time. Elements are no longer mixed in a shared library, and each project contains only the set of user blocks associated with its current list of emails.

The number of available projects depends on your pricing plan: 1 project on Personal, up to 3 projects on Starter, and up to 10 projects on Pro.

## Flexible Access Permission Settings

Pixcraft users can invite participants to projects and assign them the required roles, such as moderator or viewer. The update introduces detailed permission management for invited participants: now you can grant only the permissions required in each individual case.

Access permissions can be configured for:

- templates; 
- components; 
- assets; 
- integrations; 
- file storages; 
- statistics; 
- test emails.

<Img
img="/api/uploads/07_categoriespermissions_aabe3feda8.png"
alt="Access permissions"
/>

You decide which permissions to grant. For example, one employee can receive permission to edit templates while being restricted from editing and moderating components. At the same time, another employee can be given access only to view statistics, without permission to edit materials.

## Monitoring Pricing Plan Limits

The pricing plan menu is located in the "Your plan" section in the lower-left corner. It displays the plan’s validity period, as well as the number of available users, created projects, templates, exports, and AMP events.

<Img
img="/api/uploads/08_planandbilling_d745be68d9.png"
alt="Plan limits"
/>

Keep in mind that the selected pricing plan conditions apply to the entire workspace and are not calculated separately for each project or user. For example, the Starter plan includes up to 3 projects and 300 templates, as well as 300 template exports per month. In this case:

- If you create 200 templates within one project, only 100 templates in total will remain available for the other two projects. 
- Exports are counted according to the same principle: 300 monthly exports are shared among all project participants rather than being allocated separately to each participant.

## Analytics

Previously, Pixcraft already included analytics for AMP emails. Yet the latest update has expanded the service’s capabilities and made its analytics independent of third-party solutions:

- First, you can now add analytics both to templates created in Pixcraft and to templates built manually. 
- Second, analytics now operates entirely within the Pixcraft environment. Integration with Google Analytics or Yandex Metrica is no longer required.

Statistics tracking for emails created in the builder is enabled during export. You can choose to collect statistics on opens and time spent in the email. The "Analytics" section displays all emails exported with event collection enabled. You can also create a new campaign directly in this section.

<Img
img="/api/uploads/09_analyticslist_941284ce80.png"
alt="Analytics"
/>

Custom events are created and operate in Pixcraft in a way similar to Google Analytics. As mentioned above, no third-party services need to be connected. You can create and edit events and track the associated actions directly in the interface.

<Img
img="/api/uploads/10_customevents_6417437689.png"
alt="Custom events"
/>

Report charts are updated automatically for all current events. Opens are tracked for both HTML and AMP emails. Separate charts are available for average time spent in an email, along with cohort retention analysis for AMP emails.

<Img
img="/api/uploads/11_graphsanalytics_fe7eecb147.png"
alt="Report charts"
/>

## AMP Components

AMP component settings have become even more flexible and detailed. In particular, you can now change the set of fields they contain, creating the required component variations depending on the email campaign.

<Img
img="/api/uploads/12_ampfieldsselect_01fbd7e087.png"
alt="AMP component settings"
/>

You can also define validation rules for fields. For example, validation can be configured for an email address or phone number.

<Img
img="/api/uploads/13_ampvalidation_6a632a5983.png"
alt="AMP fields validation"
/>

### Telegram Integration

Previously, webhooks were the only option available for quickly processing messages from AMP forms and the [**Interactive stream**](https://pixcraft.io/blog/interactive-stream-in-amp-emails-next-level-of-engagement). With the latest update, you can now also use direct integration with Telegram.

The integration is configured through a [**dedicated bot**](https://t.me/pixcraft_forms_bot). For example, you can add it to your own group and configure it to send notifications directly there.

No need to worry if you already use webhooks: they remain available and continue to work as before.

## Figma Plugin

The changes also affect the [**Pixcraft plugin for Figma**](https://pixcraft.io/figma). Here, project support has been added: by default, the plugin uses the project you previously worked in, while another project can be selected from the user menu.

<Img
img="/api/uploads/14_figmaprojects_95b1f0966f.png"
alt="Pixcraft plugin for Figma"
/>

The export and integrations panel has also been updated. Its appearance now matches the corresponding panel in the Pixcraft builder and includes the same visual improvements and code compression option.

<Img
img="/api/uploads/15_figmaexport_33664fec0f.png"
alt="Export screen in Figma plugin"
/>

When you export a layout through the Figma plugin, it automatically appears in the template list of the current project and is marked with the corresponding icon.

<Img
img="/api/uploads/16_figmaicontemplate_1b54726509.png"
alt="Template in a list"
/>

## Other Changes

The list of new features does not end there. In addition to the major updates, the following technical improvements have been introduced in Pixcraft:

- Email templates are now saved several times faster. You no longer need to wait for a lengthy loading process after making substantial changes. 
- Automatic lossless PNG image compression has been added. Compression is performed when an image is uploaded. The same mechanism is applied to templates created in Figma using the plugin. 
- The service’s stability, fault tolerance, security, and overall performance have also been improved.

## Conclusion

The major Pixcraft update makes working on emails easier at every stage, from preparing a layout to testing, exporting, and analyzing the results. Try the new features yourself: [**create an account**](https://app.pixcraft.io/user/register) and receive free access to Pixcraft for 14 days.

Learn more about the new functionality of the Pixcraft email builder and the Pixcraft plugin for Figma: what's changed with the latest update, what new features have been added, and how existing ones have been upgraded.

small_updates_cover (1).png

thumbnail_updates_cover (1).png

updates_cover (1).png

Pixcraft Update: What New Features and Improvements Have Been Introduced

In 2026, [**over 55%**](https://genesysgrowth.com/blog/mobile-email-engagement-stats-for-marketing-leaders) of emails are read on smartphones and tablets. This means that email campaigns must remain visually solid and structurally sound on both desktop and mobile devices.

But how do you craft email templates that adapt correctly to different screen sizes and devices? And what factors should be considered to ensure that these templates render equally well across various email clients? Read this article to find out.

## What Specifics Should Be Considered When Adapting Emails

Unlike browsers, whose rendering engines have largely evolved according to mostly unified standards, email clients represent an extremely diverse environment. The rules and limitations here may vary drastically, and classic adaptation methods won't always work as expected.

### Media Queries

In web development, media queries are the cornerstone of adaptability. They allow you to change how content is displayed depending on screen width, orientation (portrait or landscape), [**pixel density**](https://pixcraft.io/blog/email-adaptation-for-retina-displays-how-it-works-and-what-to-consider), and color scheme (light or dark). For example, it’s possible to switch from a two-column layout to a single-column layout at a certain window width.

However, when it comes to email clients, the situation is quite different. [**Not all clients**](https://www.caniemail.com/features/css-at-media/) work properly with media queries: some support media queries only partially while others do not support them at all. Therefore, media queries should not be considered the primary adaptation mechanism in professional email coding.

Two of the most prominent examples are Yandex Mail and the mobile web version of Gmail. Media queries do not work here, so an email that relies strictly on those might lose adaptability (and sometimes readability).

### Mobile First Approach in Emails

The Mobile First approach deserves a special mention. Its core idea is that the email or a webpage is initially coded with smaller screens in mind and then adapted for desktops and laptops using media queries. In email design, for instance, the [**MJML**](https://pixcraft.io/blog/email-frameworks-mjml-vs-tjml) framework uses this approach.

But if media queries aren’t supported, the desktop view will display the mobile version of the email. For example, you may encounter this problem when opening a campaign in Yandex Mail. Therefore, relying on the Mobile First approach (especially for email campaigns in Russia) is not the best option.

## How Does Reliable Mobile Adaptation Work

For proper mobile adaptation, a suitable option would be the “table-block” approach combined with careful, targeted use of media queries. In short, this approach works as follows: 

- table structures form the backbone of the email; 
- adaptive blocks inside tables are implemented using CSS properties that most email clients understand; 
- media queries are used only for cosmetic improvements; 
- conditional comments provide a fallback structure for Outlook.

Let's break down each layer of this approach.

### Tables as the Foundation

A table structure (`<table>`) behaves predictably in email and is supported by the majority of email clients. Tables define the external grid of the email: width, placement of main sections, background colors. 

By default, the table structure describes a desktop layout that should display if adaptation does not occur. Thus, in environments lacking media query or modern CSS property support, the recipient is guaranteed to see a correct desktop layout.

### Blocks for Adaptation Without Media Queries

The main ingredient enabling mobile rearrangement even in the absence of media queries is a simple `div` with the attribute:

`style="display: inline-block"`

Elements with `inline-block` align horizontally as long as there is enough width in the parent container. If space is insufficient, the last element wraps to the next line. This approach works reliably in Yandex Mail, the mobile web version of Gmail, and other email clients.

In practice, basic mobile adaptation looks like this.

Suppose the desktop version of an email has two columns of 300px each with no margins. They fit inside a 600px wide container. But in a mobile client, the available width might be, say, 430px. Here, the columns no longer fit side by side and instead automatically stack vertically.

<Img
img="/api/uploads/01_mobileadapt_e950bd44fd.png"
alt="Email mobile adaptation"
/>

### Media Queries as a Fine-Tuning Layer

Sometimes after rearrangement, blocks retain empty space on the left or right. This happens because the blocks do not stretch on their own; instead, they retain the width originally set for the desktop.

In this situation, media queries can help. They allow you to:

- change block widths to 100% so they fill the screen evenly;

<Img
img="/api/uploads/02_variousadapt_ad5519f7ea.png"
alt="Adaptation with and without media queries"
/>

- adjust alignment (for example, switch from left to center alignment); 
- hide or swap elements (e.g., show a horizontal banner in the desktop version and a square one on mobile when the media query triggers);

<Img
img="/api/uploads/03_differentbanners_588cae0ea2.png"
alt="Banners in desktop and mobile versions of an email"
/>

- transform margins and paddings: collapse unnecessary gaps, turn horizontal dividers into vertical ones.

<Img
img="/api/uploads/04_reshapecolumns_9b100f8f09.png"
alt="Rearrangement in a mobile version of an email"
/>

It is also crucial that in case media queries are not supported, the recipient will see the "basic" adaptation of an email: slightly less polished, but still fully functional.

### Conditional Comments for Outlook

Although desktop Outlook is not directly related to mobile email coding, it may become an important factor for splitting the desktop display logic and the mobile adaptation logic into two parallel tracks.

The reason is as follows: 

- Outlook renders emails using the Word engine, which ignores most CSS properties necessary for adaptive behavior. 
- Consequently, classic content rearrangement methods (such as `inline-block`, `float`, `flex`, and `grid`) either work unpredictably or do not work at all. 

For the B2B segment, where Outlook is one of the most widely used email clients, a loss of quality can be critical for the entire communication flow.

This requires an approach where desktop Outlook receives a separate structure, while other email clients work with adaptive blocks. To correctly render complex elements here, special code fragments — conditional comments — are used: 

``

Inside them, part of the structure is usually built using tables: for example, a multi-column block that relies on `inline-block` in other clients is broken down into a separate table row with cells.

Simply put, desktop Outlook receives a simplified, fully table-based layout and renders it reliably and predictably. The other clients ignore the conditional comments and work with the block-based model.

## How Margins and Paddings May Behave On Mobile (and What to Do About It)

The problem with margins and paddings arises because the same layout is implemented in three versions: a block-based version with `inline-block` (basic adaptation), an enhanced block version with media queries, and a table-based version for Outlook.

Suppose the desktop email has two columns. The left column has a right padding (`padding-right`).

- In the table-based layout for Outlook, the padding works correctly. 
- On mobile, columns stack vertically. The right padding of the left column persists, which leads to extra empty space to its right.

<Img
img="/api/uploads/05_indentright_b1c81e4cfc.png"
alt="Padding to the right"
/>

There are three solutions here: 

- Make the paddings symmetrical: add equal left and right paddings to each element (e.g., product cards) and set center alignment on the parent element. In this case, blocks will be centered when they wrap.

<Img
img="/api/uploads/06_indentsboth_bb413b2235.png"
alt="Symmetrical paddings"
/>

The downside here is that the cards won’t take the full screen width and will not touch the left and right edges: margins will always remain on the sides. Therefore, this solution works only in cases where the design permits it. 
- Keep the asymmetrical right padding and set left alignment. In this case, the rearranged blocks will align to the left edge, and the "extra" padding will simply remain to the right, preserving a uniform content width.

<Img
img="/api/uploads/07_indentadapt_104174060b.png"
alt="Left alignment in an email"
/>

- Remove the padding in the mobile version using media queries. However, this is not the most reliable method because if the email client does not support media queries, the padding will remain. 

## How Mobile Adaptation Works for AMP Emails

The AMP for Email technology is supported only in modern email clients, such as [**Gmail and Mail.ru**](https://pixcraft.io/blog/amp-emails-how-their-rendering-differs-between-email-clients). AMP emails do not require special workarounds: almost all CSS features are available here, including `flex`, `grid`, and media queries.

The use of tables in AMP essentially serves no purpose: they bloat the markup and make maintenance harder. At the same time, semantic block-based layouts offer both flexibility and performance.

It should be noted that AMP does not eliminate the need for a classic HTML fallback. Including an HTML version within an AMP email is a mandatory requirement.

## How Mobile Adaptation of Email Templates Works in Pixcraft

Automatic email adaptation is implemented in the Pixcraft email builder. We combine approaches depending on the selected adaptation mode. As a result, blocks rearrange neatly without losing visual structure even when media queries are not supported.

For email clients that support media queries, the editor provides various adaptation scenarios. For example, you can:

- set columns to stretch to full screen width or keep them unstretched after rearrangement; 
- choose more complex rearrangement schemes (e.g., place one column with stretching into a separate row, and two other columns below it without stretching).

## Conclusion

In email coding, adaptability is built using several layers. First, you lay the most reliable foundation that works for the majority of email clients, and then add enhancements for clients with broader capabilities. This strategy ensures predictable results across different devices and email clients.

The Pixcraft email builder follows these principles in its operational logic. [**Try it**](https://app.pixcraft.io/user/register) for free for 14 days and see for yourself. And if you'd like to learn more about Pixcraft, feel free to [**contact us**](mailto:experts@pixcraft.io).

In this article, we discuss the mobile adaptation of emails: what techniques to use, what nuances to consider, and how it works in Pixcraft.

small_adapt_cover.png

thumbnail_adapt_cover.png

adapt_cover.png

Mobile Email Adaptation: How to Ensure Proper Rendering Across Different Devices and Email Clients

We continue our series of articles comparing **Pixcraft** with other solutions on the market. Previously, we already compared our email builder with [**Beefree**](https://pixcraft.io/blog/beefree-vs-pixcraft-which-tool-to-choose-for-your-email-campaigns), [**Letteros**](https://pixcraft.io/blog/pixcraft-vs-letteros-testing-the-capabilities-of-email-builders), and [**TOPOL**](https://pixcraft.io/blog/pixcraft-vs-topol-how-the-approach-to-email-design-differs-between-email-builders). Now, it is time to take a look at **Stripo**, one of the most popular email builders.

What are the differences between **Pixcraft** and **Stripo**? And how do they manifest in practice? Read this article to find out.

## Availability in the Russian Market

Before we move on to the capabilities of email builders, it is necessary to mention the regional restrictions of **Stripo**. Officially, the service does not work with Russian businesses and individual users:

- payments from Russian bank cards, as well as through payment systems if the billing address is in Russia, are not accepted; 
- invoices are not issued through financial institutions and payment systems that are residents of Russia or operate within its territory; 
- claims and complaints from Russian users are not processed.

For these reasons, full use of **Stripo** in Russia becomes impossible.

In turn, **Pixcraft** is a product developed in Russia and included in the country’s [**Register of Domestic Software**](https://reestr.digital.gov.ru/reestr/2993128/?sphrase_id=18372541). It is created for both Russian and international users:

- the email template builder is suitable for businesses, agencies, and freelancers; 
- for corporate clients, **Pixcraft** offers pricing plans with advanced features, as well as On-Premises deployment.

## Basic Template Editing Capabilities

At their core, both **Pixcraft** and **Stripo** are flexible builders for creating email campaigns with different levels of complexity:

- both email builders operate according to the drag-and-drop principle: components can be moved freely inside the template and adapted for a specific campaign; 
- properties can be configured for individual components and their groups (for example, blocks, stripes, or columns); 
- email templates can be created from scratch, with the help of ready-made templates from the gallery, or by using predesigned components: **Pixcraft** provides Assets, while **Stripo** offers Structures and Modules.

<Gallery>
<GalleryItem
original="/api/uploads/001_px_assetsmenu_63002f0b3d.png" 
thumbnail="/api/uploads/001_px_assetsmenu_63002f0b3d.png" 
/>
<GalleryItem
original="/api/uploads/002_strpstruct_and_mod_cdd151d389.png" 
thumbnail="/api/uploads/002_strpstruct_and_mod_cdd151d389.png" 
/>
</Gallery>

Preview mode in both **Pixcraft** and **Stripo** allows users to evaluate desktop and mobile versions of the email in both light and dark themes. At the same time:

- In addition to the standard dark mode, **Pixcraft** allows you to view emails in Gmail's dark theme on iOS, which has its own color inversion rules. The mobile version can also be checked more precisely by adjusting the screen width.

<Img
img="/api/uploads/003_px_prvwmenu_b539412b20.png"
alt="Template preview in Pixcraft"
/>

- **Stripo** includes the option to edit the mobile version of the template directly (although these changes also affect the desktop version). Additionally, you can send a test email to your own email address.

<Img
img="/api/uploads/004_strpprvw_e38f5545ab.png"
alt="Template preview in Stripo"
/>

## AMP Capabilities

Interactive AMP components are a full-fledged part of the **Pixcraft** builder. In particular, these components are available directly in the builder interface:

- **Carousel** for creating image galleries with the ability to scroll through images and loop the scrolling.

<Img
img="/api/uploads/005_px_ampcarousel_c4e1ca8a26.png"
alt="AMP Carousel in Pixcraft"
/>

- **Forms** for surveying the recipients and collecting feedback. There is no need to configure data collection and storage separately: responses are automatically gathered and stored in **Pixcraft**. When necessary, webhooks can also be connected to transfer form data to external services such as a Telegram bot or a CRM system.

<Img
img="/api/uploads/006_px_ampform_0ae922da32.png"
alt="AMP Form in Pixcraft"
/>

But **Pixcraft’s** AMP capabilities are not limited to these two components alone. The email builder includes additional components that can be configured separately and then connected to emails:

- **Amp-Form** to create advanced survey forms; 
- the interactive **AMP-Link** for sign-up or subscription confirmation without closing the email; 
- **Interactive Stream** to turn the email into a mini forum by adding a comment section; 
- the **Amp-List** component for updating the email content in real time.

<Img
img="/api/uploads/007_px_components_08736a7d17.png"
alt="Additional AMP components in Pixcraft"
/>

**Stripo** also supports AMP functionality. While working on a template, you can add **Carousel**, **Form**, or **Accordion** (blocks with text, images, or buttons that can be expanded by clicking) to your email.

<Gallery>
<GalleryItem
original="/api/uploads/008_strpcarousl_37f76ab3c6.png" 
thumbnail="/api/uploads/008_strpcarousl_37f76ab3c6.png" 
/>
<GalleryItem
original="/api/uploads/0109_strpform_585432f5ad.png" 
thumbnail="/api/uploads/0109_strpform_585432f5ad.png" 
/>
<GalleryItem
original="/api/uploads/010_strpaccord_f73919d353.png" 
thumbnail="/api/uploads/010_strpaccord_f73919d353.png" 
/>
</Gallery>

However, the creation of additional components is not supported by the built-in functionality: these need to be created manually using code.

## Bulk Editing of Elements

Imagine a situation: you are working on an email template that contains numerous links. These need to be checked and, if necessary, replaced. But manual checking takes a lot of time and is inconvenient since it is easy to miss something.

For such cases, **Pixcraft** includes the **Link Map**: here, you can find all email components that contain links (buttons, text fragments, or images), conveniently check and edit them. And if you need to find the component inside the email, this can be done using the target icon.

<Img
img="/api/uploads/011_px_linkmap_88950d806e.png"
alt="Link Map in Pixcraft"
/>

But what if you need to change, for example, the formatting of headings or buttons? This is where the **Styles** tool becomes useful. It allows you to configure the style of the required text or buttons in bulk (including color, border radius, and other parameters). And, of course, all changes are immediately displayed in the email template.

<Img
img="/api/uploads/012_px_styles_12cb8cc6c9.png"
alt="Styles in Pixcraft"
/>

In the **Stripo** email builder, bulk editing works differently. The **Global Styles and Layout** feature allows you to change the appearance of headings, buttons, and stripes, including setting text parameters separately for headers, footers, content, and the info area.

<Img
img="/api/uploads/013_strpglobstyles_1281cae678.png"
alt="Global Styles and Layout in Stripo"
/>

Yet at the same time, **Stripo** does not offer a dedicated tool for editing links in the email. You will have to go through the entire template manually, selecting each element one by one and making the necessary adjustments.

## ESP Integrations

When it comes to integrations, **Stripo** offers compatibility with dozens of different ESPs: from popular international platforms (such as ActiveCampaign, Mailchimp, Moosend, and Klaviyo) to more niche solutions. If the required platform is not on the list, you can request its addition.

It is worth noting that direct export to ESPs is available only on paid plans.

<Img
img="/api/uploads/014_strpesp_5140dc2a29.png"
alt="ESP integrations in Stripo"
/>

**Pixcraft** is also compatible with popular international ESPs, including Mailchimp, Klaviyo, and SendGrid. But for Russian users, the main advantage lies in its integrations with domestic solutions, such as [**Altcraft**](https://altcraft.com), Unisender, SendSay, DashaMail, and others.

<Img
img="/api/uploads/15_pxesp_681697a930.png"
alt="ESP integrations in Pixcraft"
/>

Ready-made integrations with popular Russian services simplify work and make it possible to start sending email campaigns immediately through a suitable platform, without lengthy setup from scratch.

## Social Media Logos

It is hard to imagine a modern marketing email without links to a company’s or brand’s resources. That is why sets of social media icons are available in many email builders, including **Pixcraft** and **Stripo**.

**Pixcraft** offers not only the library of logos itself, but also tools for their personalization. The icon library features both international and Russian social networks and messengers, including VK, Dzen, and Rutube.

You can change the appearance of logos as required: from the shape and size of the icon to its color (or even the color of the logo inside it). In other words, each icon can be adapted to the unique style of a specific email campaign.

<Img
img="/api/uploads/015_px_socialicons_bcc4826446.png"
alt="Social media icons in Pixcraft"
/>

The **Stripo** email builder also provides an extensive set of icons for social networks, messengers, and other platforms. However, it does not offer options for customizing their appearance.

The selected icon display style is chosen from a dropdown list. Several variations are available: for example, in the original colors of the corresponding platforms, black, gray, white, and so on.

<Img
img="/api/uploads/016_strpsocicn_1c59a9caa5.gif"
alt="Social media icons in Stripo"
/>

Size, spacing, and other standard parameters can be configured for the icons, but their colors, background, and borders correspond to the selected style. Icons with custom design will have to be created using a third-party editor.

## Rendering in Outlook and Yandex Mail

Finally, it is worth mentioning how emails are displayed in Outlook and Yandex Mail.

In Outlook, the **Stripo** template immediately faced several issues. First, on a 120 DPI screen, the display of borders in columns was broken. Second, the graphic element at the bottom of the email lost its background. In addition, extra lines appeared: they can be seen under the App Store and Google Play buttons.

<Img
img="/api/uploads/18_strpoutl_85e0efda34.png"
alt="Stripo template rendered in Outlook"
/>

The email is rendered as expected in the desktop Yandex Mail. But in the mobile client, the adaptation did not work: this is especially noticeable in how the columns are displayed.

<Img
img="/api/uploads/19_strpyand_de6a99fd93.png"
alt="Stripo template rendered in Yandex Mail mobile client"
/>

**Pixcraft** takes the specifics of Yandex Mail and Outlook into account. Email templates are adapted so that their rendering remains correct even when the email client does not support media queries or some of the CSS properties.

<Img
img="/api/uploads/20_pxyand_fbd2632ff3.jpg"
alt="Pixcraft template rendered in Yandex Mail mobile client"
/>

It is also worth mentioning mobile adaptation in the **Pixcraft** editor. You can directly configure how components are rearranged in the mobile version of the email: one column, two columns per row, or (when the block contains three columns) with one of them displayed in a separate row and the other two placed either above or below it.

<Img
img="/api/uploads/017_pxmbladapt_2bad90f352.png"
alt="Mobile adaptation settings in Pixcraft"
/>

## Conclusion

Both services have their own strengths:

- **Stripo** is a mature and well-established builder with broad capabilities for template creation, support for dozens of ESPs, and built-in sending of test emails. 
- **Pixcraft** offers similar flexibility when creating email templates. At the same time, it works more deeply with AMP, includes convenient tools for bulk editing of elements, and, most importantly, the email builder is fully available for Russian users.

Give **Pixcraft** a try: [**sign up**](https://app.pixcraft.io/user/register) today to receive a 14-day free trial. And if you have any questions regarding our email builder, contact us by [**email**](mailto:experts@pixcraft.io). 

_Facebook, Instagram, and WhatsApp are owned by Meta Platforms Inc., recognized as an extremist organization and banned in the Russian Federation._

_LinkedIn is blocked in the Russian Federation._

_Access to the social network X (formerly Twitter) is restricted in the Russian Federation._

In this article, we compare the capabilities of the Pixcraft and Stripo email builders: key features, AMP functionality, bulk editing of elements, and more.

small_pix_vs_strp_cover.png

thumbnail_pix_vs_strp_cover.png

pix_vs_strp_cover.png

Pixcraft vs Stripo: Which Email Builder to Choose

Microsoft Outlook and Gmail (as part of Google Workspace) have long been among the leaders in the corporate email landscape. However, the market is not limited to industry giants alone and offers other solutions that may not be immediately noticeable but are definitely worth checking out.

Among those is the [**Mozilla Thunderbird**](https://www.thunderbird.net/) email client, which serves as a free and open-source alternative. In this article, we’ll take a look at what Thunderbird is, what advantages it offers, and how email rendering works in its desktop and mobile versions.

## What Is Thunderbird and What Are Its Advantages

Thunderbird is developed by the Mozilla Foundation, the creators of the popular Mozilla Firefox browser. The project is supported both by the core development team and the community, while remaining independent from commercial platforms and corporate ecosystems.

Thunderbird was first released in 2003 and has gained significant recognition over more than two decades, including in the corporate sector. Among the main reasons are its accessibility and its open development model.

**Open-source email client.** Mozilla Thunderbird is an open-source project. Changes to the core version are reviewed and accepted by the development team, while the source code remains publicly available. Anyone can study how it works, suggest improvements, or even adapt it for specific needs. 

Why does this matter for businesses? Unlike many proprietary solutions that do not reveal their source code publicly, Thunderbird stays open for inspection and modification. Its behavior can be verified at the code level, which is important for companies with strict requirements for security and transparency.

**Free distribution.** Thunderbird is completely free: no subscriptions, no paid licenses, no mandatory connections to company cloud services or limitations on usage scenarios. Emails and settings remain under the user’s control and can be stored locally or on a chosen server.

For businesses, this means that the email client can be downloaded, installed, and configured (for example, integrated with internal email systems) without additional costs. This is especially relevant for teams with limited budgets or a large number of employees.

As for **email rendering**, Thunderbird displays HTML emails using the Gecko engine, the same one used in Firefox. It follows familiar Mozilla logic for parsing HTML and CSS and generally handles the basic structure of emails correctly.

At the same time, Thunderbird remains an email client, not a browser. Emails are not rendered like standard web pages, and some CSS properties, media queries, and behaviors work with certain limitations. These nuances are what we are going to examine in more detail. 

## Email Rendering Peculiarities in Thunderbird

### Handling the max-width Property for Images

One of Thunderbird’s distinctive traits is how it processes images.

If an image is not wrapped in a link and its original size exceeds the displayed size, the client automatically applies the `shrinktofit` property so that the image scales to the container width. When hovering over the image, a zoom icon appears, allowing it to be viewed at full size:

<Img
img="/api/uploads/01_upscl_fe0d1cb4bc.gif"
alt="Image scaling in Thunderbird"
/>

To implement this behavior, Thunderbird adds the following rule: 

`max-width: 100% !important`

This rule has higher priority and overrides constraints defined in the email code.

Let’s take a look at this example:

`<img src="..." style="width: 100%; max-width: 30px;" />`

Here’s how it works: 

- `width: 100%` sets the width to 100% of the container 
- `max-width: 30px` limits the maximum width to 30 pixels 

However, Thunderbird’s `max-width: 100% !important` overrides the `max-width: 30px` limit. As a result, the image ignores the restriction and stretches across the full container width.

This may lead to layouts where images look very different from the intended design. For example, this is how images may look:

<Img
img="/api/uploads/002_imgerr_f5b8340d4e.png"
alt="Stretched images in Thunderbird"
/>

Yet this is how they were originally intended:

<Img
img="/api/uploads/03_imgintnd_993bdda96b.png"
alt="How the images were originally intended"
/>

How to fix that? Actually, it’s rather easy. Use the `width` attribute instead of `max-width` to define exact dimensions:

`<img src="..." style="width: 30px;" />`

In this case, Thunderbird’s internal logic won’t interfere, and `shrinktofit` won’t affect the image size.

### Dark Mode Behavior

As in the case with most email clients, Thunderbird supports [**dark mode**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it). However, it processes colors based on its own set of rules. 

In standard logic used by many other email clients, when it comes to dark mode:

- light backgrounds are converted to dark shades while preserving tone 
- dark colors remain unchanged

<Img
img="/api/uploads/004_lghtdrkthm_231648a8e2.png"
alt="Colors in light and dark modes"
/>

Thunderbird behaves differently: the `bgcolor` attribute is removed in dark mode. Background colors set via CSS (`background-color`) remain intact, but only if they are sufficiently dark. Otherwise, they are also removed:

<Img
img="/api/uploads/005_lghtdrkthndr_0b982f74d5.png"
alt="Colors in desktop Thunderbird"
/>

This most often affects buttons and banners. If a button has a light background, it may disappear in dark mode. In this case, a button may resemble a regular text link.

Here’s how it looks in practice. A button that is clearly visible in light mode may become barely noticeable in dark mode:

<Img
img="/api/uploads/06_bttndark_a0d0c07af6.png"
alt="Barely noticeable button in an email"
/>

A button with a darker background, on the other hand, retains visibility:

<Img
img="/api/uploads/07_bttnvisible_942b732564.png"
alt="A visible button in the dark mode"
/>

The solution here is to use darker fills for buttons or add a border (using the `border` property). In Thunderbird, borders are not recolored or removed, which helps maintain visual emphasis:

<Img
img="/api/uploads/08_buttonbrdr_a576045b10.png"
alt="A button with borders"
/>

### Color Rendering in the Mobile App

Since 2024, Thunderbird has also been available as an Android app. In terms of color rendering, the mobile version behaves more predictably than the desktop version.

Here, background colors do not disappear. If a color is too light, it is simply adjusted. The available color range aligns with, for example, the color range in the Gmail mobile app:

<Img
img="/api/uploads/009_colrndr_92bd01b7bd.png"
alt="Colors in mobile Thunderbird"
/>

### Image Loading and Email Clipping

In both desktop and mobile versions of Thunderbird, external images are disabled by default. They can be displayed for a specific email or enabled globally in the settings. Until then, images are not loaded in emails. This is why it’s important to pay attention to alt text: a short, precise description preserves context even when images are not displayed. 

Another significant detail is that in the mobile version, emails are not always fully loaded when opened. Initially, only the header and part of the body may be displayed. The rest of the content loads only after tapping the button to view the full message.

This may affect tracking pixels. If these are placed at the bottom of the template, pixels may not load until the user requests the full email.

The solution is straightforward: test campaigns and adjust layouts if something doesn’t render as expected.

## Conclusion

Thunderbird does not aim to replicate ecosystem-based solutions, and that is among its strong points. It remains open and flexible, fitting well in environments where control over infrastructure, transparency, and independence from external platforms matter.

Email rendering specifics require attention during development, but this applies to almost all email clients. Testing templates before sending is essential, especially if they target a specific service.

To keep your email layouts under control, use the Pixcraft email builder, which takes into account the specifics of different email clients. Try it yourself: [**sign up today**](https://app.pixcraft.io/user/register) and get 14 days for free to try it out.

In this article, we discuss the Mozilla Thunderbird email client, its advantages for personal and business use, and some of its important peculiarities.

small_thundercov.png

thumbnail_thundercov.png

thundercov.png

Mozilla Thunderbird: Its Advantages and How It Handles Email Rendering

High-pixel-density screens such as Retina displays impose their own requirements on the quality of visuals. This also applies to email design: illustrations, banners, and icons must look sharp across different display types.

In this article, we examine how pixel density affects the rendering of visual elements in email campaigns, what is required for proper image adaptation, and which details deserve particular attention.

## What Retina Displays Are and What Is Special About Them

The term _Retina_ was introduced by Apple Inc. in 2010 and originally used only for devices developed by the company. Over time, though, the term went beyond the company’s products and informally came to denote any screen with a high DPR (Device Pixel Ratio).

DPR indicates how many physical screen pixels are used to display one CSS pixel:

- On a screen with DPR = 1, one CSS pixel corresponds to one physical pixel. 
- On devices with DPR = 2, one CSS pixel corresponds to two physical pixels horizontally and two vertically (four pixels in total). 
- On displays with DPR = 3, one CSS pixel corresponds to a total of nine physical pixels.

For example, let’s take a raster image with a resolution of 450 × 300 px. In an email layout, it’s also displayed at 450 × 300 CSS pixels. However, on a screen with DPR = 2, that same image occupies 900 × 600 physical pixels and may appear visually blurred as a result.

[**Fonts**](https://pixcraft.io/blog/typography-in-email-how-to-make-text-more-effective) usually do not have such issues. Font glyphs are typically defined by vector outlines and are converted into pixels during rendering with the screen density taken into account. As a result, text remains visually sharp even on displays with high pixel density.

### Why This Matters for Email Campaigns

In email campaigns, readers usually pay attention to the visuals first. Because of this, graphic elements play a role that is just as significant as [**responsive layout**](https://pixcraft.io/blog/responsive-design-how-to-create-beautiful-emails-that-display-correctly) and correct rendering in different email clients.

[**Branding**](https://pixcraft.io/blog/how-to-use-branding-in-email-templates-to-create-a-recognizable-style) elements often include thin lines, small typography, or complex graphic details. When such elements are displayed on screens with DPR = 2 or higher, scaling defects become especially noticeable.

For example, this is what an image looks like when it’s not adapted for high-pixel-density screens. Artifacts become noticeable even with slight zooming.

<Img
img="/api/uploads/01_notadapt_355f8cb4b3.png"
alt="Logo not adapted for high-DPR displays"
/>

For comparison, below is an adapted image that maintains detail quality when scaled.

<Img
img="/api/uploads/02_adapted_c648987822.png"
alt="Logo adapted for high-DPR displays"
/>

This applies not only to branding elements but also to other graphic components in an email. If they appear blurred or noticeably pixelated, the campaign gives the impression of being poorly prepared.

## How to Adapt Images for High DPR

An effective way to adapt visuals in emails is to prepare illustrations at a higher resolution and then reduce their display size in the HTML code. This means that the image file contains more pixels in width and height than the size at which it appears in the email.

For example, if the displayed size of a logo is 150 × 62 px, the graphic file is prepared at 300 × 124 px. In the code, the display size must be fixed using the `width` and `height` attributes so that the email client renders the image within the intended dimensions:

```xml
<img src="logo2x.png" width="150" height="62" alt="Company logo" style="display:block; border:0;">
```

In this case, the logo still occupies 150 × 62 CSS pixels, but since the file was prepared at a larger size, the image maintains visual quality on screens with DPR = 2.

In most cases, increasing the image dimensions by a factor of two relative to its actual display size is sufficient. This ratio covers the majority of common scenarios on modern smartphones, laptops, and tablets. Increasing the image dimensions three times is theoretically possible, though it’s used less often in email campaigns because file size increases as well.

## What to Consider When Adapting Images for Emails

### Choosing the Right Format

When selecting illustration formats for email campaigns, two criteria are particularly important: support across email clients and predictable rendering. Most often, raster formats are used in email campaigns, including:

- **PNG** — images with lossless compression in which sharp edges and small details are mostly preserved. PNG is supported by the [**vast majority of email clients**](https://www.caniemail.com/features/image-png/), including mobile versions, and is a suitable option for logos, icons, interface elements, and illustrations with transparent backgrounds. 
- **JPEG** — here, the file size is reduced through partial loss of image data. The format is suitable for photos and complex illustrations with many colors, though transparent backgrounds are not supported. 
- **GIF** — used mainly for simple [**animations**](https://pixcraft.io/blog/animation-in-email-newsletters-guidelines-for-reliable-display) such as small animated banners or short interface demonstrations. The format supports a limited palette of up to 256 colors, which makes it unsuitable for complex graphics.

In web development, **SVG** images are also widely used. Because the format is vector-based, image sharpness remains intact when scaling. However, SVG isn’t the best option for email campaigns due to its low support: major email clients, including Gmail, do not work properly with SVG illustrations.

### Balancing Email Size

Increasing image dimensions inevitably affects the total size of the email. The more graphic elements a campaign contains, the larger their combined volume becomes, which influences loading time.

Image optimization services such as **TinyPNG** reduce file size through efficient compression and removal of unnecessary metadata that does not affect visual rendering. Processing of this kind is particularly relevant for large banners, background illustrations, and other heavy images.

### Text Inside Images

Sometimes text becomes an integral part of an image. In banners, for example, it can emphasize an offer, highlight a promotion, or draw attention to certain details. In these cases, the visual emphasis becomes stronger and the email appears more expressive.

Problems arise when the main body text of the email is placed inside images:

- If the visual element is prepared without considering high-DPR displays, text inside may appear blurred. 
- Such text does not adapt as flexibly as regular text in the email. Image scaling often makes it difficult or impossible to read. 
- Issues may also occur with dark mode. Text inside an image retains its original color while the background and other elements may be inverted, which sometimes results in dark text on a dark background.

Main information, headings, and text blocks should be added to the email as regular HTML text. It renders correctly on different displays and in different email clients, and remains accessible even when image loading is turned off.

## Conclusion

High-DPR displays have already become standard, and email design must take this into account. Careful preparation of graphic elements keeps emails visually consistent and maintains high rendering quality across various types of devices.

And if you wish to convert your designs into responsive email templates, try the [**Figma plugin**](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-export-html-email-code-from-your-figma-design-responsive-outlook-gmail-ios) by Pixcraft. It not only exports ready-to-use email markup but also automatically adapts images for high-pixel-density displays.

This article describes the details and specifics of adapting email templates to high-pixel-density screens: how it works and what to consider.

Blog