[{"data":1,"prerenderedAt":1136},["ShallowReactive",2],{"guide-mockup-image-best-practices":3},{"id":4,"title":5,"body":6,"date":1124,"description":1125,"extension":1126,"meta":1127,"navigation":1128,"path":1132,"readingTime":290,"seo":1133,"stem":1134,"__hash__":1135},"guides\u002Fguides\u002Fmockup-image-best-practices.md","Mockup Image Best Practices: Professional Prototyping Techniques",{"type":7,"value":8,"toc":1103},"minimark",[9,14,18,21,25,28,117,120,308,312,315,320,337,406,470,484,488,491,553,564,647,656,660,663,667,674,677,694,697,701,911,915,919,922,939,943,946,950,953,957,960,1012,1038,1042,1062,1066,1075,1079,1099],[10,11,13],"h2",{"id":12},"why-mockup-image-quality-matters","Why Mockup Image Quality Matters",[15,16,17],"p",{},"A mockup is only as convincing as the images it contains. Sloppy placeholders — mismatched sizes, random photos, no labels — undermine stakeholder trust and hide layout problems. Professional mockup images follow conventions that communicate intent, reduce ambiguity, and make the transition to production smoother.",[15,19,20],{},"This guide covers techniques that experienced designers use to make mockups clear, consistent, and developer-friendly.",[10,22,24],{"id":23},"color-coded-placeholders-by-section","Color-Coded Placeholders by Section",[15,26,27],{},"One of the most effective techniques is assigning distinct background colors to placeholder images based on their UI section. This makes the structure of a page immediately visible at a glance.",[29,30,31,47],"table",{},[32,33,34],"thead",{},[35,36,37,41,44],"tr",{},[38,39,40],"th",{},"Section",[38,42,43],{},"Suggested Color",[38,45,46],{},"Hex",[48,49,50,62,73,84,95,106],"tbody",{},[35,51,52,56,59],{},[53,54,55],"td",{},"Hero \u002F Banner",[53,57,58],{},"Blue",[53,60,61],{},"#3b82f6",[35,63,64,67,70],{},[53,65,66],{},"Product Cards",[53,68,69],{},"Green",[53,71,72],{},"#22c55e",[35,74,75,78,81],{},[53,76,77],{},"Testimonials",[53,79,80],{},"Purple",[53,82,83],{},"#a855f7",[35,85,86,89,92],{},[53,87,88],{},"Footer",[53,90,91],{},"Gray",[53,93,94],{},"#6b7280",[35,96,97,100,103],{},[53,98,99],{},"Navigation",[53,101,102],{},"Dark slate",[53,104,105],{},"#334155",[35,107,108,111,114],{},[53,109,110],{},"Call-to-Action",[53,112,113],{},"Orange",[53,115,116],{},"#f97316",[15,118,119],{},"When a developer sees a blue placeholder, they know it maps to the hero slot. When they see green, they know it is a product card image. This removes guesswork from the handoff process.",[121,122,127],"pre",{"className":123,"code":124,"language":125,"meta":126,"style":126},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Color-coded placeholder for hero section -->\n\u003Csvg width=\"1600\" height=\"900\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Crect width=\"100%\" height=\"100%\" fill=\"#3b82f6\"\u002F>\n  \u003Ctext x=\"50%\" y=\"50%\" text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        font-family=\"sans-serif\" font-size=\"32\" fill=\"white\">\n    HERO — 1600 × 900\n  \u003C\u002Ftext>\n\u003C\u002Fsvg>\n","html","",[128,129,130,139,180,213,244,254,282,288,298],"code",{"__ignoreMap":126},[131,132,135],"span",{"class":133,"line":134},"line",1,[131,136,138],{"class":137},"sJ8bj","\u003C!-- Color-coded placeholder for hero section -->\n",[131,140,142,146,150,154,157,161,164,166,169,172,174,177],{"class":133,"line":141},2,[131,143,145],{"class":144},"sVt8B","\u003C",[131,147,149],{"class":148},"s9eBZ","svg",[131,151,153],{"class":152},"sScJk"," width",[131,155,156],{"class":144},"=",[131,158,160],{"class":159},"sZZnC","\"1600\"",[131,162,163],{"class":152}," height",[131,165,156],{"class":144},[131,167,168],{"class":159},"\"900\"",[131,170,171],{"class":152}," xmlns",[131,173,156],{"class":144},[131,175,176],{"class":159},"\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"",[131,178,179],{"class":144},">\n",[131,181,183,186,189,191,193,196,198,200,202,205,207,210],{"class":133,"line":182},3,[131,184,185],{"class":144},"  \u003C",[131,187,188],{"class":148},"rect",[131,190,153],{"class":152},[131,192,156],{"class":144},[131,194,195],{"class":159},"\"100%\"",[131,197,163],{"class":152},[131,199,156],{"class":144},[131,201,195],{"class":159},[131,203,204],{"class":152}," fill",[131,206,156],{"class":144},[131,208,209],{"class":159},"\"#3b82f6\"",[131,211,212],{"class":144},"\u002F>\n",[131,214,216,218,221,224,226,229,232,234,236,239,241],{"class":133,"line":215},4,[131,217,185],{"class":144},[131,219,220],{"class":148},"text",[131,222,223],{"class":152}," x",[131,225,156],{"class":144},[131,227,228],{"class":159},"\"50%\"",[131,230,231],{"class":152}," y",[131,233,156],{"class":144},[131,235,228],{"class":159},[131,237,238],{"class":152}," text-anchor",[131,240,156],{"class":144},[131,242,243],{"class":159},"\"middle\"\n",[131,245,247,250,252],{"class":133,"line":246},5,[131,248,249],{"class":152},"        dominant-baseline",[131,251,156],{"class":144},[131,253,243],{"class":159},[131,255,257,260,262,265,268,270,273,275,277,280],{"class":133,"line":256},6,[131,258,259],{"class":152},"        font-family",[131,261,156],{"class":144},[131,263,264],{"class":159},"\"sans-serif\"",[131,266,267],{"class":152}," font-size",[131,269,156],{"class":144},[131,271,272],{"class":159},"\"32\"",[131,274,204],{"class":152},[131,276,156],{"class":144},[131,278,279],{"class":159},"\"white\"",[131,281,179],{"class":144},[131,283,285],{"class":133,"line":284},7,[131,286,287],{"class":144},"    HERO — 1600 × 900\n",[131,289,291,294,296],{"class":133,"line":290},8,[131,292,293],{"class":144},"  \u003C\u002F",[131,295,220],{"class":148},[131,297,179],{"class":144},[131,299,301,304,306],{"class":133,"line":300},9,[131,302,303],{"class":144},"\u003C\u002F",[131,305,149],{"class":148},[131,307,179],{"class":144},[10,309,311],{"id":310},"aspect-ratio-consistency","Aspect Ratio Consistency",[15,313,314],{},"Inconsistent aspect ratios across similar components create visual noise. If product cards use a 4:3 ratio on one row and 1:1 on the next, the layout looks disorganized — and the production images will look just as inconsistent.",[316,317,319],"h3",{"id":318},"rules-to-follow","Rules to Follow",[321,322,323,327,334],"ul",{},[324,325,326],"li",{},"Define one aspect ratio per component type and document it",[324,328,329,330,333],{},"Use CSS ",[128,331,332],{},"aspect-ratio"," to enforce ratios during development",[324,335,336],{},"Test with images that are slightly off-ratio to verify cropping behavior",[121,338,342],{"className":339,"code":340,"language":341,"meta":126,"style":126},"language-css shiki shiki-themes github-light github-dark",".product-card-img {\n  aspect-ratio: 4 \u002F 3;\n  object-fit: cover;\n  width: 100%;\n}\n","css",[128,343,344,352,373,385,401],{"__ignoreMap":126},[131,345,346,349],{"class":133,"line":134},[131,347,348],{"class":152},".product-card-img",[131,350,351],{"class":144}," {\n",[131,353,354,358,361,364,367,370],{"class":133,"line":141},[131,355,357],{"class":356},"sj4cs","  aspect-ratio",[131,359,360],{"class":144},": ",[131,362,363],{"class":356},"4",[131,365,366],{"class":144}," \u002F ",[131,368,369],{"class":356},"3",[131,371,372],{"class":144},";\n",[131,374,375,378,380,383],{"class":133,"line":182},[131,376,377],{"class":356},"  object-fit",[131,379,360],{"class":144},[131,381,382],{"class":356},"cover",[131,384,372],{"class":144},[131,386,387,390,392,395,399],{"class":133,"line":215},[131,388,389],{"class":356},"  width",[131,391,360],{"class":144},[131,393,394],{"class":356},"100",[131,396,398],{"class":397},"szBVR","%",[131,400,372],{"class":144},[131,402,403],{"class":133,"line":246},[131,404,405],{"class":144},"}\n",[121,407,409],{"className":123,"code":408,"language":125,"meta":126,"style":126},"\u003C!-- The browser reserves correct space even before the image loads -->\n\u003Cimg class=\"product-card-img\"\n     src=\"\u002Fplaceholder-product.png\"\n     alt=\"Product image placeholder\"\n     width=\"400\" height=\"300\">\n",[128,410,411,416,431,441,451],{"__ignoreMap":126},[131,412,413],{"class":133,"line":134},[131,414,415],{"class":137},"\u003C!-- The browser reserves correct space even before the image loads -->\n",[131,417,418,420,423,426,428],{"class":133,"line":141},[131,419,145],{"class":144},[131,421,422],{"class":148},"img",[131,424,425],{"class":152}," class",[131,427,156],{"class":144},[131,429,430],{"class":159},"\"product-card-img\"\n",[131,432,433,436,438],{"class":133,"line":182},[131,434,435],{"class":152},"     src",[131,437,156],{"class":144},[131,439,440],{"class":159},"\"\u002Fplaceholder-product.png\"\n",[131,442,443,446,448],{"class":133,"line":215},[131,444,445],{"class":152},"     alt",[131,447,156],{"class":144},[131,449,450],{"class":159},"\"Product image placeholder\"\n",[131,452,453,456,458,461,463,465,468],{"class":133,"line":246},[131,454,455],{"class":152},"     width",[131,457,156],{"class":144},[131,459,460],{"class":159},"\"400\"",[131,462,163],{"class":152},[131,464,156],{"class":144},[131,466,467],{"class":159},"\"300\"",[131,469,179],{"class":144},[15,471,472,473,475,476,479,480,483],{},"The ",[128,474,332],{}," CSS property works alongside ",[128,477,478],{},"width"," and ",[128,481,482],{},"height"," attributes. The attribute values set the intrinsic ratio; the CSS property ensures the element respects it even when the source image has different proportions.",[10,485,487],{"id":486},"responsive-breakpoint-planning","Responsive Breakpoint Planning",[15,489,490],{},"Placeholder images must account for how images scale across breakpoints. A 1600 px wide hero image works on desktop but wastes bandwidth on mobile. Plan sizes for each major breakpoint.",[29,492,493,509],{},[32,494,495],{},[35,496,497,500,503,506],{},[38,498,499],{},"Breakpoint",[38,501,502],{},"Hero Width",[38,504,505],{},"Card Width",[38,507,508],{},"Avatar",[48,510,511,525,539],{},[35,512,513,516,519,522],{},[53,514,515],{},"Mobile (\u003C640px)",[53,517,518],{},"640 px",[53,520,521],{},"320 px",[53,523,524],{},"64 px",[35,526,527,530,533,536],{},[53,528,529],{},"Tablet (640–1024px)",[53,531,532],{},"1024 px",[53,534,535],{},"400 px",[53,537,538],{},"96 px",[35,540,541,544,547,550],{},[53,542,543],{},"Desktop (>1024px)",[53,545,546],{},"1600 px",[53,548,549],{},"480 px",[53,551,552],{},"128 px",[15,554,555,556,559,560,563],{},"Use the ",[128,557,558],{},"\u003Cpicture>"," element or ",[128,561,562],{},"srcset"," to serve appropriate sizes:",[121,565,567],{"className":123,"code":566,"language":125,"meta":126,"style":126},"\u003Cimg srcset=\"\u002Fplaceholder-hero-640.jpg 640w,\n             \u002Fplaceholder-hero-1024.jpg 1024w,\n             \u002Fplaceholder-hero-1600.jpg 1600w\"\n     sizes=\"(max-width: 640px) 100vw,\n            (max-width: 1024px) 100vw,\n            1600px\"\n     src=\"\u002Fplaceholder-hero-1600.jpg\"\n     alt=\"Hero image placeholder\"\n     width=\"1600\" height=\"900\">\n",[128,568,569,583,588,593,603,608,613,622,631],{"__ignoreMap":126},[131,570,571,573,575,578,580],{"class":133,"line":134},[131,572,145],{"class":144},[131,574,422],{"class":148},[131,576,577],{"class":152}," srcset",[131,579,156],{"class":144},[131,581,582],{"class":159},"\"\u002Fplaceholder-hero-640.jpg 640w,\n",[131,584,585],{"class":133,"line":141},[131,586,587],{"class":159},"             \u002Fplaceholder-hero-1024.jpg 1024w,\n",[131,589,590],{"class":133,"line":182},[131,591,592],{"class":159},"             \u002Fplaceholder-hero-1600.jpg 1600w\"\n",[131,594,595,598,600],{"class":133,"line":215},[131,596,597],{"class":152},"     sizes",[131,599,156],{"class":144},[131,601,602],{"class":159},"\"(max-width: 640px) 100vw,\n",[131,604,605],{"class":133,"line":246},[131,606,607],{"class":159},"            (max-width: 1024px) 100vw,\n",[131,609,610],{"class":133,"line":256},[131,611,612],{"class":159},"            1600px\"\n",[131,614,615,617,619],{"class":133,"line":284},[131,616,435],{"class":152},[131,618,156],{"class":144},[131,620,621],{"class":159},"\"\u002Fplaceholder-hero-1600.jpg\"\n",[131,623,624,626,628],{"class":133,"line":290},[131,625,445],{"class":152},[131,627,156],{"class":144},[131,629,630],{"class":159},"\"Hero image placeholder\"\n",[131,632,633,635,637,639,641,643,645],{"class":133,"line":300},[131,634,455],{"class":152},[131,636,156],{"class":144},[131,638,160],{"class":159},[131,640,163],{"class":152},[131,642,156],{"class":144},[131,644,168],{"class":159},[131,646,179],{"class":144},[15,648,649,650,479,652,655],{},"Testing responsive images with correctly sized placeholders ensures your ",[128,651,562],{},[128,653,654],{},"sizes"," attributes work before real assets arrive.",[10,657,659],{"id":658},"communicating-with-developers-through-labels","Communicating with Developers Through Labels",[15,661,662],{},"Placeholder labels bridge the gap between design intent and implementation. A label should answer three questions: what is this, what size is it, and where does it come from?",[316,664,666],{"id":665},"label-convention","Label Convention",[121,668,672],{"className":669,"code":671,"language":220},[670],"language-text","[Section] — [Width]×[Height] — [Source]\n",[128,673,671],{"__ignoreMap":126},[15,675,676],{},"Examples:",[321,678,679,684,689],{},[324,680,681],{},[128,682,683],{},"HERO — 1600×900 — CMS",[324,685,686],{},[128,687,688],{},"PRODUCT — 400×400 — PIM",[324,690,691],{},[128,692,693],{},"AVATAR — 128×128 — Upload",[15,695,696],{},"Including the source tells developers whether the image comes from a CMS, a product information management system, or user uploads. This affects how the front-end fetches and caches the image.",[316,698,700],{"id":699},"svg-label-template","SVG Label Template",[121,702,704],{"className":123,"code":703,"language":125,"meta":126,"style":126},"\u003Csvg width=\"400\" height=\"300\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Crect width=\"100%\" height=\"100%\" fill=\"#22c55e\"\u002F>\n  \u003Ctext x=\"50%\" y=\"45%\" text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        font-family=\"monospace\" font-size=\"18\" fill=\"white\">\n    PRODUCT\n  \u003C\u002Ftext>\n  \u003Ctext x=\"50%\" y=\"58%\" text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        font-family=\"monospace\" font-size=\"14\" fill=\"rgba(255,255,255,0.8)\">\n    400 × 300 — PIM\n  \u003C\u002Ftext>\n\u003C\u002Fsvg>\n",[128,705,706,732,759,784,792,816,821,829,854,862,887,893,902],{"__ignoreMap":126},[131,707,708,710,712,714,716,718,720,722,724,726,728,730],{"class":133,"line":134},[131,709,145],{"class":144},[131,711,149],{"class":148},[131,713,153],{"class":152},[131,715,156],{"class":144},[131,717,460],{"class":159},[131,719,163],{"class":152},[131,721,156],{"class":144},[131,723,467],{"class":159},[131,725,171],{"class":152},[131,727,156],{"class":144},[131,729,176],{"class":159},[131,731,179],{"class":144},[131,733,734,736,738,740,742,744,746,748,750,752,754,757],{"class":133,"line":141},[131,735,185],{"class":144},[131,737,188],{"class":148},[131,739,153],{"class":152},[131,741,156],{"class":144},[131,743,195],{"class":159},[131,745,163],{"class":152},[131,747,156],{"class":144},[131,749,195],{"class":159},[131,751,204],{"class":152},[131,753,156],{"class":144},[131,755,756],{"class":159},"\"#22c55e\"",[131,758,212],{"class":144},[131,760,761,763,765,767,769,771,773,775,778,780,782],{"class":133,"line":182},[131,762,185],{"class":144},[131,764,220],{"class":148},[131,766,223],{"class":152},[131,768,156],{"class":144},[131,770,228],{"class":159},[131,772,231],{"class":152},[131,774,156],{"class":144},[131,776,777],{"class":159},"\"45%\"",[131,779,238],{"class":152},[131,781,156],{"class":144},[131,783,243],{"class":159},[131,785,786,788,790],{"class":133,"line":215},[131,787,249],{"class":152},[131,789,156],{"class":144},[131,791,243],{"class":159},[131,793,794,796,798,801,803,805,808,810,812,814],{"class":133,"line":246},[131,795,259],{"class":152},[131,797,156],{"class":144},[131,799,800],{"class":159},"\"monospace\"",[131,802,267],{"class":152},[131,804,156],{"class":144},[131,806,807],{"class":159},"\"18\"",[131,809,204],{"class":152},[131,811,156],{"class":144},[131,813,279],{"class":159},[131,815,179],{"class":144},[131,817,818],{"class":133,"line":256},[131,819,820],{"class":144},"    PRODUCT\n",[131,822,823,825,827],{"class":133,"line":284},[131,824,293],{"class":144},[131,826,220],{"class":148},[131,828,179],{"class":144},[131,830,831,833,835,837,839,841,843,845,848,850,852],{"class":133,"line":290},[131,832,185],{"class":144},[131,834,220],{"class":148},[131,836,223],{"class":152},[131,838,156],{"class":144},[131,840,228],{"class":159},[131,842,231],{"class":152},[131,844,156],{"class":144},[131,846,847],{"class":159},"\"58%\"",[131,849,238],{"class":152},[131,851,156],{"class":144},[131,853,243],{"class":159},[131,855,856,858,860],{"class":133,"line":300},[131,857,249],{"class":152},[131,859,156],{"class":144},[131,861,243],{"class":159},[131,863,865,867,869,871,873,875,878,880,882,885],{"class":133,"line":864},10,[131,866,259],{"class":152},[131,868,156],{"class":144},[131,870,800],{"class":159},[131,872,267],{"class":152},[131,874,156],{"class":144},[131,876,877],{"class":159},"\"14\"",[131,879,204],{"class":152},[131,881,156],{"class":144},[131,883,884],{"class":159},"\"rgba(255,255,255,0.8)\"",[131,886,179],{"class":144},[131,888,890],{"class":133,"line":889},11,[131,891,892],{"class":144},"    400 × 300 — PIM\n",[131,894,896,898,900],{"class":133,"line":895},12,[131,897,293],{"class":144},[131,899,220],{"class":148},[131,901,179],{"class":144},[131,903,905,907,909],{"class":133,"line":904},13,[131,906,303],{"class":144},[131,908,149],{"class":148},[131,910,179],{"class":144},[10,912,914],{"id":913},"design-tool-integration","Design Tool Integration",[316,916,918],{"id":917},"figma","Figma",[15,920,921],{},"Figma supports image fills on any frame or shape. To maintain placeholder consistency across a project:",[923,924,925,928,931],"ol",{},[324,926,927],{},"Create a component library with placeholder frames at standard sizes",[324,929,930],{},"Use Figma variables for placeholder colors so they stay in sync",[324,932,933,934,938],{},"Plugin recommendation: ",[935,936,937],"strong",{},"Content Reel"," for bulk-inserting labeled placeholders",[316,940,942],{"id":941},"sketch","Sketch",[15,944,945],{},"Sketch handles placeholders through shared styles and symbols. Create a symbol for each image slot type (hero, card, avatar) with preset dimensions and a text override for the label.",[316,947,949],{"id":948},"adobe-xd","Adobe XD",[15,951,952],{},"XD's Repeat Grid feature pairs well with placeholder images. Drop a set of correctly sized placeholder images into the grid, and XD repeats them across the layout automatically.",[10,954,956],{"id":955},"replacing-placeholders-in-production","Replacing Placeholders in Production",[15,958,959],{},"The transition from placeholders to production images is a common failure point. Use this checklist to prevent issues:",[923,961,962,975,984,990,1000,1006],{},[324,963,964,967,968,971,972,974],{},[935,965,966],{},"Audit every image slot"," — list every ",[128,969,970],{},"\u003Cimg>",", ",[128,973,558],{},", and background-image in the project",[324,976,977,980,981],{},[935,978,979],{},"Verify dimensions"," — confirm production images match placeholder dimensions or use ",[128,982,983],{},"object-fit: cover",[324,985,986,989],{},[935,987,988],{},"Compress assets"," — run all production images through a compression tool before deploying",[324,991,992,995,996,999],{},[935,993,994],{},"Check lazy loading"," — ensure ",[128,997,998],{},"loading=\"lazy\""," works correctly with the new source URLs",[324,1001,1002,1005],{},[935,1003,1004],{},"Validate alt text"," — placeholder alt text like \"Placeholder hero image\" must be replaced with descriptive alt text",[324,1007,1008,1011],{},[935,1009,1010],{},"Remove placeholder URLs"," — scan for any references to placeholder API domains",[121,1013,1017],{"className":1014,"code":1015,"language":1016,"meta":126,"style":126},"language-bash shiki shiki-themes github-light github-dark","# Quick grep for leftover placeholder URLs\ngrep -r \"picsum.photos\\|placehold.co\\|via.placeholder.com\" app\u002F\n","bash",[128,1018,1019,1024],{"__ignoreMap":126},[131,1020,1021],{"class":133,"line":134},[131,1022,1023],{"class":137},"# Quick grep for leftover placeholder URLs\n",[131,1025,1026,1029,1032,1035],{"class":133,"line":141},[131,1027,1028],{"class":152},"grep",[131,1030,1031],{"class":356}," -r",[131,1033,1034],{"class":159}," \"picsum.photos\\|placehold.co\\|via.placeholder.com\"",[131,1036,1037],{"class":159}," app\u002F\n",[10,1039,1041],{"id":1040},"key-takeaways","Key Takeaways",[321,1043,1044,1047,1050,1053,1056,1059],{},[324,1045,1046],{},"Color-coded placeholders make page structure visible at a glance",[324,1048,1049],{},"Enforce one aspect ratio per component type and document it",[324,1051,1052],{},"Plan placeholder sizes for mobile, tablet, and desktop breakpoints",[324,1054,1055],{},"Label placeholders with section name, dimensions, and image source",[324,1057,1058],{},"Use design tool components and variables to keep placeholders consistent across a project",[324,1060,1061],{},"Follow a structured checklist when transitioning from placeholders to production images",[10,1063,1065],{"id":1064},"try-it-yourself","Try It Yourself",[15,1067,1068,1069,1074],{},"Create labeled, color-coded placeholder images with exact dimensions using our free ",[1070,1071,1073],"a",{"href":1072},"\u002Ftools\u002Fplaceholder-image","Placeholder Image Generator",". Set width, height, background color, and overlay text in seconds.",[10,1076,1078],{"id":1077},"related-guides","Related Guides",[321,1080,1081,1087,1093],{},[324,1082,1083],{},[1070,1084,1086],{"href":1085},"\u002Fguides\u002Fplaceholder-image-guide","Placeholder Image Guide: When and How to Use Dummy Images",[324,1088,1089],{},[1070,1090,1092],{"href":1091},"\u002Fguides\u002Fdesign-prototyping-tools","Design Prototyping Tools: Essential Utilities for Rapid Prototyping",[324,1094,1095],{},[1070,1096,1098],{"href":1097},"\u002Fguides\u002Fimage-to-base64-guide","Image to Base64: When to Embed Images in HTML and CSS",[1100,1101,1102],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":126,"searchDepth":141,"depth":141,"links":1104},[1105,1106,1107,1110,1111,1115,1120,1121,1122,1123],{"id":12,"depth":141,"text":13},{"id":23,"depth":141,"text":24},{"id":310,"depth":141,"text":311,"children":1108},[1109],{"id":318,"depth":182,"text":319},{"id":486,"depth":141,"text":487},{"id":658,"depth":141,"text":659,"children":1112},[1113,1114],{"id":665,"depth":182,"text":666},{"id":699,"depth":182,"text":700},{"id":913,"depth":141,"text":914,"children":1116},[1117,1118,1119],{"id":917,"depth":182,"text":918},{"id":941,"depth":182,"text":942},{"id":948,"depth":182,"text":949},{"id":955,"depth":141,"text":956},{"id":1040,"depth":141,"text":1041},{"id":1064,"depth":141,"text":1065},{"id":1077,"depth":141,"text":1078},"2026-05-28","Professional techniques for using mockup images effectively. Size conventions, color coding, and workflow tips for designers.","md",{"immutable":1128,"keywords":1129},true,[1130,1131],"placeholder-image","mockup-image-best-practices","\u002Fguides\u002Fmockup-image-best-practices",{"title":5,"description":1125},"guides\u002Fmockup-image-best-practices","Eob3ARHHhiVdZ1aoEVxs2MDG5aWlqcQXKy3lsxLKzzY",1780401328928]