{"id":10919,"date":"2024-07-24T04:26:00","date_gmt":"2024-07-23T22:56:00","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=10919"},"modified":"2024-07-30T17:21:40","modified_gmt":"2024-07-30T11:51:40","slug":"ultimate-guide-images-html-email","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/ultimate-guide-images-html-email\/","title":{"rendered":"The Ultimate Guide to Images in HTML Email"},"content":{"rendered":"\n

[This blog was originally posted on July 13th 2022 and has been updated on 24th July 2024]<\/strong><\/p>\n\n\n\n

An image is to a description, what spices are to a dish. Communication has largely been visual over time. Early men used to paint in caves, and the rulers and monarchs of yore have found themselves immortalized in several paintings that are both intricate and enchanting in equal measure. Television was invented within a span of 20 years from the first commercial radio broadcast, and Twitter and other social media platforms now support the addition of images (and videos) in posts.<\/p>\n\n\n\n

The same is the case with HTML emails \u2013 one of the most experimented with communication channels (including marketing as well). In the early 90s, when dedicated email developers<\/a> adopted coding principles to create HTML email templates, they opened up better possibilities with background colors, images, hyperlinks, and much more. Coding in HTML email format is a step-by-step process to create an HTML email.<\/p>\n\n\n\n

Fast forward to the present, 82% of marketers agree that visual elements make their content more attractive<\/a> and more prone to be consumed by the masses.  While to an end-user, it is just HTML email images,  to an email marketer an image in their email is backed by ample strategies, reasons, and testing<\/em>. So today we explore the nitty-gritties of what all comes into the picture when you\u2019re embedding images in emails. <\/p>\n\n\n\n

Different Types Of Images Supported In Email HTML<\/strong><\/h2>\n\n\n\n

As per international standards, there are dozens of file formats for graphics and images such as JPEG, GIF, RAW, PNG, TIFF, etc. While most of these formats are used for specific purposes and applications, the common 3 formats that are predominantly used in images in email<\/a> are JPEG, GIF and PNG.<\/p>\n\n\n

\"responsive<\/a><\/div><\/div>\n\n\n\n

Using JPEG in HTML Email Image<\/strong>s<\/h3>\n\n\n\n

Acronym for Joint Photographic Experts Group, JPEG, and JPG image formats are used for photographs and illustrations where details and complex shapes are important. The core advantage of a JPEG format is that the visual data is compressed without affecting the quality much. This is especially useful when including Retina images in emails (explained later).<\/p>\n\n\n\n

JPEG is useful to present an image in surprisingly low file size which reduces the overall data cost when downloaded to view in an email. Yet JPEG images are bad for photo editing as the email images will be further compressed on saving<\/em> thereby destroying some more visual data.<\/p>\n\n\n\n

Let\u2019s take the example of this sample email using JPEG.<\/p>\n\n\n\n

\"Sample<\/figure><\/div>\n\n\n\n

Again, this is the same image that has been compressed by 30%. Although you may not have observed a major difference, the sharpness of the original image has been compromised and you can see the fur blur out in this image, due to compression.<\/p>\n\n\n\n

\"Sample<\/figure><\/div>\n\n\n\n

Even though the end-user might not Even though the end-user might not be able to tell the difference, it is better to NOT compromise quality for a few KBs of file size. JPEGs are static images (unlike GIFs) and don’t store any transparency data (unlike GIFs and PNG).<\/span><\/p>\n\n\n\n\n\n\n

Using Animated GIF in Emails<\/strong><\/h3>\n\n\n\n

Acronym for Graphics Interchange Format, GIF was conceptualized to create an image with the file size reduced further than JPEG \u2013 by introducing transparency. By making unwanted sections transparent, the visual data of that section is discarded making the image lighter. And by making different layers transparent at preset time duration, you could also accommodate frames in each layer to animate them.<\/span><\/p>\n\n\n\n

The GIF<\/a> is one of the most popular interactive styles used in an email with images.<\/p>\n\n\n\r\n

\r\n
\r\n \t\t
\r\n\t \t\t\t
\r\n\t\t
\r\n\t\t \t\t\t <\/div>\r\n\t\t \t\t\t
\r\n\t\t\t \t\t\t\t\t
\r\n\t\t\t\t \t
<\/div>\r\n\t\t\t\t <\/div>\r\n\t\t\t \t\t\t
\r\n\t\t\t
\r\n\t\t\t
<\/span><\/span><\/span><\/div>\r\n\t\t\t \t\t\t
\r\n\t\t\t \"Animated\r\n\t\t\t <\/div>\r\n\t\t\t \t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t
\r\n\t\t\t \t

Image source<\/span><\/a><\/p>\n\t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t \t\t <\/div>\r\n\t\t \t <\/div>\r\n\t <\/div>\r\n<\/section>\r\n\r\n\n\n\n

You may be wondering as to why one should use JPEG images for email when GIF can reduce the file size further? While unwanted sections of an image can be made transparent to bring the image size down, it introduces jagged borders across the sections where transparency was introduced. Moreover, the GIF format is an 8-bit file format which means each pixel contains 8-bit color channels cumulatively showing only 256 colors at the time whereas, JPEG is 24-bit file format and so it supports 16 million colors.<\/p>\n\n\n\n

\"Sample<\/figure><\/div>\n\n\n\n

The above sample email is the GIF rendition of the JPEG email shown above. The transparency as you can see is not all throughout. There is a section where the colors simply diffuse into the background.<\/p>\n\n\n\n

Using Cinemagraph in Email HTML <\/strong><\/h3>\n\n\n\n

If you really want to spruce up your email newsletter templates<\/a>, then look no further than cinemagraphs. Cinemagraph is a type of GIF, only that it is more visually attractive. What sets a cinemagraph apart from any other GIF is that a cinematic effect is created by only animating one element in the background. Most brands are currently using Cinemagraphs to create a visual treat in their emails as shown below.<\/p>\n\n\n\n

\"Cinemagraph
Image Source<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

Using PNG in Emails<\/strong><\/h3>\n\n\n\n

Acronym for \u2018Portable Network Graphic\u2019, PNG is the cross between JPEG and GIF since it supports transparency while supporting 8, 24 as well as 32-bit color channels. As you can observe in the below sample email, the PNG-8 shows banding as seen in sample GIF email, but the PNG-24 format shows seamless foreground against a black background.<\/p>\n\n\n\n

\"Sample<\/figure><\/div>\n\n\n\n
\"Sample<\/figure><\/div>\n\n\n\n

In a nutshell, the best use case for all the three file formats are:<\/p>\n\n\n\n