[{"data":1,"prerenderedAt":980},["ShallowReactive",2],{"guide-placeholder-image-guide":3},{"id":4,"title":5,"body":6,"date":968,"description":969,"extension":970,"meta":971,"navigation":972,"path":976,"readingTime":663,"seo":977,"stem":978,"__hash__":979},"guides\u002Fguides\u002Fplaceholder-image-guide.md","Placeholder Image Guide: When and How to Use Dummy Images",{"type":7,"value":8,"toc":943},"minimark",[9,14,18,21,25,28,33,36,40,43,47,55,59,62,66,69,158,162,165,231,235,238,283,286,290,293,396,410,414,417,424,430,436,494,498,502,505,509,512,516,519,687,691,694,698,701,871,875,902,906,915,919,939],[10,11,13],"h2",{"id":12},"what-are-placeholder-images","What Are Placeholder Images?",[15,16,17],"p",{},"Placeholder images — also called dummy images or stock placeholders — are temporary images used during design and development. They fill visual space in wireframes, prototypes, and staging environments before real assets exist. Their job is to represent the size, position, and aspect ratio of final images without requiring finished photography or graphics.",[15,19,20],{},"A good placeholder image communicates three things instantly: approximate dimensions, intended context, and whether the slot expects a photo, icon, or illustration.",[10,22,24],{"id":23},"when-to-use-placeholder-images","When to Use Placeholder Images",[15,26,27],{},"Placeholder images serve different purposes depending on your project stage. Using them at the right time saves hours of back-and-forth between designers, developers, and content teams.",[29,30,32],"h3",{"id":31},"wireframing","Wireframing",[15,34,35],{},"In low-fidelity wireframes, placeholders establish layout rhythm. Gray boxes with crosshairs or dimension labels tell stakeholders exactly how much screen space each image occupies. No one gets distracted by actual photo choices.",[29,37,39],{"id":38},"prototyping","Prototyping",[15,41,42],{},"Interactive prototypes need visual weight that plain boxes cannot provide. Placeholder images with realistic content — a landscape for a hero banner, a portrait for a team section — help viewers evaluate the design as a cohesive experience rather than a skeleton.",[29,44,46],{"id":45},"development-staging","Development Staging",[15,48,49,50,54],{},"Developers often build pages before the creative team delivers final assets. Placeholder images prevent broken ",[51,52,53],"code",{},"\u003Cimg>"," tags and let QA testers verify responsive behavior, lazy loading, and aspect-ratio handling across breakpoints.",[29,56,58],{"id":57},"client-demos","Client Demos",[15,60,61],{},"Showing a client a functional prototype with well-chosen placeholders is far more persuasive than blank space. It signals that the layout is intentional and that image slots are sized correctly for real content.",[10,63,65],{"id":64},"static-vs-dynamic-placeholders","Static vs Dynamic Placeholders",[15,67,68],{},"You can generate placeholder images in two ways, each with distinct trade-offs.",[70,71,72,88],"table",{},[73,74,75],"thead",{},[76,77,78,82,85],"tr",{},[79,80,81],"th",{},"Factor",[79,83,84],{},"Static (local files)",[79,86,87],{},"Dynamic (API services)",[89,90,91,103,114,125,136,147],"tbody",{},[76,92,93,97,100],{},[94,95,96],"td",{},"Speed",[94,98,99],{},"Instant — served from disk",[94,101,102],{},"Depends on network latency",[76,104,105,108,111],{},[94,106,107],{},"Offline support",[94,109,110],{},"Full",[94,112,113],{},"None",[76,115,116,119,122],{},[94,117,118],{},"Realism",[94,120,121],{},"You choose the image",[94,123,124],{},"Random or themed",[76,126,127,130,133],{},[94,128,129],{},"Reproducibility",[94,131,132],{},"Exact same image every time",[94,134,135],{},"May change between loads",[76,137,138,141,144],{},[94,139,140],{},"Setup effort",[94,142,143],{},"Create or download files",[94,145,146],{},"Use a URL pattern",[76,148,149,152,155],{},[94,150,151],{},"Best for",[94,153,154],{},"Production-like staging",[94,156,157],{},"Quick prototypes",[29,159,161],{"id":160},"static-examples","Static Examples",[15,163,164],{},"Place a PNG or SVG in your project and reference it directly:",[166,167,172],"pre",{"className":168,"code":169,"language":170,"meta":171,"style":171},"language-html shiki shiki-themes github-light github-dark","\u003Cimg src=\"\u002Fplaceholders\u002Fhero-16x9.png\"\n     alt=\"Placeholder hero image 1600x900\"\n     width=\"1600\" height=\"900\">\n","html","",[51,173,174,198,209],{"__ignoreMap":171},[175,176,179,183,187,191,194],"span",{"class":177,"line":178},"line",1,[175,180,182],{"class":181},"sVt8B","\u003C",[175,184,186],{"class":185},"s9eBZ","img",[175,188,190],{"class":189},"sScJk"," src",[175,192,193],{"class":181},"=",[175,195,197],{"class":196},"sZZnC","\"\u002Fplaceholders\u002Fhero-16x9.png\"\n",[175,199,201,204,206],{"class":177,"line":200},2,[175,202,203],{"class":189},"     alt",[175,205,193],{"class":181},[175,207,208],{"class":196},"\"Placeholder hero image 1600x900\"\n",[175,210,212,215,217,220,223,225,228],{"class":177,"line":211},3,[175,213,214],{"class":189},"     width",[175,216,193],{"class":181},[175,218,219],{"class":196},"\"1600\"",[175,221,222],{"class":189}," height",[175,224,193],{"class":181},[175,226,227],{"class":196},"\"900\"",[175,229,230],{"class":181},">\n",[29,232,234],{"id":233},"dynamic-examples","Dynamic Examples",[15,236,237],{},"URL-based services let you specify dimensions in the path:",[166,239,241],{"className":168,"code":240,"language":170,"meta":171,"style":171},"\u003Cimg src=\"https:\u002F\u002Fpicsum.photos\u002F800\u002F600\"\n     alt=\"Random placeholder image 800x600\"\n     width=\"800\" height=\"600\">\n",[51,242,243,256,265],{"__ignoreMap":171},[175,244,245,247,249,251,253],{"class":177,"line":178},[175,246,182],{"class":181},[175,248,186],{"class":185},[175,250,190],{"class":189},[175,252,193],{"class":181},[175,254,255],{"class":196},"\"https:\u002F\u002Fpicsum.photos\u002F800\u002F600\"\n",[175,257,258,260,262],{"class":177,"line":200},[175,259,203],{"class":189},[175,261,193],{"class":181},[175,263,264],{"class":196},"\"Random placeholder image 800x600\"\n",[175,266,267,269,271,274,276,278,281],{"class":177,"line":211},[175,268,214],{"class":189},[175,270,193],{"class":181},[175,272,273],{"class":196},"\"800\"",[175,275,222],{"class":189},[175,277,193],{"class":181},[175,279,280],{"class":196},"\"600\"",[175,282,230],{"class":181},[15,284,285],{},"Dynamic services are convenient for rapid prototyping, but never ship them to production. External dependencies add latency and can go offline.",[10,287,289],{"id":288},"recommended-sizes-by-context","Recommended Sizes by Context",[15,291,292],{},"Choosing the right dimensions for placeholder images prevents layout shift when real content arrives. Below are common sizes matched to typical UI contexts.",[70,294,295,308],{},[73,296,297],{},[76,298,299,302,305],{},[79,300,301],{},"Context",[79,303,304],{},"Recommended Size",[79,306,307],{},"Aspect Ratio",[89,309,310,321,332,342,353,364,374,385],{},[76,311,312,315,318],{},[94,313,314],{},"Hero banner (desktop)",[94,316,317],{},"1600 x 900",[94,319,320],{},"16:9",[76,322,323,326,329],{},[94,324,325],{},"Hero banner (mobile)",[94,327,328],{},"800 x 600",[94,330,331],{},"4:3",[76,333,334,337,340],{},[94,335,336],{},"Blog card thumbnail",[94,338,339],{},"400 x 300",[94,341,331],{},[76,343,344,347,350],{},[94,345,346],{},"Product card",[94,348,349],{},"400 x 400",[94,351,352],{},"1:1",[76,354,355,358,361],{},[94,356,357],{},"Social media share (OG)",[94,359,360],{},"1200 x 630",[94,362,363],{},"~1.91:1",[76,365,366,369,372],{},[94,367,368],{},"Avatar",[94,370,371],{},"200 x 200",[94,373,352],{},[76,375,376,379,382],{},[94,377,378],{},"Full-width feature",[94,380,381],{},"1920 x 600",[94,383,384],{},"~3.2:1",[76,386,387,390,393],{},[94,388,389],{},"App screenshot",[94,391,392],{},"375 x 812",[94,394,395],{},"9:19.5",[15,397,398,399,402,403,406,407,409],{},"Always set explicit ",[51,400,401],{},"width"," and ",[51,404,405],{},"height"," attributes on ",[51,408,53],{}," elements. Browsers use these to reserve space before the image loads, eliminating cumulative layout shift (CLS).",[10,411,413],{"id":412},"format-choices-png-svg-or-jpg","Format Choices: PNG, SVG, or JPG",[15,415,416],{},"Each format has advantages for placeholder use.",[15,418,419,423],{},[420,421,422],"strong",{},"PNG"," — Lossless, supports transparency. Best for UI elements, icons, and any placeholder that needs a transparent background. File sizes are larger than JPG for photographic content.",[15,425,426,429],{},[420,427,428],{},"SVG"," — Vector format, infinitely scalable, tiny file size. Ideal for geometric placeholders like labeled rectangles or aspect-ratio boxes. Not suitable for photographic placeholders.",[15,431,432,435],{},[420,433,434],{},"JPG"," — Lossy compression, smallest files for photos. Good when you need a realistic photographic placeholder with minimal bandwidth cost. No transparency support.",[70,437,438,451],{},[73,439,440],{},[76,441,442,445,448],{},[79,443,444],{},"Need",[79,446,447],{},"Best Format",[79,449,450],{},"Why",[89,452,453,463,473,483],{},[76,454,455,458,460],{},[94,456,457],{},"Labeled gray box",[94,459,428],{},[94,461,462],{},"Scalable, tiny, editable",[76,464,465,468,470],{},[94,466,467],{},"Transparent overlay",[94,469,422],{},[94,471,472],{},"Alpha channel support",[76,474,475,478,480],{},[94,476,477],{},"Realistic photo",[94,479,434],{},[94,481,482],{},"Smallest file for photos",[76,484,485,488,491],{},[94,486,487],{},"Icon placeholder",[94,489,490],{},"SVG or PNG",[94,492,493],{},"SVG scales; PNG for raster icons",[10,495,497],{"id":496},"best-practices-for-realistic-mockups","Best Practices for Realistic Mockups",[29,499,501],{"id":500},"match-aspect-ratios-to-real-content","Match Aspect Ratios to Real Content",[15,503,504],{},"If the final images will be portraits, do not use landscape placeholders. Mismatched ratios hide Cropping and alignment issues that surface late in the project.",[29,506,508],{"id":507},"use-context-appropriate-content","Use Context-Appropriate Content",[15,510,511],{},"A food-delivery app prototype should use food images, not generic landscapes. Context-appropriate placeholders help stakeholders evaluate whether the design supports the actual content type.",[29,513,515],{"id":514},"include-dimension-labels","Include Dimension Labels",[15,517,518],{},"For internal prototypes, overlay the dimensions directly on the placeholder image. This helps developers verify they are using the correct size.",[166,520,522],{"className":168,"code":521,"language":170,"meta":171,"style":171},"\u003C!-- SVG placeholder with dimension label -->\n\u003Csvg width=\"800\" height=\"600\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Crect width=\"100%\" height=\"100%\" fill=\"#e5e7eb\"\u002F>\n  \u003Ctext x=\"50%\" y=\"50%\" text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        font-family=\"monospace\" font-size=\"24\" fill=\"#6b7280\">\n    800 × 600\n  \u003C\u002Ftext>\n\u003C\u002Fsvg>\n",[51,523,524,530,560,592,623,633,661,667,677],{"__ignoreMap":171},[175,525,526],{"class":177,"line":178},[175,527,529],{"class":528},"sJ8bj","\u003C!-- SVG placeholder with dimension label -->\n",[175,531,532,534,537,540,542,544,546,548,550,553,555,558],{"class":177,"line":200},[175,533,182],{"class":181},[175,535,536],{"class":185},"svg",[175,538,539],{"class":189}," width",[175,541,193],{"class":181},[175,543,273],{"class":196},[175,545,222],{"class":189},[175,547,193],{"class":181},[175,549,280],{"class":196},[175,551,552],{"class":189}," xmlns",[175,554,193],{"class":181},[175,556,557],{"class":196},"\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"",[175,559,230],{"class":181},[175,561,562,565,568,570,572,575,577,579,581,584,586,589],{"class":177,"line":211},[175,563,564],{"class":181},"  \u003C",[175,566,567],{"class":185},"rect",[175,569,539],{"class":189},[175,571,193],{"class":181},[175,573,574],{"class":196},"\"100%\"",[175,576,222],{"class":189},[175,578,193],{"class":181},[175,580,574],{"class":196},[175,582,583],{"class":189}," fill",[175,585,193],{"class":181},[175,587,588],{"class":196},"\"#e5e7eb\"",[175,590,591],{"class":181},"\u002F>\n",[175,593,595,597,600,603,605,608,611,613,615,618,620],{"class":177,"line":594},4,[175,596,564],{"class":181},[175,598,599],{"class":185},"text",[175,601,602],{"class":189}," x",[175,604,193],{"class":181},[175,606,607],{"class":196},"\"50%\"",[175,609,610],{"class":189}," y",[175,612,193],{"class":181},[175,614,607],{"class":196},[175,616,617],{"class":189}," text-anchor",[175,619,193],{"class":181},[175,621,622],{"class":196},"\"middle\"\n",[175,624,626,629,631],{"class":177,"line":625},5,[175,627,628],{"class":189},"        dominant-baseline",[175,630,193],{"class":181},[175,632,622],{"class":196},[175,634,636,639,641,644,647,649,652,654,656,659],{"class":177,"line":635},6,[175,637,638],{"class":189},"        font-family",[175,640,193],{"class":181},[175,642,643],{"class":196},"\"monospace\"",[175,645,646],{"class":189}," font-size",[175,648,193],{"class":181},[175,650,651],{"class":196},"\"24\"",[175,653,583],{"class":189},[175,655,193],{"class":181},[175,657,658],{"class":196},"\"#6b7280\"",[175,660,230],{"class":181},[175,662,664],{"class":177,"line":663},7,[175,665,666],{"class":181},"    800 × 600\n",[175,668,670,673,675],{"class":177,"line":669},8,[175,671,672],{"class":181},"  \u003C\u002F",[175,674,599],{"class":185},[175,676,230],{"class":181},[175,678,680,683,685],{"class":177,"line":679},9,[175,681,682],{"class":181},"\u003C\u002F",[175,684,536],{"class":185},[175,686,230],{"class":181},[29,688,690],{"id":689},"avoid-copyrighted-stock-photos","Avoid Copyrighted Stock Photos",[15,692,693],{},"Even in prototypes, using copyrighted images without a license creates legal risk. Use services that offer explicitly free-to-use photos, or generate placeholders programmatically.",[29,695,697],{"id":696},"strip-placeholders-before-launch","Strip Placeholders Before Launch",[15,699,700],{},"Add a checklist step: every placeholder image must be replaced before production deployment. Automated checks can scan for common placeholder URLs:",[166,702,706],{"className":703,"code":704,"language":705,"meta":171,"style":171},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Pre-deploy check for placeholder image URLs\nconst PLACEHOLDER_DOMAINS = ['picsum.photos', 'via.placeholder.com', 'placehold.co']\nconst images = document.querySelectorAll('img[src]')\nconst unreplaced = [...images].filter(img =>\n  PLACEHOLDER_DOMAINS.some(d => img.src.includes(d))\n)\nif (unreplaced.length > 0) {\n  console.error('Unreplaced placeholder images found:', unreplaced)\n}\n","javascript",[51,707,708,713,746,770,798,826,830,850,866],{"__ignoreMap":171},[175,709,710],{"class":177,"line":178},[175,711,712],{"class":528},"\u002F\u002F Pre-deploy check for placeholder image URLs\n",[175,714,715,719,723,726,729,732,735,738,740,743],{"class":177,"line":200},[175,716,718],{"class":717},"szBVR","const",[175,720,722],{"class":721},"sj4cs"," PLACEHOLDER_DOMAINS",[175,724,725],{"class":717}," =",[175,727,728],{"class":181}," [",[175,730,731],{"class":196},"'picsum.photos'",[175,733,734],{"class":181},", ",[175,736,737],{"class":196},"'via.placeholder.com'",[175,739,734],{"class":181},[175,741,742],{"class":196},"'placehold.co'",[175,744,745],{"class":181},"]\n",[175,747,748,750,753,755,758,761,764,767],{"class":177,"line":211},[175,749,718],{"class":717},[175,751,752],{"class":721}," images",[175,754,725],{"class":717},[175,756,757],{"class":181}," document.",[175,759,760],{"class":189},"querySelectorAll",[175,762,763],{"class":181},"(",[175,765,766],{"class":196},"'img[src]'",[175,768,769],{"class":181},")\n",[175,771,772,774,777,779,781,784,787,790,792,795],{"class":177,"line":594},[175,773,718],{"class":717},[175,775,776],{"class":721}," unreplaced",[175,778,725],{"class":717},[175,780,728],{"class":181},[175,782,783],{"class":717},"...",[175,785,786],{"class":181},"images].",[175,788,789],{"class":189},"filter",[175,791,763],{"class":181},[175,793,186],{"class":794},"s4XuR",[175,796,797],{"class":717}," =>\n",[175,799,800,803,806,809,811,814,817,820,823],{"class":177,"line":625},[175,801,802],{"class":721},"  PLACEHOLDER_DOMAINS",[175,804,805],{"class":181},".",[175,807,808],{"class":189},"some",[175,810,763],{"class":181},[175,812,813],{"class":794},"d",[175,815,816],{"class":717}," =>",[175,818,819],{"class":181}," img.src.",[175,821,822],{"class":189},"includes",[175,824,825],{"class":181},"(d))\n",[175,827,828],{"class":177,"line":635},[175,829,769],{"class":181},[175,831,832,835,838,841,844,847],{"class":177,"line":663},[175,833,834],{"class":717},"if",[175,836,837],{"class":181}," (unreplaced.",[175,839,840],{"class":721},"length",[175,842,843],{"class":717}," >",[175,845,846],{"class":721}," 0",[175,848,849],{"class":181},") {\n",[175,851,852,855,858,860,863],{"class":177,"line":669},[175,853,854],{"class":181},"  console.",[175,856,857],{"class":189},"error",[175,859,763],{"class":181},[175,861,862],{"class":196},"'Unreplaced placeholder images found:'",[175,864,865],{"class":181},", unreplaced)\n",[175,867,868],{"class":177,"line":679},[175,869,870],{"class":181},"}\n",[10,872,874],{"id":873},"key-takeaways","Key Takeaways",[876,877,878,882,885,888,891,899],"ul",{},[879,880,881],"li",{},"Placeholder images fill visual space in wireframes, prototypes, and staging before real assets exist",[879,883,884],{},"Use static placeholders for production-like environments; dynamic services for quick prototypes",[879,886,887],{},"Match aspect ratios and content types to what the final images will be",[879,889,890],{},"Include dimension labels on internal placeholders to help developers",[879,892,893,894,402,896,898],{},"Set explicit ",[51,895,401],{},[51,897,405],{}," attributes to prevent layout shift",[879,900,901],{},"Always replace placeholders with licensed, final images before deploying to production",[10,903,905],{"id":904},"try-it-yourself","Try It Yourself",[15,907,908,909,914],{},"Generate placeholder images with exact dimensions using our free ",[910,911,913],"a",{"href":912},"\u002Ftools\u002Fplaceholder-image","Placeholder Image Generator",". Specify width, height, background color, and text — then download the result instantly.",[10,916,918],{"id":917},"related-guides","Related Guides",[876,920,921,927,933],{},[879,922,923],{},[910,924,926],{"href":925},"\u002Fguides\u002Fmockup-image-best-practices","Mockup Image Best Practices: Professional Prototyping Techniques",[879,928,929],{},[910,930,932],{"href":931},"\u002Fguides\u002Fdesign-prototyping-tools","Design Prototyping Tools: Essential Utilities for Rapid Prototyping",[879,934,935],{},[910,936,938],{"href":937},"\u002Fguides\u002Fimage-to-base64-guide","Image to Base64: When to Embed Images in HTML and CSS",[940,941,942],"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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":171,"searchDepth":200,"depth":200,"links":944},[945,946,952,956,957,958,965,966,967],{"id":12,"depth":200,"text":13},{"id":23,"depth":200,"text":24,"children":947},[948,949,950,951],{"id":31,"depth":211,"text":32},{"id":38,"depth":211,"text":39},{"id":45,"depth":211,"text":46},{"id":57,"depth":211,"text":58},{"id":64,"depth":200,"text":65,"children":953},[954,955],{"id":160,"depth":211,"text":161},{"id":233,"depth":211,"text":234},{"id":288,"depth":200,"text":289},{"id":412,"depth":200,"text":413},{"id":496,"depth":200,"text":497,"children":959},[960,961,962,963,964],{"id":500,"depth":211,"text":501},{"id":507,"depth":211,"text":508},{"id":514,"depth":211,"text":515},{"id":689,"depth":211,"text":690},{"id":696,"depth":211,"text":697},{"id":873,"depth":200,"text":874},{"id":904,"depth":200,"text":905},{"id":917,"depth":200,"text":918},"2026-05-28","Learn when and how to use placeholder images in design and development. Covers sizes, formats, and best practices for mockups.","md",{"immutable":972,"keywords":973},true,[974,975],"placeholder-image","placeholder-image-guide","\u002Fguides\u002Fplaceholder-image-guide",{"title":5,"description":969},"guides\u002Fplaceholder-image-guide","Qlw13w8phv_XZFR-8Nx7NaRpj1kY49mURjFQ-OikFyc",1780401328901]