{"id":14076,"date":"2020-05-01T05:52:52","date_gmt":"2020-05-01T05:52:52","guid":{"rendered":"https:\/\/www.litmus.com\/?p=14076"},"modified":"2025-09-04T11:15:45","modified_gmt":"2025-09-04T15:15:45","slug":"the-102-of-email-code-working-with-images","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images","title":{"rendered":"The 102 of Email Code: Working with Images"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Seeing code spill out in front of you can feel incredibly intimidating, and sometimes frustrating. I promise you, from marketer to marketer, that it\u2019s way easier than it looks. Plus, being able to navigate email HTML is an incredibly valuable skill. In our email code basics series, we\u2019ll teach you the email HTML fundamentals you need to know to become more comfortable with email code.<\/span><\/p>\n<hr \/>\n<p><span style=\"font-weight: 400;\">In our last post, we covered how you can <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/101-email-code-navigate-email-html-beginner\"><span style=\"font-weight: 400;\">navigate your email code<\/span><\/a><span style=\"font-weight: 400;\"> to get up to speed on how to update links or make quick copy changes. But what about images?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Images are the backbone of many high-performing emails. But, with ever-increasing complexity and various file types, sizes, accessibility, and load time to consider, it can overwhelm even the most skilled marketer.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article, we\u2019ll touch on some of the most common ways to add images to your email and go over the basics to make sure your subscribers have a great experience. If you\u2019re looking for a deep dive on images, check out these guides:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\"><span style=\"font-weight: 400;\">Ultimate Guide to Background Images in Email<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/a-guide-to-animated-gifs-in-email\"><span style=\"font-weight: 400;\">A Guide to Animated GIFs in Email<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/rodriguezcommaj.com\/blog\/using-images-in-html-email\/\"><span style=\"font-weight: 400;\">Using Images in HTML Email<\/span><\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You can easily follow along with the topics covered in this guide, so go ahead and open an email in Litmus Builder and we\u2019ll get started!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Prepare your image<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Before you can add your image to your email, make sure it\u2019s set up for success. First, make sure the image you\u2019re using is <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/png-gif-or-jpeg-which-ones-should-you-use-in-email\"><span style=\"font-weight: 400;\">a good file type and size for email<\/span><\/a><span style=\"font-weight: 400;\">. Large file sizes will slow down your loading time, decreasing your overall conversions and engagement, so be sure you\u2019re using a lightweight image that loads quickly.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Insert your image<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Find where you want to add the image in your code\u2014if you\u2019re using Litmus Builder, flip on Grid View to click where you\u2019d want an image to appear and then click into the code view. When you\u2019ve found the perfect spot, use the &lt;img&gt; tag to add in your image, but replace the URL here with a direct link to your image.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re not sure what a direct link is, look out for the end of the file name, it should end with an image file type like \u201c.png,\u201d \u201c.jpg,\u201d or \u201c.gif.\u201d Links to folders or HTML won\u2019t work here, it needs to <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Image_hosting_service\">point directly to the image<\/a> you\u2019re adding to your email.<\/span><\/p>\n<pre><code style=\"color: #fff; background: #333;\">\n&lt;img src=\"img-url.jpg\" \/&gt;\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">That\u2019s it! Once you add in your tag, your image will show in the preview pane if you\u2019re in Litmus Builder.<\/span><\/p>\n<p>Curious where you can host your images? Most ESPs have a file hosting system where you can upload your images and use those public URLs for the image source in your email, so be sure to check your ESP first. If your going through an <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-migrate-esps-easily\">ESP migration<\/a>, verify if it does have a file hosting system. If your ESP does not provide image file hosting, consider using Amazon&#8217;s AWS or your own website&#8217;s FTP server for image hosting.<\/p>\n<h2><span style=\"font-weight: 400;\">Find the right dimensions<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It\u2019s best to use an image that\u2019s twice the size of the space you\u2019d like to insert your image so it <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/understanding-retina-images-in-html-email\"><span style=\"font-weight: 400;\">looks great on all monitors<\/span><\/a><span style=\"font-weight: 400;\"> and there\u2019s no pixelation or blurriness. Adjust the width and height of your images by adding in a modifier to your &lt;img&gt; tag you built in the previous step. It will look something like this:<\/span><\/p>\n<pre><code style=\"color: #fff; background: #333;\">\n&lt;img src=\"img-url.jpg\" width=\"400\" height=\"100\" \/&gt;\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">Adjust the values of the width and height depending on whatever makes sense for your email. You can play with these values and see how it looks by making changes, then clicking into the preview pane in Builder to see them update.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Add ALT text<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">ALT text describes an image so <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/the-ultimate-guide-to-email-accessibility-making-emails-for-everyone\"><span style=\"font-weight: 400;\">those who have images disabled in their email client or rely on a screen reader<\/span><\/a><span style=\"font-weight: 400;\"> can easily read your email. For example, if we have an image of a promotion offering 20% off, adding some ALT text describing the offer makes your reader aware of the offer even if they can\u2019t see images for any reason.<\/span><\/p>\n<pre><code style=\"color: #fff; background: #333;\">\n&lt;img src=\u201dimg-url.jpg\u201d width=\u201d400\u201d height=\u201d100\u201d alt=\u201d20% off all seeds\u201d \/&gt;\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">The best ALT text is descriptive, succinct, and has the same intention as your image. If you run your email through Litmus Checklist before you send, we\u2019ll flag missing ALT text so you can easily go in and update it. Now you don\u2019t even have to check with a developer!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Swap images<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Changed your mind on that one image? \u00a0You\u2019ve got two options:<br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">1. Just the same as creating a new image, you can replace the URL that points to your image with a new one. This will keep all your dimensions, your ALT text, or whatever else might help style your image and just update the image content itself.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Take the current image tag and look for the file path:<\/span><\/p>\n<pre><code style=\"color: #fff; background: #333;\">\n&lt;img src=\u201dimg-url.jpg\u201d width=\u201d400\u201d height=\u201d100\u201d alt=\u201d20% off all seeds\u201d \/&gt;\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">Replace the path with your new image path:<\/span><\/p>\n<pre><code style=\"color: #fff; background: #333;\">\n&lt;img src=\u201dupdatedimg-url.jpg\u201d width=\u201d400\u201d height=\u201d100\u201d alt=\u201d20% off all seeds\u201d \/&gt;\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">2. Depending on where your image is hosted, you could also upload a new image with the <em>exact same name<\/em> to the same location. That way, you don\u2019t need to touch the code at all to update your email\u2019s image.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Picture-perfect email<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that you\u2019ve got the power to update and modify images, use that power wisely! Images in email can go wrong quickly. Heavy files that take ages to load, using images for your entire email, or foregoing accessibility for <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-design-best-practices\" target=\"_blank\" rel=\"noopener\">email design marketing<\/a> can create messy subscriber experiences.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s some quick best practices to keep in mind as you build your image library:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Keep files light and sweet<\/strong><span style=\"font-weight: 400;\">, under 1MB is best and the smaller the better (Litmus Checklist checks your load time, so don\u2019t fret if you don\u2019t know every single image size.)<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Add alternative text<\/strong><span style=\"font-weight: 400;\"> to make your email legible and accessible even if images aren\u2019t visible.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/why-you-shouldnt-send-image-only-emails\">Don\u2019t send image-only emails<\/a><\/strong> <span style=\"font-weight: 400;\">and<\/span> <span style=\"font-weight: 400;\">make sure your email has live text. It can be tempting to design an entire email using an image, but that can hurt engagement and conversions with long load times and poor experiences for those who have images disabled.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Need help on a specific newbie code question? Let us know what you\u2019d like to see next in this series. No question is too basic!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">_________________________________<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Learn more about images in email:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/why-you-shouldnt-send-image-only-emails\"><span style=\"font-weight: 400;\">Why You Shouldn\u2019t Send Image-Only Emails<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/a-guide-to-animated-gifs-in-email\"><span style=\"font-weight: 400;\">A Guide to Animated GIFs in Email<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/understanding-retina-images-in-html-email\"><span style=\"font-weight: 400;\">Understanding Retina Images in HTML Email<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/png-gif-or-jpeg-which-ones-should-you-use-in-email\"><span style=\"font-weight: 400;\">PNG, GIF, or JPEG? Which is the Best Image Format for Email?<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/animated-gifs-in-email-10-tips-for-keeping-files-sizes-small\"><span style=\"font-weight: 400;\">Animated GIFs in Email: 10 Tips for Keeping File Sizes Small<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\"><span style=\"font-weight: 400;\">The Ultimate Guide to Background Images in Email<\/span><\/a><\/li>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/animated-pngs-in-email-an-alternative-to-gifs\"><span style=\"font-weight: 400;\">Animated PNGs in Email: An Alternative to GIFs?<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Seeing code spill out in front of you can feel &hellip;<\/p>\n","protected":false},"author":3,"featured_media":14077,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[499,102,468],"blog_category":[53],"class_list":["post-14076","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-email-coding","tag-html","tag-images","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The 102 of Email Code: Working with Images - Litmus<\/title>\n<meta name=\"description\" content=\"Seeing code spill out in front of you can feel incredibly intimidating, and sometimes frustrating. I promise you, from marketer to marketer, that it\u2019s way\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The 102 of Email Code: Working with Images\" \/>\n<meta property=\"og:description\" content=\"Seeing code spill out in front of you can feel incredibly intimidating, and sometimes frustrating. I promise you, from marketer to marketer, that it\u2019s way\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-01T05:52:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-04T15:15:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/102-of-email-code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The 102 of Email Code: Working with Images - Litmus","description":"Seeing code spill out in front of you can feel incredibly intimidating, and sometimes frustrating. I promise you, from marketer to marketer, that it\u2019s way","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images","og_locale":"en_US","og_type":"article","og_title":"The 102 of Email Code: Working with Images","og_description":"Seeing code spill out in front of you can feel incredibly intimidating, and sometimes frustrating. I promise you, from marketer to marketer, that it\u2019s way","og_url":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2020-05-01T05:52:52+00:00","article_modified_time":"2025-09-04T15:15:45+00:00","og_image":[{"width":1380,"height":724,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/102-of-email-code.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images"},"author":{"name":"","@id":""},"headline":"The 102 of Email Code: Working with Images","datePublished":"2020-05-01T05:52:52+00:00","dateModified":"2025-09-04T15:15:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images"},"wordCount":1123,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/102-of-email-code.png","keywords":["Email Coding","HTML","Images"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images","url":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images","name":"The 102 of Email Code: Working with Images - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/102-of-email-code.png","datePublished":"2020-05-01T05:52:52+00:00","dateModified":"2025-09-04T15:15:45+00:00","description":"Seeing code spill out in front of you can feel incredibly intimidating, and sometimes frustrating. I promise you, from marketer to marketer, that it\u2019s way","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/102-of-email-code.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/102-of-email-code.png","width":1380,"height":724},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"The 102 of Email Code: Working with Images"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/14076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=14076"}],"version-history":[{"count":2,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/14076\/revisions"}],"predecessor-version":[{"id":119805,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/14076\/revisions\/119805"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/14077"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=14076"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=14076"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=14076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}