Inserting images into emails is a relatively easy process.

But when it comes to more specific images such as icons and logos, they can be a bit more nuanced.

How Are Icons Different to Pictures? Icons are generally small images that are a symbol of what they represent.

They are usually used to support headlines or text.

But if they’re obvious enough they can be used on their own without any text.

Icons and logos alike are supposed to be quick ways for a user to see and interpret, so they are generally small on a screen and less detailed than pictures.

This means that the quality of the icon should look sharp across all devices so there isn’t any confusion of what it represents.

Most of the time, icons and logos are usually solid coloured shapes and don’t require the full colour palette of a picture or photo.

In this article we will go through a few techniques available in email to ensure your icons are high quality and look good whatever device your audience is viewing it on.

We’ll go through the standard method, using svgs and a new one that we haven’t used yet, source set images.

The standard method with Pngs The most common way we use to display icons and logos are with double size pngs.

Pngs are compatible with all email clients and doesn’t require too much additional code to use them (Outlooks need a few lines).

To ensure the icons are sharp and high res in retina quality displays, we use double dimension pngs and force the specific size in the code.

This technique is probably the most commonly used for icons.

See the Pen PNG in email by Jay ( @emailjay ) on CodePen .

The reason we use pngs for icons is because they’re lossless, meaning they can compress the image data without sacrificing quality.

So the icons will be smaller in file size and still look sharp to the eye.

Svg in email The SVG file format and why use it Svg is short for Scalable Vector Graphic.

In other words, it’s an image (graphic) that uses points and lines (vectors), which can be enlarged or reduced (scalable) without compromising quality.

Some websites use svgs for their logos or icons because of this.

Logos will look sharp and without fuzziness when displayed  small on a mobile or large on a desktop.

It doesn’t contain image data, just coordinates of paths to create a shape.

This means the file size is usually smaller than a png or jpeg, you won’t need a mobile and desktop version of the same image.

The dimensions aren’t too important because it can be controlled in the code.

Compatibility is great across browsers, but when it comes to email, not all email clients are onboard.

Svgs support in email Current browsers support the svg file format but when it comes to viewing them inside emails, much of the support drops because of the legacy email clients that people might be using.

If you take a look at the popular dev website caniemail , support is estimated at 44% across clients.

Apple Mail and iOS Mail has good support Gmail - mobile app and webmail has zero support across all platforms Outlook - desktop and mobile apps has zero support across all platforms except Mac Outlook 2016 Samsung Mail 9 has good support Where svgs aren’t supported, we’d have to use a fallback which would be a png.

This won’t be too difficult considering all Gmail and all Outlook (except Mac Outlook 2016) will display the png.

Patchy support could potentially mean lots of css and media queries overlapping each other.

How to use it We found that the best technique to insert svgs into email is use image tags with a hosted svg as the source and some css to hide and reveal the fallback.

See the Pen SVG in email by Weng ( @weng-ar ) on CodePen .

Using SVG’s is a long winded process.

You have to always have a fallback, much like using animated gifs in email.

This isn’t much of an issue, but if you have used it multiple times (1 time for each social network, icons, logos) it can get quite heavy in the code.

Sourceset in Email Sourceset is another web technique that is used to display varying versions of an image for varying resolutions.

You provide the browser with a set of images and widths where the browser will only download/use if the screen is at the specified width.

This is great because you can target a user's resolution, such as someone with a small screen and display an image suitable for that size.

This means you don’t have to rely on a background image technique to scale an image according to someone’s screen size.

Sourcesets work in email but much like svg’s, the code is only supported in iOS Mail and Apple Mail.

The technique we found to work in email was using an image tag with the srcset attribute, wrapped in a picture tag.

See the Pen Sourceset in Email by Weng ( @weng-ar ) on CodePen .

As you can see, there are multiple sources for the image and it’s followed by a density multiplier (1x, 2x, 3x).

The density multiplier is the number that the device uses to magnify the points on the screen into pixels.

Retina displays are generally said to be double the pixels which is why we use double resolution images for our mobile devices.

This website here displays the iphone devices and their display sizes and pixel densities.

This technique is simple enough to use in email.

Support is very limited, only iOS Mail and Apple Mail, no web mail client support at all.

There is more effort on the design side of things where someone will have to create multiple versions of an image.

Which technique wins? We have to go with the tried and tested double sized png method.

Svg and sourceset techniques do work, but they both add more code to the email and also additional time to either create a fallback for svg or save out multiple versions of the same image.

Have any examples you’d like to share, or questions for us regarding images within email? Let us know on Twitter ! Weng Lam Coder