JPEG, GIF & PNG Image Format in HTML Emails
What image format you should use for your HTML email template.
Currently, it's impossible to imagine email without using images. Even if you're a fan of plain text emails, you can't argue that most people prefer messages with fancy pictures or beautiful photos. There are many image formats available. Each of them differs in compression ratio, size, and quality. In addition, support for a particular image format may vary depending on the email client. Here I will try to tell you about the three file formats JPG, GIF, and PNG, which are most often used in creating HTML emails.
JPEG in HTML Email
The Joint Photographic Experts Group (JPEG) is a good choice if you need to include complex graphics in your email, such as an illustration or photo. Images in this format can include 16.8 million colors. JPEG files are lossy. To reduce the size of such files, compression is used, which can cause some loss of quality and the appearance of some digital artifacts. But if you don't use extreme compression settings, you can be sure that most people won't notice the decrease in image quality.
Another disadvantage of JPEG is the lack of transparency support and the ability to animate the image.
It is also worth noting that JPEG files are not the best choice for images containing text. It is the text in images that often produces compression in JPEG files due to the appearance of blurriness and fuzziness.
JPEG with visual artifacts
When you zoom in on this image, all the problems of text in JPEG that result from the compression algorithm become more obvious:
The bottom line is that the JPEG format is good for complex images that do not require transparency-photos, product snapshots, or gradients. But they are absolutely not suitable for images with text.
GIF in HTML Email
So, just to say for starters, anyone calling the GIF format “JIF” can go right out the door! 😄 Just kidding. Let’s continue.
GIF is quite an interesting format to use in emails. It is definitely not suitable for complex images, since the limit of 256 colors does not give high-resolution images any chance. However, it is ideal for test images, this format supports transparency, and, most importantly, they work on any email client and application. In addition, GIF is the only format that allows you to work with animated images that are suitable for use in your email template.
However, you should keep in mind that files of this format are quite large.
The bottom line is that this is a good option if you want to embed an animated image in your email, such as a logo or text. It supports transparency, which is definitely a big plus. And, it is suitable for all email applications.
PNG in HTML Email
Portable Network Graphics format is the right choice for anything that has many colors and it is very similar to JPEG. This file type works great for nice and clear, simple graphics. PNG has a lot of nice features: an entire range of color depth, automatic correction of the display gamma, working with complex image transparency, and the ability to add an image description.
Unlike JPEG, PNG is "lossless" since it does not discard any information during image compression. Accordingly, the size of these files may be larger than a JPEG.
Do not forget that there are three types of PNG format: PNG-32, PNG-24, and PNG-8. The latter only supports 256 colors. The other two support millions. They all work with transparency. I recommend using PNG-24, because it makes the graphics smoother, but it doesn't increase the file size much (as it does in PNG-32).
To sum up, this is a PNG image without loss of quality. The format supports transparency and the ability to create background images without uneven edges. The disadvantages include the larger size compared to JPEG, as well as the problem with support for this format on some browsers (especially their prehistoric versions).
Since we're talking about images in HTML emails, here's a small lifehack.
and test them on dozens of different devises and mail apps START NOW
HTML Email Images on Retina
Retina displays hold a lot more pixels than regular computer displays can. This increases the clarity so much that the human eye is simply not able to distinguish individual pixels.
This can be a problem since images that are not optimized for Retina appear blurry and fuzzy on them. The solution to this problem is very simple. You just need to use a higher-resolution image and scale it in your HTML code.
For example, let's say you have a picture that should be 600px X 400px. In order not to screw up this image on Retina displays, you need to save this image in the size of 1200px X 800px. That is twice as much. The rule is to multiply by two, in this case it works perfectly. Then in our code we can use the size we need 600x400:
<img src="http://yoursite.com/path/to/retina-image.jpg" alt="So Crisp" width="600" height="400" border="0" style="display: block;" />Now your image on the Retina display will look perfect.
Email2Go is an ideal system for creating HTML emails with images and includes modern and unique features that help make your work more convenient: Embedded images, Free Images Hosting for HTML Emails, and, of course, the Email Template Tester to make sure that your email with images will look equally good on all possible devices and applications.
