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.

small_ret_cover.png

thumbnail_ret_cover.png

ret_cover.png

Email Adaptation for Retina Displays: How It Works and What to Consider

Choosing an email builder isn’t always an easy or straightforward task. Various tools may differ not only in obvious features but also in less noticeable — yet very important — details. Even subtle nuances may significantly affect how well a particular solution fits specific tasks.

Previously, we compared our email builder with [**Beefree**](https://pixcraft.io/blog/beefree-vs-pixcraft-which-tool-to-choose-for-your-email-campaigns) and [**Letteros**](https://pixcraft.io/blog/pixcraft-vs-letteros-testing-the-capabilities-of-email-builders). In this article, let’s take a closer look at how **Pixcraft** compares with **TOPOL**, focusing on the main differences between the two solutions.

## Basic Structure of Email Templates

In **Pixcraft**, email templates are created using either Primitives or ready-made Assets. Primitives are individual elements such as text, images, or interactive components. Assets are pre-assembled functional blocks (headers, footers, product cards, etc.) made up of several Primitives.

Regardless of whether you build an email from scratch, assemble it from Assets, or use a template from the [**gallery**](https://pixcraft.io/templates), flexibility remains the same. Any part of the email can be reworked for the current task: elements can be added or removed, their parameters adjusted, the number of columns changed, and much more.

You can edit blocks, columns, and each element within them. For example, if you need to change the properties of a column, simply select it and set the required values without the need to configure each element separately.

<Img
img="/api/uploads/001_pixcolumned_c1e32f9ad8.png"
alt="Pixcraft email builder interface"
/>

Both individual elements and entire stripes (horizontal sections that contain columns and elements) can be moved freely across the canvas. Columns within a single block can also be easily rearranged via drag-and-drop without dismantling and rebuilding them from scratch.

<Img
img="/api/uploads/002_pixcolrepl_9ea9a85e82.gif"
alt="Rearranging columns in Pixcraft"
/>

In **TOPOL**, the logic of email templates is based on Structures, each representing a separate row. Inside a Structure, Content elements are placed: these can be moved to different parts of the template and configured as required.

<Img
img="/api/uploads/03_topinterf_d2685acb81.png"
alt="TOPOL email builder interface"
/>

Reordering columns is also possible, though here, this is done through the settings of the selected structure and not directly on the canvas itself. The _Column’s properties_ option allows you to change column order within a row, as well as set alignment, border radius, background color, and other parameters.

<Img
img="/api/uploads/04_topcolprop_22e357ce7d.png"
alt="Column’s properties in TOPOL"
/>

## Mobile Responsiveness and Email Preview

**Pixcraft** provides tools for configuring mobile responsiveness directly in the editor. For example, you may choose how columns behave on mobile devices:

- a single column, either stretched to full width or without stretching; 
- a single row with reduced width; 
- for three columns — 1+2 (one column on a separate row with two below it) or 2+1 (two columns on the top row with the third below at full width); 
- for four columns — 2+2 (two columns per row).

<Img
img="/api/uploads/005_pixmobiladp_3fcb3cae52.png"
alt="Mobile adaptation options in Pixcraft"
/>

For email clients that do not support media queries, either block restructuring without stretching or simple width reduction without restructuring is used.

The preview mode allows for viewing both desktop and mobile versions of the email. You can check the template with AMP components enabled or disabled, as well as in light and [**dark modes**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it). This is especially important for emails with rich graphics, colored backgrounds, and accent elements.

The mobile preview width can be adjusted down to the pixel, making it easier to check layout accuracy and readability on different screen sizes. By clicking the _Screenshot_ button, you can save the template image in PNG format, which may come in handy for internal reviews or approvals.

<Img
img="/api/uploads/006_pixrszmbl_120ef3cb75.gif"
alt="Mobile version preview in Pixcraft"
/>

In **TOPOL**, preview is available directly within the editor and as a separate mode with the option to send a test email. Just like the desktop version of the template, the mobile version can be edited manually. It’s important to note that changes made in one version are synchronously applied to the other.

<Img
img="/api/uploads/07_topmobintf_afc9f49587.png"
alt="Mobile version of an email in TOPOL"
/>

**TOPOL** supports two column display scenarios for a mobile: stacking or compressing. Additionally, the _Fluid on mobile_ option in image settings controls scaling to screen width. Yet aside from that, no other options for adapting multi-column blocks for mobile are available.

<Img
img="/api/uploads/08_topmobeml_b8d04860bc.png"
alt="Settings for the mobile version of an email template in TOPOL"
/>

Both mobile and desktop previews are limited to a single fixed resolution, which cannot be changed. Dark mode preview is also not available, therefore correct rendering has to be checked using third-party services.

## AMP Capabilities

AMP components are included in the **Pixcraft** email builder alongside standard email elements. Among these is an AMP carousel that can contain up to 10 images. It offers two formats — a classic carousel and a slider — as well as looping and autoplay options.

<Img
img="/api/uploads/009_pxcrampcrsl_e7d76aaf8c.png"
alt="AMP carousel in Pixcraft"
/>

In addition to the image carousel, **Pixcraft** also includes AMP forms with flexible configuration options, from field types (text input, single or multiple choice) to visual presentation. Both the AMP forms and the AMP carousel are available as Primitives directly in the email builder interface.

<Img
img="/api/uploads/010_pxcrftform_0f2f86f7b3.png"
alt="AMP form in Pixcraft"
/>

Users can also create additional components that extend email campaign functionality. These include [**AMP-forward-link**](https://pixcraft.io/blog/amp-forward-link-how-to-confirm-actions-directly-in-the-email-client) for confirming actions without leaving the email, and an [**Interactive Stream**](https://pixcraft.io/blog/interactive-stream-in-amp-emails-next-level-of-engagement) that allows recipients to leave comments directly inside the email.

At the time of publication, **TOPOL** offers only a beta version of a carousel with support for up to five images. Settings include navigation arrows, image gallery options, border radius, and other parameters; autoplay and looping are not available. **TOPOL** does not currently provide information on whether additional AMP components are planned for implementation in the future.

<Img
img="/api/uploads/11_topcrsl_f863656031.png"
alt="Image carousel in TOPOL"
/>

## Comments in Templates

**Pixcraft** users can leave comments exactly where it makes most sense within the email. For example, a comment can be placed directly on a specific phrase in the text or on a particular part of an image that requires attention.

The _Comments_ tab in the left-side panel contains a complete list of all comments in the template along with replies. Searching for a specific comment in the layout is simple: click the target icon to immediately find the relevant spot.

<Img
img="/api/uploads/012_pxcrmnts_cf43ddfd39.png"
alt="Comments in Pixcraft"
/>

**TOPOL** takes a different approach. Here, comments are attached to a certain element without the option to specify an exact position. In order to leave a comment, users need to select an element, click the _Comment_ icon, and enter the text in the panel on the right.

<Img
img="/api/uploads/13_topcmnts_d36fcac4d8.png"
alt="Comments in TOPOL"
/>

Visually, the editor doesn’t indicate which elements contain comments. To view their list, you need to use the _Comments_ function in the top-right corner: it displays every comment in the template and, when you hover over them, highlights the associated elements.

## Email Export

**Pixcraft** provides several options to export a template: HTML (including the AMP version), EML, ZIP archive, or exporting the template directly to an email service provider. **TOPOL** supports HTML export, ZIP archive, saving a template in JSON format, or copying the code.

When it comes to built-in integrations with ESPs, by default, **Pixcraft** supports 11 platforms, while **TOPOL** supports 27. Both builders are compatible with popular international services such as Mailchimp, Klaviyo, and SendGrid. At the same time, Pixcraft also supports platforms such as [**Altcraft**](https://altcraft.com), Unisender, and Sendsay that are widely used in Russia and CIS countries.

## Links and Social Media

Both services provide convenient methods for basic work with links within the email. Differences become more noticeable when a single template contains numerous links spread across various blocks and elements.

In **TOPOL**, it’s not possible to view all links in an email at once. In order to check or edit them, you have to locate each link directly in the template one by one.

**Pixcraft**, on the other hand, includes a _Link Map_ tool that displays all links in a single list. This simplifies verification of emails with a large number of URLs in text, buttons, and banners. Links can be edited directly in the interface and quickly located on the canvas.

<Img
img="/api/uploads/014_pxcrftlnkmp_e312eba798.png"
alt="Link map in Pixcraft"
/>

Social media icons are also handled differently in both email editors. **TOPOL** includes a set of predefined icon styles, but if you require a custom icon, it has to be created and added manually. Built-in settings are limited to basic parameters such as size, alignment, and spacing.

<Img
img="/api/uploads/15_topsocmd_65544ca871.png"
alt="Social media icons in TOPOL"
/>

In contrast, **Pixcraft** allows for customization of social media icons directly in the interface. Settings include icon and logo colors, border radius, outlines, and other design details.

<Img
img="/api/uploads/016_pxcrftscicns_fa59bee41c.png"
alt="Social media icons settings in Pixcraft"
/>

## Rendering in Outlook and Yandex Mail

In **TOPOL**, mobile responsiveness relies on media queries, which may cause rendering issues in some email clients. For example, in the Yandex Mail mobile app, an email gets compressed, as seen in the screenshot below. Similar behavior may occur in the mobile web version of Gmail, where media queries are also not supported.

The first slide below shows how the email appears in Yandex Mail mobile app, and the second slide shows a screenshot from the tool's preview, demonstrating how the email is intended to adapt.

<Gallery>
<GalleryItem
original="/api/uploads/17_topadaptmobil_83cbdea3b9.jpg" 
thumbnail="/api/uploads/17_topadaptmobil_83cbdea3b9.jpg" 
/>
<GalleryItem
original="/api/uploads/18_tophowitsh_4d74f60f28.png" 
thumbnail="/api/uploads/18_tophowitsh_4d74f60f28.png" 
/>
</Gallery>

The desktop version of Outlook shows better results: the overall structure and block positioning remain intact. The only noticeable visual difference is the absence of rounded corners on buttons.

<Img
img="/api/uploads/19_topotlk_f687323974.png"
alt="TOPOL email template rendered in desktop Outlook"
/>

When it comes to template rendering, **Pixcraft** takes into account the nuances of different email clients to the maximum extent. As a result, templates maintain correct appearance even in environments that do not support media queries or certain CSS properties. The slides below show how an email created in **Pixcraft** is rendered in Yandex Mail mobile app and the desktop version of Outlook.

<Gallery>
<GalleryItem
original="/api/uploads/000_pixyanen_55d8dbd61d.jpg" 
thumbnail="/api/uploads/000_pixyanen_55d8dbd61d.jpg" 
/>
<GalleryItem
original="/api/uploads/000_pixoutlen_59f16fb879.png" 
thumbnail="/api/uploads/000_pixoutlen_59f16fb879.png" 
/>
</Gallery>

## Conclusion

Both **Pixcraft** and **TOPOL** email builders offer robust functionality for creating effective templates, but differ in details and overall approach to working with emails. These differences may become fundamental for choosing the tool that best matches your requirements and expectations.

One of the most reliable ways to make the right choice is to try a builder first-hand. [**Create a Pixcraft account**](https://app.pixcraft.io/user/register) today and get 14 days of free access to explore its capabilities. And if you want to learn more, feel free to [**contact us**](mailto:experts@pixcraft.io) and discuss any related details and questions. 

_Facebook and Instagram 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 Pixcraft and TOPOL email builders: what are their approaches to creating email templates and what are the most noticeable differences between the two tools.

small_pixvstopcov (1) (1).png

thumbnail_pixvstopcov (1) (1).png

pixvstopcov (1) (1).png

Pixcraft vs TOPOL: How the Approach to Email Design Differs Between Email Builders

When creating AMP emails, it’s important to consider not only markup correctness but also the environment in which the email is opened and rendered. Email clients may interpret the same mechanics differently, which affects the behavior of components within the email template.

In this article, we examine the differences in how AMP templates are displayed in two email clients — Gmail and Mail.ru — as well as the limitations that must be taken into account during email development.

## States (amp-state) and Their Initial Values

States in AMP emails are used as variables that can store data and serve as a basis for conditional display logic. These values are substituted into attributes (`[text]`, `[class]`, and others) and are updated in response to user actions.

One important thing to note is that a value inside `<amp-state>` is applied only after the state is initialized via `AMP.setState`. If certain data needs to be shown immediately after the email is opened, it can be set as a regular element content or as a default attribute value:

```xml
default value
```

In this case, `default value` is displayed initially. After a user action, the value of `myItem.el` appears. The action itself can be arbitrary, including a purely formal one. For example:

```xml
<amp-state id="myItem">
 <script type="application/json">
 { "el": "new value" }
 </script>
</amp-state>
default value
<button on="tap:AMP.setState({})">Button</button>
```

In **Gmail**, this process works according to the specification. When the button is clicked, the state is initialized and the `` element displays `new value`.

**Mail.ru**, in contrast, doesn’t take the initial values defined in `<amp-state>` into account. Because of this, attributes that rely on default data will display `null` after initialization.

To work around this limitation, use `setState` instead of `<amp-state>` so that values are updated dynamically at the moment of user interaction:

```xml
<button on="tap:AMP.setState({ myItem: { el: 'new value' } })">
 Button
</button>
<div [text]="myItem.el">default value</div>
```

## Expression Size Limitations

Although the AMP specification doesn’t define any limits for `amp-bind`, **Mail.ru** enforces a strict limit on expression length — no more than **100**. The Pixcraft team encountered this limitation while developing the [**“Snake” AMP game**](https://pixcraft.io/blog/snake-in-an-email-how-we-created-a-game-for-an-amp-newsletter-with-altcraft). When clicking a button in the email, Mail.ru displayed the following error:

```xml
amp-bind: Expression eval failed. Expression size (194) exceeds max (100)
```

At the same time, no such limitations were observed in **Gmail**.

A practical approach here is to design the email template with Mail.ru’s limit in mind: optimize calculations so that expressions stay within the allowed range.

## AMP Carousel Behavior

`<amp-carousel>` is a convenient tool for creating interactive image galleries that behaves predictably in most AMP-supported email clients. However, in **Gmail for iOS**, tapping the navigation arrow causes the email to scroll upward, which breaks the viewing context. This issue can’t be fixed through `<amp-carousel>` settings, as it’s not related to the `type`, `layout`, or component dimensions.

A more reliable solution in this case is to build a custom carousel using amp-bind. With this approach, the email doesn’t scroll uncontrollably during interaction. Below is an example of such an AMP carousel that includes four slides:

```xml
<style amp-custom>
.carousel-wrapper {
position: relative;
width: 500px;
height: 400px;
overflow: hidden;
}
.carousel-container {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide-0 { transform: translateX(0%); }
.slide-1 { transform: translateX(-100%); }
.slide-2 { transform: translateX(-200%); }
.slide-3 { transform: translateX(-300%); }
.carousel-slide {
min-width: 100%;
flex: 0 0 auto;
}
</style>
<div class="carousel-wrapper">
<div class="carousel-container" [class]="'carousel-container slide-' + carouselState.index">
<amp-img src="pic1.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic2.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic3.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic4.jpg" width="500" height="400" class="carousel-slide"></amp-img>
</div>
</div>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 4) % 4}})">
Previous
</button>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 4}})">
Next
</button>
```

The underlying logic here is as follows:

- the index of the current slide is stored in state; 
- the slide container is shifted using `transform: translateX(...)`; 
- navigation is implemented via `AMP.setState` using the “Previous” and “Next” buttons.

## CSS Support

The way AMP CSS is interpreted differs noticeably between Gmail and Mail.ru. In particular, **Gmail** follows the AMP for Email specification very strictly, which manifests in several ways:

- **Only a limited set of CSS properties is allowed.** Anything that goes beyond the specification causes the email to fail validation. 
- **Pseudo-elements (`:before` and `:after`) are prohibited.** This affects common layout techniques such as decorative icons, list markers, overlays, and shadows designed using pseudo-elements. 
- **[Animations](https://pixcraft.io/blog/animation-in-email-newsletters-guidelines-for-reliable-display) and transitions are heavily restricted at the rendering level.** Only basic CSS animations, without complex timings or chained effects, are supported.

**Mail.ru**, in practice, applies looser requirements to CSS usage. Here:

- support for CSS animations is broader; 
- fewer restrictions on decorative techniques and visual effects are present; 
- some of the solutions that Gmail blocks or ignores during rendering are acceptable.

Because of this, when an email is developed with only Mail.ru in mind, CSS that Gmail rejects almost inevitably appears. Therefore, a more reliable strategy for working with AMP CSS looks like this:

- build the base layout in accordance with Gmail’s restrictions: only allowed properties, no pseudo-elements, minimal animations; 
- verify that AMP renders consistently in Gmail; 
- carefully expand the design for Mail.ru by adding extra animations and visual techniques on top of a layout already validated in Gmail.

## Dark Mode in AMP Emails

[**Dark mode**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it) behavior depends on the email client as well as the platform. As a result, the same AMP template may look different in Mail.ru, Gmail on Android, and Gmail on iOS.

For instance, **Mail.ru** doesn’t automatically recolor AMP emails. Colors, backgrounds, and contrast are defined through CSS. Theme control is implemented using the meta tag:

```xml
<meta name="supported-color-schemes" content="light dark">
```

CSS selectors are also used:

- `:root[data-ogsc]` — dark mode; 
- `:root:not([data-ogsc])` — light mode.

In **Gmail for Android**, the situation is different. When dark mode is enabled, AMP emails with light-theme designs are automatically recolored according to the general logic of converting a light layout into a dark one. If an AMP email is originally designed using a dark color scheme, Gmail on Android preserves its appearance. For this reason, dark designs tend to render more consistently here than light ones.

In **Gmail for iOS**, AMP emails aren't recolored automatically. On top of that, dark mode can’t be controlled via CSS. The email is displayed in its original color palette, regardless of system or Gmail app settings.

As a result, full support for both light and dark themes is available only in Mail.ru. When strict color requirements apply, it’s advisable to use a neutral or base dark design and to test the template separately for each email client.

## Testing AMP Emails

Testing is the final step before sending an email campaign. It’s used to assess AMP code validity, CSS correctness, and how the email client reacts to errors. 

Here, **Gmail** offers the [**Gmail AMP for Email Playground**](https://amp.gmail.dev/playground/), which can be used to:

- check markup for compliance with the AMP for Email specification; 
- detect unsupported components or attributes; 
- send test emails to your own @gmail.com address.

<Img
img="/api/uploads/01_pgrndgm_ef906bc75c.png"
alt="Playground Gmail"
/>

If the AMP version is displayed in the email client after sending, this means that the template has successfully passed the test. If the HTML version is shown instead, a notification appears above the email with an error code (for example, unsupported component) and a documentation link.

**Mail.ru** also provides its own [**Playground**](https://postmaster.mail.ru/amp/playground.html?lang=en#hello-world). It can be used to identify errors related to specification violations or internal client limitations and to send test emails to your own inbox.

<Img
img="/api/uploads/02_plagrndmlru_a039dff020.png"
alt="Playground Mail.ru"
/>

An optimal workflow involves testing in both clients:

- start with a general validation of the AMP code; 
- next, test interactive elements and general behavior in Gmail; 
- after that, perform a mandatory check of rendering and behavior in Mail.ru.

More information about preparing AMP emails for testing and sending is available in our [**detailed guide**](https://docs.pixcraft.io/en/amp/getting_started.html).

## Conclusion

The behavior of AMP emails depends not only on how the code is implemented but also on the rules applied by the email client during processing. Taking into account the specifics of Gmail and Mail.ru makes it easier to maintain control over interactive elements and visual presentation. In this context, the differences between email clients form clear boundaries that shape the implementation of email campaigns.

This article explains how AMP emails rendering may differ between email clients: state handling, expression length limits, carousel behavior, dark mode, and more.

small_cov_gmmlr.png

thumbnail_cov_gmmlr.png

cov_gmmlr.png

AMP Emails: How Their Rendering Differs Between Email Clients

An email campaign is much more than just text and visuals. Under the hood, there’s always the template’s code that determines how the message is built, delivered, and rendered in the inbox. Among the most important technical parameters is email size, also called its weight.

But what does the term “email weight” actually mean, and what should you pay attention to so that the technical implementation remains aligned with the creative concept? Let’s break it down.

## What Counts Toward Email Size

To put it simply, email weight is the size of its HTML part. If an AMPHTML part is used, it’s also taken into account. This is strictly the number of bytes in the code, not how many “screens” the email takes up visually. A short-looking message can be heavy in code, and vice versa, a long one can be surprisingly light.

Two emails that look almost identical at a glance may differ in weight depending on how they were built. Size is mainly influenced by:

- HTML markup (tables, wrappers, nested blocks, comments); 
- CSS (rules inside `<style>` plus inline styles in element attributes); 
- text content (headings, paragraphs, buttons, footnotes); 
- links, tracking pixels, and hidden technical blocks.

Images and [**animations**](https://pixcraft.io/blog/animation-in-email-newsletters-guidelines-for-reliable-display) are not included in this weight calculation. Email clients fetch media separately after they process the markup. Still, media optimization matters, because file size affects what the recipient sees in the first seconds after opening:

- Large images take longer to load, especially on slow connections and in image-heavy emails. 
- Until images load, recipients see blank areas or placeholders. 
- If the main visual component appears too late, the first impression suffers.

So even though graphics don’t add to the HTML weight, optimizing them remains an important part of solid email production.

## What Limits the Maximum Email Size

### Gmail’s HTML Size Limit

[**Many email clients**](https://www.dailystory.com/blog/html-email-clipping-limits-across-different-mailbox-providers/) don’t have a strict maximum email size. Gmail is one of the notable exceptions: it caps the HTML part at **102 KB**.

If this threshold is exceeded, Gmail automatically clips the email and hides the lower portion behind a “View entire message” link. The full content becomes visible only after the recipient takes an extra action.

<Img
img="/api/uploads/01_msgclpd_ac0564ca2b.png"
alt="Clipped message in Gmail"
/>

As a result, this may affect both user experience and email performance:

- Even if only the footer gets clipped, that’s where contact info, legal text, and the “Unsubscribe” link are often located. If recipients can’t quickly find a clear way to opt out, the “Report spam” button becomes one of the few remaining options. 
- Tracking pixels that detect email opens are typically placed near the bottom of an email as well. If that section is clipped and not displayed, opens won’t register and analytics will become distorted. On top of that, if an automated [**communication sequence**](https://pixcraft.io/blog/must-have-email-sequences-every-business-should-be-using) depends on whether the email was opened or not, errors will ripple through subsequent steps.

### AMP Size Limits

AMP content has its own constraints, defined in the [**AMP for Email specification**](https://amp.dev/documentation/guides-and-tutorials/email/learn/email-spec/amp-email-format):

- AMPHTML part: up to **200,000 bytes** (about 195 KB). 
- CSS inside `<style amp-custom>`: up to **50,000 bytes** (about 48 KB).

If either limit is exceeded, the AMP content will fail validation, and the recipient will see the HTML version of the email instead. It’s important to note that these limits are set by the format itself and are checked at the AMP code validation stage.

### Spam Filtering

Email clients and anti-spam systems evaluate email campaigns using a number of signals, including code-related ones. Common factors include:

- HTML markup structure and complexity; 
- ratio of meaningful content to technical elements; 
- number of trackers and links; 
- attachments and the way they’re embedded.

Suspicion is triggered not by the email size itself but rather by the reasons it becomes heavy: bloated markup, excessive tracking, and overly complex, tangled nesting. In those cases, sending large volumes of the same email amplifies the overall negative signals during scoring.

This matters even more for bulk email campaigns. When the same “heavy” email is delivered to a large number of recipients, signals accumulate faster, which in turn affects deliverability and sender reputation.

## What Are Practical Ways to Reduce Email Weight

### Remove Unnecessary HTML Elements

Small details in the code can add up to a noticeable share of the email’s weight:

- extra spaces and tabs used to visually align the code; 
- line breaks that don’t affect rendering but increase the email size; 
- blank lines between content blocks that remain after edits or copying.

These elements don’t change the final look of an email. Therefore, at the final stage it’s worth minifying the markup: carefully removing the unnecessary fragments without changing structure or design, which can reduce the email by several kilobytes.

### Simplify the Table Structure

Tables (`<table>`, `<tr>`, `<td>`) are one of the core tools in email development and the backbone of email layout. They ensure stable and consistent rendering across various email clients. 

Still, table misuse can significantly increase code size. For example, extra weight may appear due to:

- **Excessive nesting**: tables are nested without any actual need or reason. 
- **Duplicate wrappers**: the same content is repeated across multiple tables or cells.

Practical optimization approaches include:

- **Reduce nesting depth**: if multiple table layers perform the same role, consider merging them. This reduces code size while keeping rendering stable. 
- **Use `padding` on table cells**: creating separate tables and rows just for additional spacing eventually bloats markup. In those cases, it’s preferable to set spacing via `padding` on `<td>`.

Even small but careful structural cleanups can noticeably reduce code weight, especially in long email layouts.

### Remove “Dead Code”

Templates that went through several stages of development and testing often accumulate leftover code fragments that are no longer used but remain in the email, increasing its size. Examples include:

- commented-out blocks from earlier versions of an email; 
- fragments related to already completed A/B tests; 
- hidden elements that don’t affect rendering or logic.

Removing unused code reduces size and makes the template easier to maintain. But it’s better to act with caution: some hidden elements may be required for preheaders, fallback logic, or personalization. Remove only what you’re certain is unused.

### Clean Up CSS

CSS has a noticeable impact on email size, especially after multiple rounds of edits. In this case, typical causes for extra volume include:

- repeated sets of CSS properties assigned to a number of elements without actual need; 
- rules and classes left behind from older versions; 
- auto-generated inline styles where every block gets the same set of properties.

Optimization comes down to regular style reviews: remove unused rules and reduce repetition. For [**AMP emails**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy), CSS control is particularly important because of strict size limits.

### Use TJML for Email Development

[**TJML**](https://pixcraft.io/framework) is a framework created by the Pixcraft team to make email development faster and more comfortable. It allows for creating both HTML and AMP emails using a single code base, while the resulting templates remain stable across most email clients, including Microsoft Outlook 2003–2024.

For email weight control, TJML offers the following mechanics:

- **Size checks**: the framework can calculate code size and warn the user when recommended thresholds are exceeded, providing the opportunity to fix issues before test sends and final builds.

<Img
img="/api/uploads/02_tjmlwarn_e794848c22.png"
alt="A warning about email size when using TJML"
/>

- **Code optimization**: TJML comes with a function to remove extra spaces and redundant elements that don’t affect rendering. As a result, you get a smaller email template that still renders correctly.

Read [**this article**](https://pixcraft.io/blog/tjml-framework-how-to-create-emails-quickly-and-easily) to learn more about the TJML framework, its features, and how it speeds up email development.

### Check Email Size After the Final Build

During the sending stage, ESPs and CDPs typically wrap links in tracking redirects. Each link gains extra parameters, making it longer and increasing the overall markup size. Therefore, an email that fits the limits during development may exceed them after processing.

A reliable approach here is to send a test email and inspect the message in its “finalized” form. This helps reduce the risk of Gmail clipping and AMP validation errors.

## Conclusion

Email weight isn’t a theoretical metric. It impacts analytics, deliverability, and how a campaign is perceived after it’s opened. Treat size control as part of template production: organize markup and CSS, and verify the final HTML after your ESP or CDP processes it.

Let's take a look at what email size is, what it includes, which factors can limit the maximum email weight, and how to optimize the size of email campaigns.

small_emailwght_cov.png

thumbnail_emailwght_cov.png

emailwght_cov.png

Email Size: What Affects the Weight of Email Campaigns and How to Optimize It

People skim through emails within seconds, and any movement instantly draws attention. Even a simple yet well-placed animation can make a message feel more vivid.

At the same time, adding animation raises a lot of questions, including:

- What types of emails can be enhanced with animation? 
- How to make an email bright and dynamic without overloading it? 
- Will the element behave consistently across different email clients?

In this article, we’ll take a look at the possibilities and limitations of animation in newsletters, and how to work with it to achieve the best possible display quality in email campaigns.

## How Animation Benefits Email

The main purpose of animated elements is to make a newsletter more expressive and engaging. Motion attracts attention more effectively than a static image and, when used wisely, strengthens the overall impression.

Animation fits a wide range of scenarios and email formats:

- **Promotional emails.** An animated banner can highlight the benefit and make an offer stand out visually. A [**countdown timer**](https://pixcraft.io/blog/amp-countdown-timer-by-pixcraft-how-to-use), in turn, pushes the reader to act fast while the promotion is still active. 
- **Onboarding.** A short interface demo in a welcome email shows how the service works: which features are available, how they behave, and what to do next. A new user immediately sees the product in action and grasps its structure faster. 
- **Digests.** If the message doesn't require a full-fledged [**dynamic product card**](https://pixcraft.io/blog/dynamic-product-cards-how-they-work-in-the-pixcraft-editor), a compact animation can be used to highlight individual items. For instance, it might show a new product from several angles or draw attention to a discounted item. 
- **Service emails.** Animated elements also work well in transactional messages. They can be used to illustrate order progress, for example, handover to a courier or delivery to a pickup point.

<Img
img="/api/uploads/01_trnsctnlanimexm_0db7bae6fb.gif"
alt="Animation in a transactional email"
src="Source: Really Good Emails"
/>

## How to Add Animation to Email Newsletters

Two most common ways to add motion to emails are GIF and AMP. Understanding their specifics helps to choose the right option for a particular scenario.

### GIF

GIF is the classic format for animated elements. It’s supported by most email clients and usually behaves predictably. Still, if you want GIFs in emails to work as intended, several important points must be taken into account.

- **File size.** For newsletters, short and lightweight GIFs are the most practical option. It’s generally recommended to keep the file size **under 1 MB** so that the message loads faster. 
- **Colors and detail.** The format supports **only 256 colors**. Therefore, complex gradients and smooth transitions between frames lose quality during compression. For a clean result, it’s better to use simple shapes, backgrounds, and outlines. 
- **Alt text.** This short text acts as a safety net when an element doesn't load because of a slow connection or filters in the email client. A concise description preserves the logic of the message and tells the reader what the contents of the animation are.

### AMP

AMP expands the possibilities for building email templates by adding interactive elements. It can be used to create swipeable galleries, [**interactive surveys**](https://pixcraft.io/blog/nps-surveys-whats-their-purpose-and-how-to-implement-them-in-pixcraft), and rich visual scenarios not available in classic HTML.

AMP also works with traditional GIF animation. Two components are used for this:

- `amp-img`; 
- `amp-anim`. 

Both can handle GIF files, but `amp-anim` is a specialized component with one important advantage: the animation runs only while the element is visible on the screen. As soon as the user scrolls past it, `amp-anim` stops playback and reduces the load on resources, which is especially useful in long newsletters and on mobile devices.

You can also use a static placeholder image inside the component. It appears before the GIF loads and prevents an empty area in case of a slow connection or a heavy file.

The element supports CSS styling and fits into the layout like any other AMP component. Here is an example of `amp-anim` markup:

```xml
<amp-anim width="500" height="400" src="animation.gif">
 <amp-img placeholder width="500" height="400" src="placeholder.jpg">
 </amp-img>
</amp-anim>
```

## How Animation Works in the Pixcraft Visual Editor

Adding an animated element to an email template in Pixcraft is as simple as inserting a regular illustration. Simply drag the “Image” primitive onto the canvas and upload a file from your device or specify a URL. The GIF becomes part of the email without extra actions and immediately appears in the layout.

<Img
img="/api/uploads/02_animhrtexmp_d6d2d591a9.gif"
alt="Animation in Pixcraft"
/>

After that, it can be configured in the same way as any other image. The panel on the right contains parameters that define its appearance and behavior:

- width and height; 
- alignment, corner radius, and margins; 
- border thickness, texture, and color; 
- external link; 
- alt text.

<Img
img="/api/uploads/03_animsttngs_56a663c219.png"
alt="Setting up image properties in Pixcraft"
/>

You can check how the element behaves under different conditions using the preview function. It shows how the email looks on desktop and mobile, as well as in light and dark mode.

Preview is especially important for animations with fine details that may blend into the background or disappear when scaled down. At this stage, you can spot such issues and adjust the image before sending the campaign.

<Img
img="/api/uploads/04_prvwanim_67a6644897.gif"
alt="Email preview in Pixcraft"
/>

It’s also possible to include AMP animations in email templates. For example, you can use the built-in “Carousel” component: a scrolling image gallery that supports various image formats, including GIF.

In addition, you can insert the required elements straight into the email code after building the main structure in the visual editor. To do this:

- export the AMP version of the template; 
- open the file in a code editor; 
- add the required AMP components to the email.

## What to Keep in Mind for Animations in Emails

### Compatibility with Outlook

Although GIFs usually work smoothly in most email services, some versions of Outlook for Windows may cause issues. Because rendering is handled by the Word engine, the animation freezes on the first frame and doesn’t play further.

In this case, fallback options are required:

- use conditional comments to replace the GIF with a static image; 
- design the first frame as a complete illustration that conveys the necessary information such as the offer, promotion dates, or discounts.

### Expressiveness and Balance

Animation can be functional or decorative. In the first case, it draws attention or makes the element more informative; in the second, it sets the tone and mood. And in both roles, it needs to remain appropriate.

This means the animation should:

- support the structure of the email instead of pulling attention to areas that aren't central to the message; 
- preserve readability and clarity; 
- avoid cluttering the layout or creating visual noise.

### Limited Attention Span

People move through emails quickly and spend only a few seconds scanning the content. Under these conditions, complex, drawn-out animation often doesn't have time to unfold, and individual details go unnoticed.

Short and simple scenarios usually work better: a state change, a subtle appearance, a neat switch. The fewer objects move on the screen at once, the easier and more accurately the element is perceived.

### Performance on Small Screens

Today smartphones are the primary way to read emails, and many mobile clients support animation playback. At the same time, limited screen space becomes a separate constraint.

Before sending the email, it’s worth checking whether:

- the animation keeps its aspect ratio; 
- any text inside it remains legible; 
- the overall meaning stays clear when the animation is scaled down.

In case of issues, animated elements need to be adapted specifically for the mobile version. For example, you may enlarge important details, simplify the graphics, or, in some cases, completely replace the animation with a static frame.

## Is Video Supported in Emails (And Is It Worth Using)

Embedding video directly in an email may sound like an appealing idea, but [**only a few email clients**](https://www.caniemail.com/features/html-video/), such as Apple Mail, support this technology. In most cases, a video inside the message simply won’t play: either nothing is shown in its place, or fallback content appears instead.

Because of this, a more reliable pattern is often used. A static frame with a play icon is inserted into the message. The user clicks on it and is redirected to a page with the video, for example, the brand’s website or a video hosting platform. This scenario is stable, but it involves switching to an external resource rather than inline playback.

<Img
img="/api/uploads/05_playbttnexm_9f29c65836.png"
alt="Play button in an email"
src="Source: Really Good Emails"
/>

If the goal is to simply add motion, emphasize a detail, or make the email more visually dynamic, regular animation is usually a more effective option.

## Conclusion

Animation in emails shapes the impression that remains after reading. It’s important that the format, graphics, and small details work together as a coherent whole. Good animation doesn’t overshadow the email content; instead, it serves to support the main idea of the message. And that’s exactly where its true value lies.

This article explores how to use animation in newsletters: formats, display in email clients, and tips for working with GIF and AMP.

small_anim_eml_cover.png

thumbnail_anim_eml_cover.png

anim_eml_cover.png

Animation in Email Newsletters: Guidelines for Reliable Display

Product grids are among the most popular and expressive elements in marketing emails. They quickly showcase an assortment of goods and draw the recipient’s attention. When [**dynamic content**](https://pixcraft.io/blog/how-to-use-dynamic-content-in-email-campaigns) is used to build product cards, it becomes possible to control both their logic and appearance without manually creating dozens of separate elements.

In this article, we’ll discuss what dynamic product cards are, how they work, and how the **Pixcraft** editor helps with creating dynamic product grids within the **Altcraft** marketing platform.

## The Difference Between Static and Dynamic Product Cards

Static product cards are fixed elements with predefined content. Each card is built manually for a specific product and is suitable when an email needs to display a set list of items. Cases include:

- one-off newsletters with a product catalog relevant at the moment of sending; 
- promo campaigns where the assortment remains unchanged; 
- manually curated selections where a specific group of items must stay fixed.

Dynamic collections, on the other hand, make product grids more flexible. At the moment of sending the email, data is taken from the selected source and inserted into the product grid. This is especially useful for automated messages such as triggers and recurring emails: the selection is formed from the up-to-date feed based on the specific scenario or audience segment.

## How Dynamic Product Cards Work in Emails

First, a single card template that defines layout and fields is created. Next, items from the feed are inserted into that template, and the required number of cards is generated, creating the product grid structure. Each card receives its own data about a specific product.

<Img
img="/api/uploads/01_prodgrexmpl1_62c3339ff0.png"
alt="Product grid in an email"
src="An example of a dynamic grid used for product recommendations. Source: Really Good Emails"
/>

### Data Source

Dynamic product cards rely on a structured set of product information. Depending on the platform, the data may be uploaded using JSON files, spreadsheets, YML feeds, APIs, webhooks, or data from a CMS/CRM.

Regardless of the format, the file must contain all the essential product information:

- name; 
- image; 
- price; 
- link; 
- brand or category; 
- additional characteristics such as color, size, material, etc.

The card template in the email treats these values as variables and inserts the relevant data into each field.

### Layout Specifics

Product grids must display correctly both on mobile devices and in email clients such as the desktop version of Outlook. Mobile clients usually reflow the layout to fit screen width. However, in Outlook, due to its limited CSS support, additional table-based markup inside conditional comments is required.

Below is an example of what the code for a static grid of four items in two columns may look like:

```xml
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">
 <div style="display: inline-block; vertical-align: top; width: 300px;">
 product card 1
 </div>

 <div style="display: inline-block; vertical-align: top; width: 300px;">
 product card 2
 </div>

 <div style="display: inline-block; vertical-align: top; width: 300px;">
 product card 3
 </div>
 
 <div style="display: inline-block; vertical-align: top; width: 300px;">
 product card 4
 </div>
</td></tr>
</table> 
```

When working with a dynamic grid, the task is more complex since it becomes necessary to calculate row breaks. For this, the template uses an iteration counter to determine when to finish the current row and start a new one.

A generalized version may look like this:

```xml
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">

 { FOREACH item IN products }
 
 <div style="display: inline-block; vertical-align: top; width: 300px;">
 product card item
 </div>
 
 { IF !loop.last }
 { IF loop.index % 2 == 0 }
 
 { ELSE }
 
 { END }
 { END }

 { ENDFOREACH }

</td></tr>
</table>
```

This process can be described as follows:

- check whether the current card is the last in a row (`!loop.last`); 
- calculate the remainder when dividing by the number of columns (`loop.index % 2 == 0`).

The example assumes that the number of products matches the grid size. If that’s not the case, additional checks are required to avoid breaking the grid structure in email clients.

## How We Added Dynamic Product Card Support to Altcraft

In 2024, the Pixcraft email editor was integrated into the [**Altcraft**](https://altcraft.com/) marketing platform, which unifies customer data and communication channels. The platform automates segmentation, personalization, multistep workflows, and synchronization with various data sources.

For convenient work with product catalogs, a dedicated **Products** primitive was added. Essentially, it’s a ready-made tool for adding dynamic product grids into emails.

<Img
img="/api/uploads/02_prdctsicn_41cd9c1b30.png"
alt="Products icon"
/>

Product data comes from **Market**, a module designed for product management. The assortment of goods is uploaded using YML files (as plain files or archives in .zip or .tar.gz format), either manually or on a schedule. Additionally, Market supports manual creation of product items.

Static cards can also be created manually by placing images, product data, and links. However, these remain fixed and do not receive updates from the feed.

### Product Cards Settings

The Products primitive includes two tabs: **Design** and **Data**. 

The **Design** tab controls the appearance of both the cards and the grid. Here, you can specify the number of products, configure spacing, background, border-radius, and variable visibility.

To add a new element to the card template, simply drag it from the list. The following predefined elements are available:

- product title; 
- image; 
- price; 
- old price; 
- button with link.

It’s also possible to include standard Primitives in product cards.

When adding or removing elements, all cards update simultaneously. If the structure of a single card changes, the others adjust accordingly — an essential condition for a consistent dynamic grid.

The **Data** tab configures the data source, selection method, sorting, and filters. This determines which products appear in the grid.

Dynamic cards work with two product sources: **Market. Products** and **Market. SKU**. This means that depending on the task, you may use either original products or their specific variations.

Filtering options include:

- manufacturer; 
- categories; 
- price range; 
- products with images only; 
- products with delivery only; 
- products with an old price specified; 
- in-stock items only.

Filtering is also available for custom fields, which may be added to both products and SKUs.

<Img
img="/api/uploads/03_filtrsset_c1b808d61c.png"
alt="Filter settings"
/>

Additionally, selection by product ID is supported, allowing you to display specific catalog items.

<Img
img="/api/uploads/04_byprodid_004863db49.png"
alt="Filtering by product ID"
/>

### Real-Time Preview

The product grid appears exactly as it will look in the actual email, with all current filters and settings applied. Any change to filters, data source, selection method, or appearance immediately updates the grid: the structure adjusts, and new data is inserted.

This provides two benefits:

- You can immediately check the final state of the product grid. 
- The chance of missing an error is reduced — if the filter is too strict or some data is missing, the issue becomes visible right away.

<Img
img="/api/uploads/05_gridsimplexmpl_0be632633c.png"
alt="Simple product grid in Pixcraft editor"
/>

### Converting Dynamic Grid to Static Cards

To lock the results of a dynamic selection and convert it into a static set of cards, you only need to click one button. In Pixcraft, this is done via the **Convert to static cards** option, which:

- removes dynamic logic and detaches the cards from Market; 
- saves the current data of each card and turns the grid into a set of independent elements that can be edited manually.

The visual appearance of the grid remains unchanged: spacing, colors, buttons, and element positions stay intact.

<Img
img="/api/uploads/06_statconvrt_902b8f2fd8.png"
alt="A button to convert dynamic grid into static"
/>

This function makes Products a fast way to fill selections without manually inserting images, links, and prices. All that’s required is to:

- apply filters; 
- check that the selection looks correct; 
- convert to static; 
- edit individual cards if needed.

## How to Integrate the Pixcraft Email Editor Into Your Business Processes

If you want to use Pixcraft in your own system, choose the deployment format that fits your organization: embedded integration (**white label**) or **on-premise** installation.

### Embedding the Editor

Pixcraft can be integrated into various services, including CRM systems and other corporate tools. The editor becomes part of your interface and contains no Pixcraft branding.

You get:

- a block-based email editor with flexible settings; 
- a customizable interface; 
- AMP support and the option to develop custom AMP blocks; 
- a library of ready-made blocks for quick email building.

To learn more about integrating our editor into your platform, please [**contact the Pixcraft team**](mailto:team@pixcraft.io).

### On-Premise Deployment

Pixcraft is also available for a full local installation. All data stays inside your infrastructure with no transfer to third-party services. This option is suitable for banks, government organizations, large retail networks, and other companies with high security requirements.

The on-premise version includes:

- creation and editing of emails, including dynamic product cards and interactive AMP components; 
- data collection and storage, including AMP form responses; 
- AI generation of text, images, and entire emails; 
- work with ready-made blocks and templates.

[**Contact us**](mailto:team@pixcraft.io), and we will consult you about the local installation of the Pixcraft editor.

## Conclusion

Dynamic product cards in Pixcraft streamline the process of building product selections. Flexible settings ensure a predictable workflow: data, structure, and design stay under your control, while the final result remains stable and accurate.

Integrate Pixcraft into your business processes, and get a full-featured email editor suitable for tasks of any scale — from one-time promos to recurring campaigns.

In this article, we discuss what dynamic product cards are, what are their advantages over static product grids, and how the process of creating a dynamic grid is implemented in the Pixcraft editor.

small_dynam_crd_covr.png

thumbnail_dynam_crd_covr.png

dynam_crd_covr.png

Dynamic Product Cards: How They Work in the Pixcraft Editor

**Pixel-perfect** is an approach where the layout precisely matches the design mockup, and every element looks and behaves as originally intended. Over the years, this principle has become a symbol of precision and respect for detail in web design.

But is it actually possible to achieve absolute alignment between the initial design and the layout when creating email templates? And is it even worth striving for? In this article, we'll explore the line between precision and excessive pursuit of perfection, and why pixel-perfect doesn’t always guarantee quality in email campaigns.

## The Origin of the Pixel-Perfect Approach

This principle originated back when responsive design didn’t exist yet, and websites were built with fixed screen resolutions in mind. If a webpage looked exactly as it did in the mockup, it was considered perfectly accurate.

However, the situation changed over time. Mobile devices evolved, pixel density increased, and dark themes emerged. Ultimately, the adaptive approach evolved into responsive design. Instead of mathematical precision, visual consistency and readability on any screen became paramount.

## Why Pixel-Level Precision Shouldn’t Be Treated as a Standard in Email Design

At first glance, the internal structure of an email may resemble a web page: HTML code, tags, styles. But in practice, it's a different environment with its own set of rules and limitations. While browsers have been moving toward standardization for decades (HTML5, CSS3, unified rendering engines), email services have evolved independently.

Different email clients rely on their own engines, and support for modern standards isn’t always guaranteed:

- **Gmail** partially filters CSS styles. This helps protect users from potentially malicious code, but sometimes distorts the appearance of emails. 
- **Yandex Mail** completely removes media queries from emails. Therefore, responsive layouts may not adapt as intended. 
- **Outlook for Windows** uses the Microsoft Word engine, which doesn’t support many CSS properties.

Fonts in emails may also behave differently. For example, Helvetica is available by default in macOS but not in Windows. Arial is the system font for Windows, yet it’s missing on Android. When the desired font isn’t available, a fallback or default font is used instead. As a result, text size, spacing, and other parameters may slightly increase or decrease.

Sometimes the discrepancy is just a few pixels and is barely noticeable. However, in complex layouts, when these deviations accumulate, the grid becomes unbalanced. As a result, columns and visuals may misalign.

Simply put, the pixel-perfect approach doesn’t work in emails because of the very nature of the email environment. Creating a template that looks absolutely identical across all systems and email clients is technically impossible without imposing strict limits on structure and design.

<Img
img="/api/uploads/eml_clnt_compare_7345b645f9.png"
alt="Rendering in a number of email clients"
src="How the email renders in different email clients"
/>

## When the Pursuit of Perfection Hinders Perception

Imagine a standard product card with a title, description, price, and a “Buy now” button. The designer set perfect margins, a fixed block height of exactly 320 pixels, and complete symmetry.

In the mockup, everything looks flawless, but after a test send, the email starts to behave differently:

- In **Gmail**, the description text wraps to two lines, and the button shifts down. 
- In **Outlook**, border radius doesn’t work. 
- On **Android**, the system font is slightly larger, making one card appear taller than the others.

Sure, the text in the email is still legible, and the button performs the required action. But from a pixel-perfect standpoint, all of the above is a failure. Attempts may be made to restore the original appearance by using restrictions:

`height: 320px`
`overflow: hidden`

However, this solution introduces new risks, especially for mobile layouts:

- text may be cut off; 
- the button may extend beyond the container; 
- the background may no longer align with the interface elements.

Pixel precision for its own sake doesn’t improve the quality of emails. Users don't examine emails under a magnifying glass, don't measure margins, and may not even notice minor discrepancies. It's far more important for them that the email is easy to read, its message is clear at a glance, all key elements are visible, and no manual zooming is required.

## Realism Over Dogma: How to Approach Email Layout Rationally

The main task of a layout designer is to ensure that emails look neat and are easy to read in every email client. To achieve this, the development process itself should use a different approach, taking into account the differences in how various email clients render content.

The goal is not absolute similarity but consistency in different conditions, even if some details differ slightly:

- For the **desktop version**, the layout should stay as close to the original design as possible, but it's important to allow for a small amount of space and avoid creating a tight grid. Blocks should retain their shape even when the font or content changes. This is especially important in emails with dynamic content, where the length and amount of text may vary. 
- The **mobile version** should remain comfortable to read even without media queries. This ensures layout stability in email clients that don’t support them. 
- **Media queries** should be used to enhance the appearance, not to control structure. If supported by an email client, the message becomes more user-friendly, but the core logic must remain consistent even without them.

The focus should shift from precision to stability. It’s a more practical and pragmatic way to design emails: the layout doesn’t replicate the mockup pixel by pixel, but stays balanced and easy to read in a variety of scenarios.

## How Pixcraft Helps Maintain Visual Consistency

At Pixcraft, we take a realistic approach: the email environment is complex, but the results can still be kept under control. We offer tools that help maintain layout precision and stability in a wide range of conditions.

### TJML Framework

For those who prefer manual coding, the Pixcraft team has developed [**TJML**](https://pixcraft.io/blog/tjml-framework-how-to-create-emails-quickly-and-easily), a free email framework that speeds up template creation and provides several key advantages:

- layouts are responsive by default while keeping the code clean and compact; 
- messages render correctly even in email clients that don’t support media queries; 
- AMP and HTML versions of an email are generated from a single codebase; 
- typographic rules for texts in Russian are applied automatically.

The built-in **Pixel Perfect** tool makes it possible to compare a ready-made template with a reference image. It’s especially useful when you need to ensure that the email matches the original design closely, but with just enough margin to maintain layout stability. This makes it easier to maintain accuracy even in emails with complex designs.

<Img
img="/api/uploads/pxlprfct_en_9bab8caa2d.png"
alt="Pixel Perfect tool"
/>

### Visual Email Builder

Pixcraft is an [**email template builder**](https://pixcraft.io/builder) that combines visual simplicity with engineering precision. You can create and edit an email without writing a single line of code, and then immediately preview how it will look:

- on desktop and mobile devices with different screen resolutions; 
- in light and dark themes; 
- with or without interactive AMP elements.

When working with email templates, the builder takes into account the specific features of various email clients. As a result, it’s much easier to maintain layout logic.

<Img
img="/api/uploads/pxcrft_intrf_en_af7fb3ad51.png"
alt="Pixcraft email template builder interface"
/>

### Predictable Results

Pixcraft is built around the idea of visual consistency: an email should preserve its structure and layout quality even when the environment changes. Instead of trying to chase pixel-perfect accuracy, the focus remains on what truly matters: a clean, logical, and predictable design that works reliably in real-world conditions.

## Conclusion

Pixel-perfect is an elegant and noble idea, but not a universal one. The true quality of an email campaign is defined not by how precisely it matches the initial mockup, but by its consistency and stability.

In particular, a good email:

- remains readable without media queries; 
- maintains its structure even when fonts change; 
- looks equally clean and consistent in Gmail, Outlook, and on mobile devices.

That’s the essence of a professional approach. The most effective direction in email development isn’t strict pixel perfection, but a pragmatic method with a flexible, well-thought-out layout that accounts for the nuances and pitfalls of different email clients.

In this article, we'll explore the pixel-perfect approach: what it is, when it originated, and why following the pixel-for-pixel principle in email newsletters isn't the best idea.

small_pxl_prf_cov.png

thumbnail_pxl_prf_cov.png

pxl_prf_cov.png

Pixel-perfect in Email Design: Is It Achievable (and Worth the Effort)?

Imagine having your own version of ChatGPT or DeepSeek running entirely on your personal computer. The data is stored on your device — no subscriptions, no cloud servers, no third-party access. Just a fully independent, private, and customizable AI assistant.

This is the idea behind local language models. Several tools make this possible, including **Ollama**, **vLLM**, and **GPT4All**. In this article, we’ll focus on the latter: what GPT4All is, how it works, and why it might become your go-to solution for private AI.

## How Text-Based Neural Networks Work

At the heart of every AI tool that processes text is a **Large Language Model (LLM)**, a neural network designed to function as a kind of general linguistic intelligence. These models are capable of:

- holding natural conversations; 
- analyzing data, drawing conclusions, and suggesting solutions; 
- explaining complex concepts in simple terms; 
- translating or adapting text to different tones and styles; 
- generating, reviewing, and commenting on code.

Popular examples include the already-mentioned **ChatGPT** and **DeepSeek**, as well as **Claude**, **Qwen**, and **xAI (Grok)**, among others.

## How Local LLMs Differ from Cloud-Based Ones

The biggest advantage of cloud-based models is that all the heavy computation is conducted on the provider’s servers. Users only need a browser or an API key to access them. However, this convenience comes with trade-offs:

- **Internet dependence.** No network connection means no AI. The model simply won’t run offline. 
- **Usage limits.** Cloud services often cap the number of requests, data size, or speed — especially in free tiers. 
- **Privacy risks.** Every query goes through external servers, which can be a major concern for anyone handling sensitive data.

**Local LLMs** take the opposite approach. They’re smaller and optimized for full offline operation. Some of their key strengths include:

- **Self-sufficiency.** They run directly on your computer, independent of internet access, pricing tiers, or server queues. 
- **Privacy.** All inputs and outputs are stored on the device. Nothing is sent to the cloud. 
- **Flexibility.** You can switch between models for different tasks or connect your own knowledge bases.

For businesses, local LLMs mean more **control**, **security**, and **autonomy**. For developers, these may serve as a **playground for experimentation** — testing hypotheses, building prototypes, or processing documents without external limits or hidden costs.

## What Makes GPT4All Useful

**GPT4All** is a full-fledged ecosystem for working with local language models. Think of it as an “[**Amuse**](https://pixcraft.io/blog/stable-diffusion-how-to-deploy-an-ai-image-generator-on-your-computer) for text”: not merely a raw engine, but a polished platform that makes interacting with AI smooth, flexible, and efficient.

The app allows you to:

- **Install and run different models,** from lightweight options to more advanced ones. Simply pick a language model from the catalog, download it, and start chatting. 
- **Work using an intuitive interface.** It’s as easy as “load the model and ask a question”. 
- **Use your own documents** to get responses based directly on their content.

## How to Install GPT4All

Setting up GPT4All is quick and straightforward. Simply download the installer, run it, and complete a short setup process.

**1. Go to the** [**official website**](https://www.nomic.ai/gpt4all) and choose the version for your operating system: Windows (`.exe`), macOS (`.dmg`), or Ubuntu (`.run`).

**2. Install and launch the application.** GPT4All automatically creates a working directory where it stores models, chat history, and settings.

**3. Download a language model** from the **Models** section or through the **Find Models** option on the main screen. Once downloaded, it will appear in the **Installed Models** library.

<Img
img="/api/uploads/01_ustmodel_e3f4df5815.png"
alt="Installed models in GPT4All"
/>

**4. Start the chat.** As with many cloud-based models, a prompt input field is located at the bottom, with the conversation window above it.

<Img
img="/api/uploads/02_dialexmpl_13c8034ecf.png"
alt="Dialog window in GPT4All"
/>

The **GPT4All** tab in the **Explore Models** section offers a catalog of models optimized for local use. Many of them run smoothly on standard CPUs; no dedicated GPU required.

<Img
img="/api/uploads/03_mdlctlg_fe56a7a2c5.png"
alt="Model catalog in GPT4All"
/>

It’s also possible to browse for additional LLMs on **HuggingFace** through a dedicated tab. However, the developers note that external models **aren’t guaranteed to work**, and many of them will require extra adjustments.

<Img
img="/api/uploads/04_mdlsrch_8d7934be7f.png"
alt="LLM search"
/>

GPT4All can also connect to **external cloud APIs** such as **OpenAI**, **Groq**, **Mistral**, and other OpenAI-compatible services. Though in that case, responses are generated remotely. Before enabling this feature, make sure it aligns with your privacy and data-handling policies.

## Which Models Are Available for GPT4All

The GPT4All catalog includes a wide selection of language models. Some are lightweight and run comfortably on modest hardware, while others demand more resources but offer performance closer to cloud-based LLMs. Your best choice depends on the task at hand and your computer’s specs:

- **Up to 4B parameters.** The fastest and most lightweight models, great for short prompts or quick notes. Examples include Qwen2-1.5B-Instruct and Llama 3.2 1B / 3B Instruct. 
- **Around 7–8B parameters.** Require more power but offer a solid balance between speed and output quality. Examples include GPT4All Falcon and Reasoner v1. 
- **13B parameters and above.** Resource-demanding, but capable of deeper reasoning and more coherent responses. Examples include Hermes and Snoozy.

Below are some of the most popular LLMs available in GPT4All, along with their strengths and limitations based on user feedback.

### GPT4All Falcon

A very fast model based on Falcon and finetuned by Nomic AI. Simple, versatile, and perfect for exploring what the app can do.

- **Strengths:** fast response speed with moderate hardware requirements. 
- **Weaknesses:** limited reasoning depth, tends to produce generic answers.

### Llama 3 Instruct

A modern, flexible model from the Llama 3 family. Well-suited for open-ended chats, Q&A, and general text generation or analysis.

- **Strengths:** runs smoothly even without a GPU; produces logical, natural-sounding responses. 
- **Weaknesses:** weaker reasoning compared to larger models; may lose context in longer conversations; performance varies depending on the version and quantization level.

### DeepSeek R1 Distill Qwen 7B / 14B

These models are distilled versions of DeepSeek R1. The 7B model, based on Qwen2.5-Math, is optimized for analytical and logical tasks, while the 14B model is more general-purpose, offering deeper reasoning and more natural language output.

- **Strengths:** suitable for step-by-step reasoning, analysis, and problem-solving; the 14B version provides richer, more precise answers. 
- **Weaknesses:** the 7B version struggles with longer reasoning chains, while the 14B model requires substantial resources (at least 16 GB of VRAM).

### Reasoner v1

An experimental model focused on reasoning and code-related work. It doesn’t just output answers but performs the logical steps to reach them.

- **Strengths:** can analyze, infer, and test hypotheses; includes a built-in JavaScript interpreter. 
- **Weaknesses:** may sound too formal or technical in casual conversations.

### Mistral Instruct

One of the most popular mid-sized models. Trained to follow instructions precisely, answer questions clearly, and produce structured, coherent text.

- **Strengths:** consistent, well-organized responses with a good balance between quality and performance. 
- **Weaknesses:** not ideal for highly technical or deeply logical tasks compared to larger models; may lose context or oversimplify reasoning; output quality depends strongly on prompt design.

### Orca 2

Developed by Microsoft, this model emphasizes reasoning and step-by-step analysis. It’s intended as a compact alternative to large-scale LLMs.

- **Strengths:** handles logical and analytical problems effectively, producing clear and structured reasoning. 
- **Weaknesses:** optimized for single-turn responses rather than extended dialogue; performance may vary depending on topic and prompt phrasing.

## How RAG Enables Working with Your Own Documents

While large language models can process enormous amounts of data, there’s still one crucial limitation: **they only “know” the information they were trained on**. If a model isn’t familiar with your internal documents, policies, or manuals, it can’t reference them in its responses.

That’s where **RAG**, or **Retrieval-Augmented Generation**, comes in. This method combines two steps:

- **Retrieval:** finding relevant information from your own sources. 
- **Generation:** producing an answer based on that retrieved content.

With RAG, you can connect your own files, knowledge bases, or internal documentation, allowing the model to generate answers based on your data. For example, if an employee asks, “How do I correctly submit a vacation request?”, a system powered by RAG would:

**1.** Locate the document describing the process.

**2.** Extract the relevant section.

**3.** Send it to the model along with the query.

**4.** Generate a clear, accurate response based on that material.

The result is a context-aware answer built on your organization’s internal information, not just general knowledge.

In GPT4All, RAG functionality is provided through the **LocalDocs** feature, which lets you create collections of documents. Simply point the app to a folder, and it will automatically index all the files it contains.

When new files are added, GPT4All breaks them into small text fragments and generates **vector embeddings** — mathematical representations that capture each fragment’s semantic meaning.

<Img
img="/api/uploads/05_embdng_a97c0474ef.png"
alt="Embedding в LocalDocs"
/>

When a user submits a prompt, the system compares it to these vectors, finds the most relevant text pieces, and sends them to the model along with the original question. The model then formulates a response based on this retrieved material.

<Img
img="/api/uploads/06_diallocdocs_48d09e9dc6.png"
alt="Chat based on local documents"
/>

GPT4All supports text formats such as `.txt` and `.docx`, as well as PDF, and Markdown (`.md`). It’s important to keep text clean and well-formatted, for instance, by removing redundant Markdown symbols or formatting code. The clearer the content, the more accurate the retrieval and the final response will be.

## Using GPT4All as a Local API Server

In addition to its desktop interface, GPT4All can also run as a local API server. This is especially useful if you want to integrate a local model into your company’s workflows, such as to automate text generation, document processing, or internal data analysis.

To enable the API server, follow this path: 

**Settings → Application → Advanced → Enable Local API Server**

Once activated, the server becomes available at `http://localhost:4891/v1`. The number may vary depending on the chosen port.

<Img
img="/api/uploads/07_apion_46bb3d255b.png"
alt="Enabling API server in GPT4All"
/>

The LocalDocs feature can also be accessed through the API. Your files never leave your computer: the API simply passes the necessary text fragments to the model so it can generate a context-aware response. Keep in mind that while the API can use existing document collections, creating and indexing new ones must be done through the app interface.

## Conclusion

GPT4All puts the control over language models into your hands. It enables a truly personal form of artificial intelligence: one that runs locally, integrates into your digital workspace, and operates entirely on your terms, all without relying on cloud services, subscriptions, or external servers.

This article explores GPT4All — a tool that lets you run text-based AI models directly on your own computer. Learn how it works, what features it offers, and what makes it useful.

Blog