[{"data":1,"prerenderedAt":776},["ShallowReactive",2],{"guide-placeholder-images-email-templates":3},{"id":4,"title":5,"body":6,"date":765,"description":766,"extension":767,"meta":768,"navigation":360,"path":772,"readingTime":184,"seo":773,"stem":774,"__hash__":775},"guides\u002Fguides\u002Fplaceholder-images-email-templates.md","Placeholder Images for Email Templates: What Works Across Clients",{"type":7,"value":8,"toc":750},"minimark",[9,14,23,26,30,102,106,113,199,204,233,237,309,312,316,319,406,419,423,426,570,577,581,584,640,646,650,653,676,683,687,713,717,726,730,746],[10,11,13],"h2",{"id":12},"email-rendering-is-not-the-web","Email Rendering Is Not the Web",[15,16,17,18,22],"p",{},"Email clients do not render HTML like browsers. Outlook uses Word's rendering engine. Gmail strips ",[19,20,21],"code",{},"\u003Cstyle>"," blocks. Yahoo has its own CSS quirks. This matters for placeholder images because the techniques that work on the web — inline SVG, data URIs, CSS backgrounds — often fail in email.",[15,24,25],{},"When designing email templates, placeholder images must follow the most constrained environment in your target client list.",[10,27,29],{"id":28},"what-does-not-work-in-email","What Does Not Work in Email",[31,32,33,46],"table",{},[34,35,36],"thead",{},[37,38,39,43],"tr",{},[40,41,42],"th",{},"Technique",[40,44,45],{},"Problem",[47,48,49,61,72,83,91],"tbody",{},[37,50,51,58],{},[52,53,54,55],"td",{},"Inline ",[19,56,57],{},"\u003Csvg>",[52,59,60],{},"Stripped by most email clients",[37,62,63,69],{},[52,64,65,66],{},"Data URI in ",[19,67,68],{},"\u003Cimg src>",[52,70,71],{},"Blocked by Gmail, Outlook",[37,73,74,80],{},[52,75,76,77],{},"CSS ",[19,78,79],{},"background-image",[52,81,82],{},"Ignored by Outlook (Word engine)",[37,84,85,88],{},[52,86,87],{},"External SVG file",[52,89,90],{},"Mostly blocked",[37,92,93,99],{},[52,94,95,98],{},[19,96,97],{},"\u003Cpicture>"," element",[52,100,101],{},"Partial support, unreliable",[10,103,105],{"id":104},"what-does-work","What Does Work",[15,107,108,109,112],{},"The only reliable approach for images in email is a standard ",[19,110,111],{},"\u003Cimg>"," tag pointing to an externally hosted image file:",[114,115,120],"pre",{"className":116,"code":117,"language":118,"meta":119,"style":119},"language-html shiki shiki-themes github-light github-dark","\u003Cimg\n  src=\"https:\u002F\u002Fcdn.example.com\u002Fplaceholder-600x300.jpg\"\n  width=\"600\"\n  height=\"300\"\n  alt=\"Product image placeholder\"\n  style=\"display:block; width:100%; max-width:600px; height:auto;\"\n\u002F>\n","html","",[19,121,122,135,149,160,171,182,193],{"__ignoreMap":119},[123,124,127,131],"span",{"class":125,"line":126},"line",1,[123,128,130],{"class":129},"sVt8B","\u003C",[123,132,134],{"class":133},"s9eBZ","img\n",[123,136,138,142,145],{"class":125,"line":137},2,[123,139,141],{"class":140},"sScJk","  src",[123,143,144],{"class":129},"=",[123,146,148],{"class":147},"sZZnC","\"https:\u002F\u002Fcdn.example.com\u002Fplaceholder-600x300.jpg\"\n",[123,150,152,155,157],{"class":125,"line":151},3,[123,153,154],{"class":140},"  width",[123,156,144],{"class":129},[123,158,159],{"class":147},"\"600\"\n",[123,161,163,166,168],{"class":125,"line":162},4,[123,164,165],{"class":140},"  height",[123,167,144],{"class":129},[123,169,170],{"class":147},"\"300\"\n",[123,172,174,177,179],{"class":125,"line":173},5,[123,175,176],{"class":140},"  alt",[123,178,144],{"class":129},[123,180,181],{"class":147},"\"Product image placeholder\"\n",[123,183,185,188,190],{"class":125,"line":184},6,[123,186,187],{"class":140},"  style",[123,189,144],{"class":129},[123,191,192],{"class":147},"\"display:block; width:100%; max-width:600px; height:auto;\"\n",[123,194,196],{"class":125,"line":195},7,[123,197,198],{"class":129},"\u002F>\n",[200,201,203],"h3",{"id":202},"key-attributes","Key Attributes",[205,206,207,215,221,227],"ul",{},[208,209,210,214],"li",{},[211,212,213],"strong",{},"width and height",": Explicit pixel dimensions prevent layout shift while images load — critical in email where slow connections are common",[208,216,217,220],{},[211,218,219],{},"style=\"display:block\"",": Removes the unwanted gap below inline images in some clients",[208,222,223,226],{},[211,224,225],{},"style=\"width:100%; max-width:600px; height:auto\"",": Enables responsive scaling while capping the maximum size",[208,228,229,232],{},[211,230,231],{},"alt text",": Shows when images are blocked (default in many email clients)",[10,234,236],{"id":235},"placeholder-image-sizes-for-common-email-layouts","Placeholder Image Sizes for Common Email Layouts",[31,238,239,252],{},[34,240,241],{},[37,242,243,246,249],{},[40,244,245],{},"Element",[40,247,248],{},"Recommended Size",[40,250,251],{},"Notes",[47,253,254,265,276,287,298],{},[37,255,256,259,262],{},[52,257,258],{},"Full-width hero",[52,260,261],{},"600 × 300 px",[52,263,264],{},"Standard email width is 600px",[37,266,267,270,273],{},[52,268,269],{},"Two-column image",[52,271,272],{},"280 × 200 px",[52,274,275],{},"280px per column with gutters",[37,277,278,281,284],{},[52,279,280],{},"Three-column image",[52,282,283],{},"180 × 140 px",[52,285,286],{},"180px per column",[37,288,289,292,295],{},[52,290,291],{},"Product thumbnail",[52,293,294],{},"200 × 200 px",[52,296,297],{},"Square format",[37,299,300,303,306],{},[52,301,302],{},"Banner ad slot",[52,304,305],{},"600 × 100 px",[52,307,308],{},"Short banner",[15,310,311],{},"Always export at 2x resolution for retina displays. A 600px-wide hero should be saved as 1200px wide.",[10,313,315],{"id":314},"alt-text-as-fallback-content","Alt Text as Fallback Content",[15,317,318],{},"Many email clients block images by default. The alt text becomes your content:",[114,320,322],{"className":116,"code":321,"language":118,"meta":119,"style":119},"\u003C!-- Bad: invisible when images blocked -->\n\u003Cimg src=\"https:\u002F\u002Fcdn.example.com\u002Fhero.jpg\" alt=\"Image\" \u002F>\n\n\u003C!-- Good: communicates value without images -->\n\u003Cimg\n  src=\"https:\u002F\u002Fcdn.example.com\u002Fhero.jpg\"\n  alt=\"Summer Sale — 40% off allOutdoor Gear.Shop Now\"\n  style=\"display:block; width:100%; max-width:600px; height:auto; color:#1E293B; font-size:16px; font-family:Arial,sans-serif;\"\n\u002F>\n",[19,323,324,330,356,362,367,373,382,391,401],{"__ignoreMap":119},[123,325,326],{"class":125,"line":126},[123,327,329],{"class":328},"sJ8bj","\u003C!-- Bad: invisible when images blocked -->\n",[123,331,332,334,337,340,342,345,348,350,353],{"class":125,"line":137},[123,333,130],{"class":129},[123,335,336],{"class":133},"img",[123,338,339],{"class":140}," src",[123,341,144],{"class":129},[123,343,344],{"class":147},"\"https:\u002F\u002Fcdn.example.com\u002Fhero.jpg\"",[123,346,347],{"class":140}," alt",[123,349,144],{"class":129},[123,351,352],{"class":147},"\"Image\"",[123,354,355],{"class":129}," \u002F>\n",[123,357,358],{"class":125,"line":151},[123,359,361],{"emptyLinePlaceholder":360},true,"\n",[123,363,364],{"class":125,"line":162},[123,365,366],{"class":328},"\u003C!-- Good: communicates value without images -->\n",[123,368,369,371],{"class":125,"line":173},[123,370,130],{"class":129},[123,372,134],{"class":133},[123,374,375,377,379],{"class":125,"line":184},[123,376,141],{"class":140},[123,378,144],{"class":129},[123,380,381],{"class":147},"\"https:\u002F\u002Fcdn.example.com\u002Fhero.jpg\"\n",[123,383,384,386,388],{"class":125,"line":195},[123,385,176],{"class":140},[123,387,144],{"class":129},[123,389,390],{"class":147},"\"Summer Sale — 40% off allOutdoor Gear.Shop Now\"\n",[123,392,394,396,398],{"class":125,"line":393},8,[123,395,187],{"class":140},[123,397,144],{"class":129},[123,399,400],{"class":147},"\"display:block; width:100%; max-width:600px; height:auto; color:#1E293B; font-size:16px; font-family:Arial,sans-serif;\"\n",[123,402,404],{"class":125,"line":403},9,[123,405,198],{"class":129},[15,407,54,408,411,412,415,416,418],{},[19,409,410],{},"color"," and ",[19,413,414],{},"font-size"," on the ",[19,417,111],{}," tag style the alt text in clients that support styled alt text (most do, except Outlook).",[10,420,422],{"id":421},"bulletproof-background-images","Bulletproof Background Images",[15,424,425],{},"For background images behind text, use the \"bulletproof background\" technique — a VML fallback for Outlook wrapped in standard CSS for other clients:",[114,427,429],{"className":116,"code":428,"language":118,"meta":119,"style":119},"\u003Ctd background=\"https:\u002F\u002Fcdn.example.com\u002Fplaceholder-600x300.jpg\" bgcolor=\"#E2E8F0\" width=\"600\" height=\"300\" valign=\"top\">\n  \u003C!--[if gte mso 9]>\n  \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:600px;height:300px;\">\n    \u003Cv:fill type=\"frame\" src=\"https:\u002F\u002Fcdn.example.com\u002Fplaceholder-600x300.jpg\" color=\"#E2E8F0\"\u002F>\n    \u003Cv:textbox inset=\"0,0,0,0\">\n  \u003C![endif]-->\n  \u003Cdiv style=\"padding:20px; font-family:Arial,sans-serif; color:#1E293B;\">\n    Your content here\n  \u003C\u002Fdiv>\n  \u003C!--[if gte mso 9]>\n    \u003C\u002Fv:textbox>\n  \u003C\u002Fv:rect>\n  \u003C![endif]-->\n\u003C\u002Ftd>\n",[19,430,431,481,486,491,496,501,506,524,529,538,543,549,555,560],{"__ignoreMap":119},[123,432,433,435,437,440,442,445,449,451,454,457,459,462,465,467,470,473,475,478],{"class":125,"line":126},[123,434,130],{"class":129},[123,436,52],{"class":133},[123,438,439],{"class":140}," background",[123,441,144],{"class":129},[123,443,444],{"class":147},"\"https:\u002F\u002Fcdn.example.com\u002Fplaceholder-600x300.jpg\"",[123,446,448],{"class":447},"s7hpK"," bgcolor",[123,450,144],{"class":129},[123,452,453],{"class":147},"\"#E2E8F0\"",[123,455,456],{"class":140}," width",[123,458,144],{"class":129},[123,460,461],{"class":147},"\"600\"",[123,463,464],{"class":140}," height",[123,466,144],{"class":129},[123,468,469],{"class":147},"\"300\"",[123,471,472],{"class":140}," valign",[123,474,144],{"class":129},[123,476,477],{"class":147},"\"top\"",[123,479,480],{"class":129},">\n",[123,482,483],{"class":125,"line":137},[123,484,485],{"class":328},"  \u003C!--[if gte mso 9]>\n",[123,487,488],{"class":125,"line":151},[123,489,490],{"class":328},"  \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:600px;height:300px;\">\n",[123,492,493],{"class":125,"line":162},[123,494,495],{"class":328},"    \u003Cv:fill type=\"frame\" src=\"https:\u002F\u002Fcdn.example.com\u002Fplaceholder-600x300.jpg\" color=\"#E2E8F0\"\u002F>\n",[123,497,498],{"class":125,"line":173},[123,499,500],{"class":328},"    \u003Cv:textbox inset=\"0,0,0,0\">\n",[123,502,503],{"class":125,"line":184},[123,504,505],{"class":328},"  \u003C![endif]-->\n",[123,507,508,511,514,517,519,522],{"class":125,"line":195},[123,509,510],{"class":129},"  \u003C",[123,512,513],{"class":133},"div",[123,515,516],{"class":140}," style",[123,518,144],{"class":129},[123,520,521],{"class":147},"\"padding:20px; font-family:Arial,sans-serif; color:#1E293B;\"",[123,523,480],{"class":129},[123,525,526],{"class":125,"line":393},[123,527,528],{"class":129},"    Your content here\n",[123,530,531,534,536],{"class":125,"line":403},[123,532,533],{"class":129},"  \u003C\u002F",[123,535,513],{"class":133},[123,537,480],{"class":129},[123,539,541],{"class":125,"line":540},10,[123,542,485],{"class":328},[123,544,546],{"class":125,"line":545},11,[123,547,548],{"class":328},"    \u003C\u002Fv:textbox>\n",[123,550,552],{"class":125,"line":551},12,[123,553,554],{"class":328},"  \u003C\u002Fv:rect>\n",[123,556,558],{"class":125,"line":557},13,[123,559,505],{"class":328},[123,561,563,566,568],{"class":125,"line":562},14,[123,564,565],{"class":129},"\u003C\u002F",[123,567,52],{"class":133},[123,569,480],{"class":129},[15,571,572,573,576],{},"When the background image fails to load (images blocked, CDN error), the ",[19,574,575],{},"bgcolor"," provides a solid fallback color.",[10,578,580],{"id":579},"placeholder-services-for-email-testing","Placeholder Services for Email Testing",[15,582,583],{},"External placeholder services work well for email testing since images must be externally hosted anyway:",[31,585,586,599],{},[34,587,588],{},[37,589,590,593,596],{},[40,591,592],{},"Service",[40,594,595],{},"URL Pattern",[40,597,598],{},"Features",[47,600,601,614,627],{},[37,602,603,606,611],{},[52,604,605],{},"Lorem Picsum",[52,607,608],{},[19,609,610],{},"picsum.photos\u002F600\u002F300",[52,612,613],{},"Random photos, fast CDN",[37,615,616,619,624],{},[52,617,618],{},"Placeholder.com",[52,620,621],{},[19,622,623],{},"via.placeholder.com\u002F600x300\u002FE2E8F0\u002F94A3B8?text=Hero",[52,625,626],{},"Custom colors and text",[37,628,629,632,637],{},[52,630,631],{},"PlaceKitten",[52,633,634],{},[19,635,636],{},"placekitten.com\u002F600\u002F300",[52,638,639],{},"Cat photos",[15,641,642,645],{},[211,643,644],{},"Important",": Never use placeholder services in production emails. They may go down, change content, or get blocked by email security filters. Replace all placeholders with final images before sending.",[10,647,649],{"id":648},"dark-mode-in-email","Dark Mode in Email",[15,651,652],{},"Dark mode email clients (Outlook.com, Apple Mail) may invert image colors, making light placeholders look awkward. Test with:",[205,654,655,664,670],{},[208,656,657,660,661],{},[211,658,659],{},"Apple Mail"," (macOS\u002FiOS): Respects ",[19,662,663],{},"prefers-color-scheme",[208,665,666,669],{},[211,667,668],{},"Outlook.com",": Forces dark mode, may invert colors",[208,671,672,675],{},[211,673,674],{},"Gmail",": Limited dark mode support",[15,677,678,679,682],{},"For placeholder images, choose neutral colors that work in both light and dark contexts. Avoid pure white (",[19,680,681],{},"#FFFFFF",") backgrounds inside images — they create harsh rectangles in dark mode.",[10,684,686],{"id":685},"key-takeaways","Key Takeaways",[205,688,689,695,698,701,704,707,710],{},[208,690,691,692,694],{},"Only externally hosted ",[19,693,111],{}," tags work reliably across all email clients",[208,696,697],{},"Inline SVG, data URIs, and CSS backgrounds are not safe for email",[208,699,700],{},"Always include explicit width, height, and descriptive alt text",[208,702,703],{},"Export images at 2x for retina support",[208,705,706],{},"Use bulletproof background techniques for image-behind-text layouts",[208,708,709],{},"Replace placeholder services with final images before production sends",[208,711,712],{},"Test images in both light and dark email modes",[10,714,716],{"id":715},"try-it-yourself","Try It Yourself",[15,718,719,720,725],{},"Generate placeholder images in the exact sizes needed for email templates using our ",[721,722,724],"a",{"href":723},"\u002Ftools\u002Fplaceholder-image","Placeholder Image Generator",". Choose custom dimensions and colors, then download production-ready files.",[10,727,729],{"id":728},"related-guides","Related Guides",[205,731,732,739],{},[208,733,734,738],{},[721,735,737],{"href":736},"\u002Fguides\u002Fplaceholder-image-guide","Placeholder Image Guide"," — general best practices for dummy images",[208,740,741,745],{},[721,742,744],{"href":743},"\u002Fguides\u002Fdesign-prototyping-tools","Design Prototyping Tools"," — placeholder workflows from wireframe to production",[747,748,749],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":119,"searchDepth":137,"depth":137,"links":751},[752,753,754,757,758,759,760,761,762,763,764],{"id":12,"depth":137,"text":13},{"id":28,"depth":137,"text":29},{"id":104,"depth":137,"text":105,"children":755},[756],{"id":202,"depth":151,"text":203},{"id":235,"depth":137,"text":236},{"id":314,"depth":137,"text":315},{"id":421,"depth":137,"text":422},{"id":579,"depth":137,"text":580},{"id":648,"depth":137,"text":649},{"id":685,"depth":137,"text":686},{"id":715,"depth":137,"text":716},{"id":728,"depth":137,"text":729},"2026-05-28","Learn which placeholder image approaches work reliably in email templates. Covers Outlook quirks, retina support, alt text fallbacks, and Litmus-tested patterns.","md",{"keywords":769,"immutable":360},[770,771],"placeholder-image","placeholder-images-email-templates","\u002Fguides\u002Fplaceholder-images-email-templates",{"title":5,"description":766},"guides\u002Fplaceholder-images-email-templates","jfoHMK9crIgYryqYzdtLfvR4w2uSmFBAunfvqN9cBAw",1780401335813]