Find the Right Dimensions

It's best to use an image that is twice the size of the space you want your image to fit in so that it looks good on all monitors and there is no pixelation or blurring. Adjust the width and height of your images by adding a modifier to your <img> tag you created in the previous step. It will look something like this: Adjust the width and height values ​​according to what makes sense for your email. You can play around with these values ​​and see what it looks like by making changes and then clicking in the preview pane in Builder to see them update. Add ALT text ALT text describes an image so that those who have images disabled in their email client or who rely on a screen reader can easily read your email. For example, if we have an image of a promotion offering 20% ​​off, adding ALT text describing the offer lets your reader know about the offer even if they can't see the images for some reason. any.

The best ALT text is descriptive, succinct, and has the same intent as your image. If you run your email through Litmus Checklist before sending it, we'll flag the missing ALT text so you can easily enter and update it. Now you don't even need to consult a developer! Swap pictures Changed your mind about this image? You have two options: 1. Just like creating a new image, you can replace the URL that points to your image with a new one. This will retain all of your dimensions, ALT text, or anything else that might help you style your image and update the Image Masking Service image content itself. Take the current image tag and find the file path: Replace the path with your new image path: 2. Depending on where your image is hosted, you can also upload a new image with the exact same name to the same location. This way, you don't have to touch the code at all to update your email image. Perfect email Now that you have the power to update and modify images, use that power wisely! Images in emails can quickly go wrong. Large files that take a long time to load, using images for your entire email, or having no design accessibility can create messy subscriber experiences.

Here are some quick best practices to keep in mind when building your image library: Keep files nice and light , less than 1MB is best and smaller is better (Litmus Checklist checks your load times, so don't worry if you don't know each image size.) Add alt text to make your email readable and accessible even if the images aren't visible. Don't send image-only emails and make sure your email contains live text. It can be tempting to design an entire email using an image, but this can hurt engagement and conversions with long load times and poor experiences for those who have images disabled. Need help with a specific beginner code question? Let us know what you would like to see next in this series. No question is too basic!Learn more about images by email: Why You Shouldn't Send Image-Only Emails Guide to Animated GIFs by Email Understanding Retina Images in HTML Emails PNG, GIF or JPEG? What is the best image format for emails? Animated GIFs in Emails: 10 Tips to Reduce File Size The Ultimate Guide to Background Images in Emails Animated PNGs in emails: an alternative to GIFs?