From image size and format to hosting options, you'll need to consider many things when implementing images into your build.
When building your Design System you'll need to make sure you consider the images you are going to include, to ensure you get the best out of your emails. The things that are central to using images properly in email are:
- Format and size
- Image hosting
- Appropriate alt text
The images you include in your Design System, such as logos or social media icons, will need to be suitable for email, meaning they should have the appropriate format and size. Size often isn't as much of an issue for smaller images, such as icons, but for larger images, be sure to stick to a size no larger than 1MB, it's best practice to keep image sizes well under this if possible.
Images contribute to the overall size of your emails, so larger images can add a considerable amount to your campaigns. It's important to keep your email size down as not only does gmail clip emails at anything over 102kb, larger emails take longer to download, meaning recipients could miss out on your message.
In terms of choosing the file format of your images, we would recommend using JPGSs, PNGs or GIFs, as they all have fairly good support across email clients and differ in benefits. JPEGs are typically used for images that use lots of colors or for photographs. PNGs are great if you need to have a transparent background, which can be handy for elements like logos, and GIFs support animation. It's best to steer clear of SVG format as the support for these across email clients is far less than other image formats.
It's also useful to think about where your images are going to be hosted. Images should be uploaded to a CDN (content delivery network) as this allows them to be downloaded when someone opens your emails. This could be done through your ESP or a third party hosting tool. Once the images are hosted you can input the url into the relevant img tags in your template and those images will be ready to use.
Another option is to host the images with Taxi. When building your emails in our editor you can upload a file of the image you want to use and this will be automatically hosted for you when you export to your ESP. You can find out more about hosting your images with us here.
When adding images to your template, make sure that you include alt text in the img tag. Often images can take a while to load or don't load at all, which can happen if the recipient is on their phone with poor signal or if they have images turned off by default in their inbox. Including alt text will mean that if this happens, there will be some fallback content to ensure the message of your email remains intact.
It's also important for accessibility. Some of your customers may use screen readers to help them understand your email. So without alt text, the screen reader won't be able to give the person viewing the email a description of the images. This could create a negative experience for someone opening your emails and could potentially make someone think twice about engaging with your emails in the future, so be sure to consider adding this in during the build.
Lastly, think about what description you put into your alt text, avoid using terms like Header 1 or Main Image as this is not helpful information. Try to be more descriptive with your alt text, using copy that flows with the rest of your email and describes what's in the image well.
Next: Now your HTML is built, you'll need to consider how it will function in Taxi
