Our Blog

As the old saying goes, a picture is truly worth a thousand words. In order to effectively convey your content and increase subscriber engagement, images are an essential component of HTML emails.

With so many different email clients and devices, however, it can be tricky to integrate images in HTML emails. Learn how to incorporate visual information into email correspondence with the use of CID embedding, inline embedding, and linked images with this tutorial. You will learn how to optimize image format and size, incorporate alt attributes, and conduct test emails before sending. 

What does it mean for pictures to be “embedded” in an email?

With the help of embedding, you can incorporate many types of media into your email layout. When done properly, embedding should result in a fully operational, interactive piece, just like the original. Transform your static HTML to a WordPress theme that combines design and usefulness.

The email channel adds a lot of restrictions in terms of HTML, making it not always simple to embed an image in an email. Additionally, not all email clients support the practise of embedding videos or interactive objects. When it comes to embedding multimedia assets into an email, the only thing we can be certain of displaying correctly is the image. 

How do you put HTML into an email?

Because it makes the text more visually appealing, the image is a crucial part of an email marketing message. Let’s have a look at the three methods available for adding photographs to email messages.

• CID Image Embedding:

With Content-ID (CID), you can include a picture in an email without having to use HTML. The procedure entails using a pre-made image and link as a template in an email. The attachment will open with the email as usual. However, please be aware that selecting this option will cause the resulting email to grow in size.

• Inline Embedding:

Enveloping an image in base64 in HTML is yet another option for including visuals in an email. As a family of related binary encoding methods, Base64 is widely used. Your image must be base64 encoded for this method to work, and it will be embedded in HTML as a single file. However, the size of this email increases with each image, which may cause Gmail to delay downloads or even clip them.

• Links to Images:

When you send an email with a link to an image, it will load just like any other image on a website. You need to include a line in your HTML code with a URL that points to the image’s original location.

The benefits of this method are self-evident; for one, including an image has no impact on the overall size of the email, and including a link to the image is simple and quick. In addition, you may modify the image on the server and see the changes reflected in the letter, as well as the image’s dimensions (width, height), which is not possible with email services.

Nonetheless, there are drawbacks as well. Some email programmes, like Outlook, may prevent the display of linked photos. The image also won’t show up if you try to view it without an active internet connection. 

Which Image Format Should You Choose to Embed in Emails?

Today, JPEG, GIF, and PNG are the most common ways to add pictures to emails. Each has its own pros and cons, so you should choose based on what you want the picture to do.

• JPEG Images:

In terms of size, JPEG images are great for HTML emails because they are small and will download quickly in an email campaign. Also, the colours in your photos look great in JPEG pictures. JPEG images are the best choice if you want images that don’t slow down the download of the email text and are small in size.

The main problem with the JPEG format is that it doesn’t show transparency effects and has less information about the picture. PNG is a good choice if you need to add high-quality pictures to your email.

• PNG Images:

Even when compressed, PNG format can show text and transparency. Because of this, PNG is great for logos and other times when you need to include high-quality pictures in your emails. PNG format saves more picture information and shows even the smallest details. Keep in mind that PNG pictures are bigger than JPEG ones and take longer to download.

Choose the format based on what you want to do. For example, if the quality of a picture is very important, you might want to choose PNG even if it takes longer to download.

• GIF Images:

GIF can send animated pictures, compresses without losing quality, sends text well, and lets you make areas that are invisible. But the colour range is small, GIF files are big, and photos don’t look good.

Also, not all email apps do a good job of displaying GIFs, so be careful if you decide to include a GIF in an email. Always test your emails before you send them so that display problems don’t happen.

How to Insert an Image into an HTML Email?

Before launching the email marketing campaign, remember a few best practices.

There are no firm guidelines, but keeping the following in mind can help you design a solid email template:

• Use linked or hosted images rather than base64-encoded text for greater deliverability and scalability.
• Reduce the file size of your photographs for online use to speed up page loads.
• To make an image accessible, you should use alt tags to describe it in words.
• Send test emails from a variety of devices and email clients.
• Use a responsive email layout to ensure your images look great on all devices.
• Be sure to save your images in the correct format. It would help if you used JPEG.
• Never create a newsletter template for your email list from scratch; instead, utilise a program. 

Best Image Size and Dimensions for Embedding in Emails

The picture that is part of an HTML email should be the right size. Then, if the picture isn’t shown, it will be replaced by a white rectangle with the same size and shape. This won’t change how the text and email are laid out.

Consider the following when choosing the picture size for the HTML email layout:

• The pictures should be as small as possible. Try not to use pictures that are bigger than 200 KB, since the size affects how quickly the image loads. This is important because a lot of people use cell Internet, which can be shaky in some places. If you need to, you can just reduce the size of your PNG and JPEG pictures by compressing them.
• For a 600px wide style, the banner should be 600×300 or 600x400px.
• The ideal size for these buttons is between 35 and 50px.
• The desktop and mobile versions need an indentation around the buttons or clickable images.
• To avoid fuzziness on Retina displays, we increased the layout’s width from 600 pixels to 1200 pixels and the font size from 16 pixels to 32 pixels. 

Conclusion:

When used right, pictures do make newsletters look better and work better. Let’s review what we’ve learned about putting pictures in texts. First, the structure of your email should be flexible enough that the page can be seen on the screen of a mobile device without any extra compression. The pictures should be in the right format for the job (mostly PNG or JPEG). Up to 1200px wide, the picture should be the same size as the template. Professional convert html css to WordPress services can help you improve your online presence.

When using a picture as a background, you need to think about how the words will show up and give an alternative colour fill. Also, make sure that all the pictures you embed in emails have alternative text.