{"id":24785,"date":"2025-10-06T18:25:47","date_gmt":"2025-10-07T01:25:47","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=24785"},"modified":"2025-10-07T00:19:05","modified_gmt":"2025-10-07T07:19:05","slug":"changes-to-inline-images-in-outlook","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/changes-to-inline-images-in-outlook\/","title":{"rendered":"Changes to inline image representation in Outlook on the web and new Outlook for Windows"},"content":{"rendered":"<p>We\u2019d like to inform you about an update to how inline images are represented in the HTML body of Outlook emails in Outlook on the web and the new Outlook for Windows. This change may impact how your add-in identifies and processes inline images when using the attachment ID.<\/p>\n<h2 id=\"what\u2019s-changing\">What\u2019s changing?<\/h2>\n<p>Previously, inline images in the HTML mail body were represented with a URL containing the attachment ID as a query parameter. The following is an example of an inline image represented in HTML code.<\/br><\/br>\n<code>&lt;img src=\"https:\/\/attachments-sdf.office.net\/owa\/arpitsangwan%40microsoft.com\/service.svc\/s\/GetAttachmentThumbnail?<strong>id=AAkALgAAAAAAHYQDEapmEc2byACqAC%2FEWg0AW4xUByFbp0CroCNphMYEEAADMWhyiwAAARIAEAA3P0Tub6RfQaxOX%2Fjz3FlX<\/strong> &amp;amp;thumbnailType=2&amp;amp;token=XYZ\u2026 style=\"max-width: 1281px;\" originalsrc=\"cid:ee058cc2-ad96-485f-95c7-44b2f40cb987\" size=\"19720\" contenttype=\"image\/png &gt;<\/code><\/p>\n<p>Developers could parse the HTML and do one of the following.<\/p>\n<ul>\n<li>Extract the ID from the URL and match it with the attachment ID they already had.<\/li>\n<li>Use the entire URL in the\u00a0src\u00a0attribute to get the Base64 value of the inline image.<\/li>\n<\/ul>\n<p>Going forward, the URL for inline images will no longer contain the attachment ID. Instead, the image will be represented by a content ID (cid) in the\u00a0src\u00a0attribute. As a result, your current parsing logic won\u2019t be able to correlate the inline image in the mail body with the attachment ID or Base64 value of the image.<\/p>\n<p>The following sample shows the updated representation of inline images in HTML code.<\/p>\n<p><code>&lt;img src=\"cid:ee058cc2-ad96-485f-95c7-44b2f40cb987\" style=\"max-width: 1281px;\" originalsrc=\"cid:ee058cc2-ad96-485f-95c7-44b2f40cb987\" size=\"19720\" contenttype=\"image\/png\"&gt;<\/code><\/p>\n<h2 id=\"where-is-it-changing\">Where is it changing?<\/h2>\n<p>This update applies to Outlook on the web and the new Outlook on Windows. Other Outlook platforms will continue to operate as they do today.<\/p>\n<h2 id=\"why-is-it-changing\">Why is it changing?<\/h2>\n<p>As part of our ongoing security efforts, we\u2019re updating how inline images are loaded. Previously, images were retrieved via a\u00a0<strong>GET<\/strong>\u00a0request with the token embedded in the URL. We\u2019re transitioning to a fetch call that includes the token in the request header. This change could impact you if you do one of the following to identify where the inline image appears in the message body.<\/p>\n<ul>\n<li>Parse the attachment ID from the HTML editor.<\/li>\n<li>Get the Base64 value of the image using the URL in the\u00a0<span style=\"font-family: terminal, monaco, monospace;\">src\u00a0<\/span>attribute.<\/li>\n<\/ul>\n<h2 id=\"solution\">Solution<\/h2>\n<p>To restore inline image correlation, we\u2019re introducing the content ID that represents the image in the\u00a0<span style=\"font-family: terminal, monaco, monospace;\">src<\/span>\u00a0attribute of the corresponding\u00a0<span style=\"font-family: terminal, monaco, monospace;\">&lt;img&gt;<\/span>\u00a0element. Placing the content ID in the\u00a0<span style=\"font-family: terminal, monaco, monospace;\">src<\/span>\u00a0attribute matches how classic Outlook on Windows represents inline images.<\/p>\n<h2 id=\"action-required\">Action required<\/h2>\n<ol>\n<li><strong>Update your parsing logic<\/strong><\/br>\nInstead of extracting the attachment ID from the URL, parse the HTML message body and retrieve the\u00a0<span style=\"font-family: terminal, monaco, monospace;\">cid<\/span>\u00a0value from the\u00a0<span style=\"font-family: terminal, monaco, monospace;\">src<\/span>\u00a0attribute of the applicable\u00a0<span style=\"font-family: terminal, monaco, monospace;\">&lt;img&gt;<\/span>\u00a0element. Then, call<a href=\"https:\/\/learn.microsoft.com\/javascript\/api\/requirement-sets\/outlook\/preview-requirement-set\/office.context.mailbox.item#methods\" target=\"_blank\" rel=\"noopener\">\u00a0Office.context.mailbox.item.getAttachmentsAsync<\/a>. The getAttachmentsAsync method returns an\u00a0<a href=\"https:\/\/learn.microsoft.com\/javascript\/api\/outlook\/office.attachmentdetailscompose\" target=\"_blank\" rel=\"noopener\">AttachmentDetailsCompose<\/a> object that contains the content ID property to help identify and match images. The following is a sample AttachmentDetailsCompose object.<\/br><\/p>\n<p><code>[{\"id\":\"AAkALgAAAAAAHYQDEapmEc2byACqAC\/EWg0AW4xUByFbp0CroCNphMYEEAADMWhyywAAARIAEADghOrwhp8zR7umVQRBkN51\",\"name\":\"image.png\",\"contentType\":\"image\/png\",\"size\":2371,\"attachmentType\":\"file\",\"isInline\":true,\"contentId\":\"7957e11a-ce80-438b-87cd-611b3d6a3ec4\"}]<\/code><\/br><\/p>\n<p>To ensure your add-in continues to correctly correlate inline images during the rollout of these changes, we recommend that your add-in handle both previous and updated implementations. The following code is an example.<\/br><\/br>\n<a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/10\/update-parsing-logic-code-sample.png\" data-featherlight=\"image\"><img decoding=\"async\" class=\"size-full wp-image-24812 alignnone lazyloaded\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/10\/update-parsing-logic-code-sample.png\" sizes=\"(max-width: 393px) 100vw, 393px\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/10\/update-parsing-logic-code-sample.png 393w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/10\/update-parsing-logic-code-sample-300x137.png 300w\" alt=\"update parsing logic code sample image\" width=\"393\" height=\"180\" data-src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2025\/10\/update-parsing-logic-code-sample.png\" \/><\/a><\/li>\n<li><strong>Test your add-in<\/strong><\/br>\nEnsure your add-in correctly identifies and processes inline images using the updated\u00a0<span style=\"font-family: terminal, monaco, monospace;\">src\u00a0<\/span>attribute.<\/li>\n<\/ol>\n<h2 id=\"timeline\">Timeline<\/h2>\n<p>Starting November 15, 2025, the updated inline image representation will begin rolling out to production users. Please make the necessary changes before then to avoid regressions to your add-in experience.<\/p>\n<p>Let us know if you have any questions!<\/p>\n<p>Happy coding!<\/p>\n<p>The Office Extensibility team<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are updating how inline images are represented in the HTML body of Outlook emails in Outlook on the web and the new Outlook for Windows. This change may impact how your add-in identifies and processes inline images when using the attachment ID.<\/p>\n","protected":false},"author":69076,"featured_media":24807,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,11],"tags":[424,370,298,422,423],"class_list":["post-24785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-developer","category-office-add-ins","tag-inline-images","tag-new-outlook-on-windows","tag-outlook-add-ins","tag-outlook-on-the-web","tag-owa"],"acf":[],"blog_post_summary":"<p>We are updating how inline images are represented in the HTML body of Outlook emails in Outlook on the web and the new Outlook for Windows. This change may impact how your add-in identifies and processes inline images when using the attachment ID.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/24785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69076"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=24785"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/24785\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/24807"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=24785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=24785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=24785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}