While the world of email might be a a few years off from implementing something like SVG images there are a few tricks you can do to ensure you have high or at least higher quality images in your emails. The technique described here works best for small images, icons, or single colour images.
During the testing process I noticed that serving images even slightly larger in size did have quite a noticeable image quality improvement on the retina screen. What we can learn from this is it’s not always necessary to supply exactly the right amount of pixels for the retina screens just try and get as close as possible.
For this example I’m going to make a logo and then the code to use it in an email.
First create your artwork in a suitable graphics program. Once you have it ready save for web. Make sure you save it out at double the size you would like it to appear in the email so if for example you wanted it to be 190px by 100px you would create a jpg or png at 380px and 200px. Make sure to save it out at a fairly high quality setting. If you are using jpeg make sure it is optimised and if png make sure to use png24.
Next we need to make sure the image is small in size so for this I would use one of the many image optimisation software tools. Imageoptim and Jpegmini are both good. The logo I made in this example dropped from 34kb down to 23kb. Quite a good saving should you have many images in the email. This is a process I run on every campaign.
Now to add it into the email. Make sure to set the styles inline as well as including the !important rule. You want to totally override anything that could cause this image to pop back to its native size.
While this technique allows you to create better looking images it is not nearly as powerful as being able to use .svg images. Email is going to need to catch up, but with new email products and services being released all the time, like Google’s Inbox, I wouldn’t be surprised if we saw .svg images in a future product.
This technique is best used when creating small icons or logos as even though they’re larger in size they’re unlikely to be a problem downloading. It is probably also worth mentioning that this technique is not responsive so the images using this technique would not change size on smaller screens. Social media icons are a perfect example of when to use this technique.
Digital & Social Articles on Business 2 Community
(335)
