Images

What is it?

There are a few things to think about when it comes to images:

  1. Image sizing

    There are two ways you must size your image to ensure it renders correctly on all email clients. Firstly as an image property, ensuring you use only numbers, do not add px at the end of the number, for example; width="600" and height="200". Secondly add the width and height as a style property. Using images for retina display? That's fine, just use an image double the size it needs to be, e.g. 1200px, then set the properties to half the size/the exact size it should be, 600px;

  2. Responsive Images

    If you wish to make an image responsive add the class "MobileIMG" to the image element. This will make it scale down with the screen size. You'll need to do this on all full width images. Smaller images may be fine without it.

  3. Alt Description

    Make sure you add a relevant Alt description to your image. This will display when images havn't yet been downloaded. Some email clients may block images being downloaded by default, so it is important to add relevant Alt descriptions to all of your images.

<img src="image.jpg" width="600" height="200" style="width: 600px; height: 200px;" alt="A beautiful description" class="MobileImg"/>