Image Sizing and Resolution
It is generally recommended that 72 pixels per inch is the best resolution for screen.
Intilery's email platform accepts jpegs, pngs and gifs. Pngs do not always display in every email client, and gifs may not appear animated in every email client either.
When using the Email Editor, you can insert images of any width and the platform will resize the image to the correct width for the email template, which is 580 px with 10 px of padding on either side.
The Editor will preserve the aspect ratio of the original image.
The example below shows a banner image that was created in Photoshop at 1000 px, and has been reduced down to the correct width for the email template. None of the image has been cut off, and the image is still in proportion.
Fig 1: The 1000px image has been automatically adjusted to fit in the email editor.
You have the flexibility to manually adjust the image width using the sliders in the Content panel for your image snippet:
Fig 2: The Content tab allows you to manually adjust image width.
If you choose to specify a width in the Content panel, this width will remain fixed.
When the image width is manually changed in the Editor, the total pixels of the image must not exceed the template width of 580px, or you will notice some strange white lines appearing in other parts of your email where the image is “pushing out” the sides of the template.
In the below example, the top image is too wide for the Editor, specified at 610px. The second image snippet has no width specified, with no padding, and should fit comfortably within the template width, however the first image has “pushed out” the sides of the template, creating unwanted white lines on either side.
Fig 3: The first image is too big for the email template and pushes the sides out, causing white lines around the second image.
The same applies if you choose to sit more than one image in a row. If you want to use two images side by side in a 2 col container snippet, then the combined width of all images and padding must remain within the 580px template.
- Image resolution for screen should be 72ppi.
- Image dimensions will be adjusted automatically to fit within the 580 px template, and the aspect ratio will be preserved.
- You have the flexibility to manually adjust the image dimension, but you must bear in mind the next two points.
- If you do not specify any image width, if you add padding, the image width will be reduced and therefore the template width will remain at 580px.
- If you do specify the image width, when you add padding, the image width will remain the same and the overall template width will expand.
- The combined width of all images and padding must remain within 580px.
In the example below, the first image is specified at 580 px, with padding on either side. The second image snippet has no specified with, and has the same amount of padding set as the first. The first image width is fixed, whereas the second image is reduced because of the padding on either side.
Fig 4: The first image specifies the width, so the padding expands the template. The second image has no specified width, so the padding reduces the image.