{"compiledCode":"\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _react = require('react'); var _react2 = _interopRequireDefault(_react);\n\n function GlossaryPage() {\n  return (\n    _react2.default.createElement('div', { className: \"pd-page pd-glossary reading-picdrome\"  ,}\n      , _react2.default.createElement('style', null, \"\\n.reading-picdrome{--reading-ground:var(--c1gb4l3-runtime-bg, #f6f1e8);--reading-ink:var(--c1gb4l3-runtime-text, #2d3834);--reading-accent:var(--c1gb4l3-runtime-accent, #536956);--reading-soft:var(--c1gb4l3-runtime-panel, #e1e7d9);max-width:1120px!important;width:100%;margin:0 auto!important;padding:26px 40px 80px!important;background:var(--reading-ground)!important;color:var(--reading-ink)!important;font:16px/1.75 var(--c1gb4l3-font-body, Arial, sans-serif)!important;overflow-wrap:anywhere}\\n.reading-picdrome,.reading-picdrome *{box-sizing:border-box;min-width:0}\\n.reading-picdrome .reading-masthead{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:0 0 24px;margin:0 0 44px;border-bottom:1px solid var(--reading-accent)}\\n.reading-picdrome .reading-brand{font:24px/1.25 var(--c1gb4l3-font-heading, Georgia, serif);letter-spacing:-.5px;text-decoration:none;color:var(--reading-ink)!important}\\n.reading-picdrome .reading-navigation{display:flex;gap:12px 24px;flex-wrap:wrap;font-size:13px}.reading-picdrome .reading-navigation a{padding:10px 0}\\n.reading-picdrome a{color:var(--reading-accent);text-underline-offset:4px;text-decoration-thickness:1px}\\n.reading-picdrome :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--reading-accent)!important;outline-offset:4px}\\n.reading-picdrome h1{font:clamp(34px,4.8vw,56px)/1.12 var(--c1gb4l3-font-heading, Georgia, serif)!important;color:var(--reading-ink)!important;letter-spacing:-1.5px;max-width:23ch;margin:0 0 25px!important;overflow-wrap:normal}\\n.reading-picdrome h2{font:clamp(25px,3vw,34px)/1.22 var(--c1gb4l3-font-heading, Georgia, serif)!important;color:var(--reading-ink)!important;letter-spacing:-.6px;margin:42px 0 18px!important}\\n.reading-picdrome h3{font-size:19px!important;line-height:1.4!important;color:var(--reading-ink);margin:20px 0 10px}\\n.reading-picdrome p{max-width:78ch;line-height:1.8!important;margin-bottom:18px}\\n.reading-picdrome :is(.lead,.lede,.intro){font-size:18px!important;line-height:1.75!important;max-width:70ch}\\n.reading-picdrome :is(ul,ol){line-height:1.8;padding-left:24px}.reading-picdrome li{margin:7px 0}\\n.reading-picdrome .reading-hero{background:var(--reading-soft)!important;border-radius:4px!important;border:0!important;padding:40px 34px!important;margin-bottom:38px!important}.reading-picdrome .reading-hero h1{max-width:23ch}.reading-picdrome :is(section,article,nav){scroll-margin-top:24px}.reading-picdrome > section{margin-top:34px!important}\\n.reading-picdrome :is(pre,code){font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.reading-picdrome pre{padding:20px;overflow:auto;background:var(--reading-soft);border-radius:4px}\\n.reading-picdrome .reading-table{overflow-x:auto;max-width:100%;margin:24px 0;border:1px solid var(--reading-accent);border-radius:4px}.reading-picdrome .reading-table table{width:100%;min-width:560px;margin:0!important;border-collapse:collapse!important;font-size:14px;line-height:1.6}.reading-picdrome :is(th,td){text-align:left;padding:14px 16px!important;border-bottom:1px solid var(--reading-soft);vertical-align:top}.reading-picdrome th{background:var(--reading-soft)!important;color:var(--reading-ink)!important;font-weight:700}\\n.reading-picdrome :is(button,summary){min-height:44px;cursor:pointer;font:inherit}.reading-picdrome summary{padding:12px 0;font-weight:600}.reading-picdrome details{border-top:1px solid var(--reading-accent);padding:8px 0;margin:10px 0}\\n.reading-picdrome :is(input,select,textarea){max-width:100%;min-height:44px;font:inherit;line-height:1.5;padding:11px 12px;border:1px solid var(--reading-accent);border-radius:4px;background:var(--reading-ground);color:var(--reading-ink)}\\n.reading-picdrome a[style*=\\\"background\\\"]{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;padding:12px 18px!important;background:var(--reading-ink)!important;color:var(--reading-ground)!important;border-color:var(--reading-ink)!important;border-radius:4px!important;font-size:14px!important;text-decoration:none!important;line-height:1.5!important}\\n.reading-picdrome :is(img,svg,video,iframe){max-width:100%}.reading-picdrome .reading-navigation a:hover{text-decoration-thickness:2px}\\n@media(max-width:720px){.reading-picdrome{padding:22px 22px 56px!important;font-size:16px!important}.reading-picdrome .reading-masthead{align-items:flex-start;gap:20px;margin-bottom:34px}.reading-picdrome .reading-brand{font-size:21px;max-width:12ch}.reading-picdrome .reading-navigation{justify-content:flex-end;gap:4px 14px;max-width:170px;font-size:12px}.reading-picdrome h1{font-size:36px!important;letter-spacing:-.8px}.reading-picdrome h2{font-size:28px!important;margin-top:32px!important}.reading-picdrome section[style*=\\\"grid\\\"],.reading-picdrome div[style*=\\\"grid-template-columns\\\"]{grid-template-columns:1fr!important}.reading-picdrome section[style*=\\\"padding\\\"],.reading-picdrome article[style*=\\\"padding\\\"]{padding-left:18px!important;padding-right:18px!important}}\\n\\n.reading-picdrome a:is([class*=\\\"btn\\\"],[class*=\\\"button\\\"],[class*=\\\"cta\\\"]){background:var(--c1gb4l3-runtime-text, #2d3834)!important;color:var(--c1gb4l3-runtime-bg, #f6f1e8)!important;border-color:var(--c1gb4l3-runtime-text, #2d3834)!important;min-height:44px;display:inline-flex;align-items:center;padding:12px 18px;text-decoration:none}\\n\\n.reading-picdrome{width:100%;max-width:100%!important;min-width:0;box-sizing:border-box} .reading-picdrome .reading-masthead,.reading-picdrome .masthead{display:none} .reading-picdrome .reading-brand{font-family:var(--c1gb4l3-font-heading,Arial,sans-serif)} .reading-picdrome h1{font-weight:750!important;letter-spacing:-.045em} .reading-picdrome h2{font-weight:650!important} .reading-picdrome :is(code,pre,.eyebrow,.number){font-family:var(--c1gb4l3-font-mono,monospace)}\\n\")\n      , _react2.default.createElement('header', { className: \"reading-masthead\",}, _react2.default.createElement('a', { className: \"reading-brand\", href: \"/\",}, \"Picdrome\"), _react2.default.createElement('nav', { className: \"reading-navigation\", 'aria-label': \"Reading navigation\" ,}, _react2.default.createElement('a', { href: \"/\",}, \"Home\"), _react2.default.createElement('a', { href: \"/use-cases\",}, \"Start reading\" ), _react2.default.createElement('a', { href: \"/ai-image-disclosure\",}, \"Standards\")))\n\n      , _react2.default.createElement('style', null, \"\\n        .reading-picdrome.pd-glossary {\\n          --pd-ink:var(--c1gb4l3-runtime-text, #2d3834); --pd-slate:var(--c1gb4l3-runtime-text, #2d3834); --pd-muted:var(--c1gb4l3-runtime-muted, #59635c);\\n          --pd-line:var(--c1gb4l3-runtime-border, #d6d5c9); --pd-bg:var(--c1gb4l3-runtime-bg, #f6f1e8); --pd-soft:var(--c1gb4l3-runtime-panel, #ece6dc);\\n          --pd-brand:var(--c1gb4l3-runtime-accent, #536956); --pd-brand-dark:var(--c1gb4l3-runtime-accent, #536956); --pd-brand-soft:var(--c1gb4l3-runtime-accent-soft, #e4eadf);\\n          --pd-accent:var(--c1gb4l3-runtime-accent, #536956); --pd-warn:var(--c1gb4l3-runtime-text, #2d3834); --pd-warn-bg:var(--c1gb4l3-runtime-panel, #ece6dc);\\n          font-family:-apple-system,BlinkMacSystemFont,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif;\\n          line-height:1.6; color:var(--pd-ink); background:var(--pd-bg);\\n          max-width:900px; margin:0 auto; padding:2rem 1.25rem 4rem;\\n        }\\n        .reading-picdrome.pd-glossary h1 { font-size:2rem; line-height:1.2; margin:0 0 .5rem; }\\n        .reading-picdrome.pd-glossary h2 { font-size:1.4rem; line-height:1.25; margin:2.5rem 0 1rem; }\\n        .reading-picdrome.pd-glossary h3 { font-size:1.08rem; margin:1.5rem 0 .35rem; }\\n        .reading-picdrome.pd-glossary p { margin:0 0 1rem; }\\n        .reading-picdrome.pd-glossary .pd-lede { font-size:1.18rem; color:var(--pd-muted); margin:0 0 1.5rem; }\\n        .reading-picdrome.pd-glossary a { color:var(--pd-brand-dark); }\\n        .reading-picdrome.pd-glossary .pd-grid {\\n          display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));\\n          gap:1rem; margin:1.25rem 0;\\n        }\\n        .reading-picdrome.pd-glossary .pd-card {\\n          border:1px solid var(--pd-line); border-radius:12px;\\n          padding:1rem 1.1rem; background:var(--pd-bg);\\n        }\\n        .reading-picdrome.pd-glossary .pd-card h3 { margin-top:0; }\\n        .reading-picdrome.pd-glossary .pd-card p { margin-bottom:.5rem; }\\n        .reading-picdrome.pd-glossary .pd-where {\\n          font-size:.9rem; color:var(--pd-muted); margin:0;\\n        }\\n        .reading-picdrome.pd-glossary .pd-where strong { color:var(--pd-slate); }\\n        .reading-picdrome.pd-glossary .pd-callout {\\n          border-left:4px solid var(--pd-brand); background:var(--pd-brand-soft);\\n          padding:1rem 1.1rem; border-radius:8px; margin:1.5rem 0;\\n        }\\n        .reading-picdrome.pd-glossary .pd-callout p:last-child { margin-bottom:0; }\\n        .reading-picdrome.pd-glossary .pd-cta {\\n          display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;\\n          margin:1.5rem 0; padding:1.25rem; border:1px solid var(--pd-line);\\n          border-radius:12px; background:var(--pd-soft);\\n        }\\n        .reading-picdrome.pd-glossary .pd-btn {\\n          background:var(--pd-brand); color:var(--c1gb4l3-runtime-action-fg, #ffffff); border-radius:10px;\\n          padding:.7rem 1.1rem; font-weight:600; text-decoration:none;\\n          display:inline-block;\\n        }\\n        .reading-picdrome.pd-glossary .pd-btn:hover { background:var(--pd-brand-dark); }\\n        .reading-picdrome.pd-glossary .pd-btn-secondary {\\n          border:1px solid var(--pd-line); color:var(--pd-ink); border-radius:10px;\\n          padding:.7rem 1.1rem; font-weight:600; text-decoration:none;\\n          display:inline-block; background:var(--pd-bg);\\n        }\\n        .reading-picdrome.pd-glossary .pd-faq h3 { margin-bottom:.25rem; }\\n        .reading-picdrome.pd-glossary .pd-summary {\\n          margin-top:2.5rem; padding:1.25rem; border:1px solid var(--pd-line);\\n          border-radius:12px; background:var(--pd-soft); color:var(--pd-slate);\\n        }\\n        .reading-picdrome.pd-glossary .pd-summary h2 { margin-top:0; }\\n        .reading-picdrome.pd-glossary table {\\n          width:100%; border-collapse:collapse; margin:1rem 0; font-size:.95rem;\\n        }\\n        .reading-picdrome.pd-glossary th, .reading-picdrome.pd-glossary td {\\n          border:1px solid var(--pd-line); padding:.6rem .75rem; text-align:left;\\n          vertical-align:top;\\n        }\\n        .reading-picdrome.pd-glossary th { background:var(--pd-soft); }\\n      \\n.reading-picdrome{width:100%;max-width:100%!important;min-width:0;box-sizing:border-box} .reading-picdrome .reading-masthead,.reading-picdrome .masthead{display:none} .reading-picdrome .reading-brand{font-family:var(--c1gb4l3-font-heading,Arial,sans-serif)} .reading-picdrome h1{font-weight:750!important;letter-spacing:-.045em} .reading-picdrome h2{font-weight:650!important} .reading-picdrome :is(code,pre,.eyebrow,.number){font-family:var(--c1gb4l3-font-mono,monospace)}\\n\")\n\n      , _react2.default.createElement('header', { className: \"reading-hero\",}\n        , _react2.default.createElement('h1', null, \"Visual style glossary for non-designers\"    )\n        , _react2.default.createElement('p', { className: \"pd-lede\",}, \"Plain-English definitions of the image and design terms you'll run into when choosing website visuals. No jargon, no design degree required — just what each term means and where you'd actually use it on a site.\"\n\n\n\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-label': \"Who this glossary is for\"    ,}\n        , _react2.default.createElement('h2', null, \"Who this is for\"   )\n        , _react2.default.createElement('p', null, \"This page is written for people who build or commission websites but don't think of themselves as designers: solo founders, local business owners, coaches, marketers, and anyone choosing images for a page and wanting to understand what the words mean. If you've ever read \\\"negative space\\\" or \\\"royalty-free\\\" and quietly nodded along, this is for you.\"\n\n\n\n\n\n        )\n        , _react2.default.createElement('p', null, \"You don't need to read it top to bottom. Skim to the term you're stuck on, get the one- or two-sentence definition, and follow the links when you want examples or more depth.\"\n\n\n\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-label': \"Image style terms\"  ,}\n        , _react2.default.createElement('h2', null, \"Image style terms\"  )\n        , _react2.default.createElement('p', null, \"These describe what an image looks like and how it behaves on a page. Knowing them makes it much easier to pick the right picture — and to say what you want when something looks off.\"\n\n\n\n        )\n\n        , _react2.default.createElement('div', { className: \"pd-grid\", 'aria-label': \"Image style term cards\"   ,}\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Editorial / lifestyle photo\"   )\n            , _react2.default.createElement('p', null, \"A photo that looks candid and natural — people doing real things in real settings — rather than posed and obviously staged.\"\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" an About page or a homepage section where you want the site to feel human and approachable.\"\n\n            )\n          )\n\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Flat-lay\")\n            , _react2.default.createElement('p', null, \"An image shot straight down from above, with objects arranged neatly on a flat surface. Common for products, tools, and food.\"\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" product or shop pages and clean backgrounds — see\"\n                , \" \"\n              , _react2.default.createElement('a', { href: \"/blog/product-vs-lifestyle-images-ecommerce\",}, \"product photos vs free lifestyle images\"     ), \".\"\n            )\n          )\n\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Negative space\" )\n            , _react2.default.createElement('p', null, \"The empty area around the main subject. It gives the eye somewhere to rest and leaves room to drop text on top.\"\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" any hero or banner where a headline needs to sit over the image and stay readable.\"\n\n            )\n          )\n\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Bokeh / depth of field\"    )\n            , _react2.default.createElement('p', null, \"\\\"Depth of field\\\" is how much of a photo is in focus. A shallow depth of field blurs the background into soft circles of light — that blur is called bokeh.\"\n\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" a portrait or product shot where you want the subject sharp and the background gently out of focus.\"\n\n            )\n          )\n\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Gradient background\" )\n            , _react2.default.createElement('p', null, \"A smooth blend from one color to another, with no subject to compete with. Calm, modern, and easy to put text on.\"\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" section backgrounds and hero areas — browse\"\n                , \" \"\n              , _react2.default.createElement('a', { href: \"/blog/abstract-gradient-backgrounds\",}, \"why gradient and abstract backgrounds work\"     ), \".\"\n            )\n          )\n\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Hero image\" )\n            , _react2.default.createElement('p', null, \"The large, attention-grabbing image at the top of a page — usually the first thing visitors see, often with a headline over it.\"\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" the top of a homepage or landing page — see\"\n                , \" \"\n              , _react2.default.createElement('a', { href: \"/blog/homepage-hero-image-mistakes\",}, \"five homepage hero image mistakes\"    ), \".\"\n            )\n          )\n\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Overlay / scrim\"  )\n            , _react2.default.createElement('p', null, \"A semi-transparent layer of color (often dark) placed over an image so text on top stays readable. A \\\"scrim\\\" is the same idea — a tint that dims the picture just enough.\"\n\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" any hero where your headline would otherwise get lost against a busy photo.\"\n\n            )\n          )\n\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Aspect ratio\" )\n            , _react2.default.createElement('p', null, \"The shape of an image — its width compared to its height, like 16:9 (wide) or 1:1 (square). Match it to the slot or the image crops badly.\"\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" picking a wide image for a banner versus a square one for a card or social preview.\"\n\n            )\n          )\n\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Resolution / DPI\"  )\n            , _react2.default.createElement('p', null, \"Resolution is how many pixels an image has (its detail). DPI (\\\"dots per inch\\\") matters for print; on screens, what counts is having enough pixels so the image looks crisp at the size you display it.\"\n\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" checking a hero is large enough to stay sharp on big screens without looking blurry.\"\n\n            )\n          )\n\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Vector vs raster\"  )\n            , _react2.default.createElement('p', null, \"Raster images are made of pixels (photos, JPG, PNG) and blur if pushed too large. Vector images are drawn from math (SVG) and stay crisp at any size — best for logos, icons, and simple shapes.\"\n\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" a vector for an icon that must look sharp everywhere; a raster photo for a realistic hero.\"\n\n            )\n          )\n\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, \"Illustration vs 3D render\"   )\n            , _react2.default.createElement('p', null, \"An illustration is drawn or painted (flat or hand-styled). A 3D render is built in software to look like a three-dimensional object with light and shadow. Both are non-photographic, but they feel different.\"\n\n\n\n            )\n            , _react2.default.createElement('p', { className: \"pd-where\",}\n              , _react2.default.createElement('strong', null, \"Where you'd use it:\"   ), \" choosing the look that fits your brand — compare them on\"\n                  , \" \"\n              , _react2.default.createElement('a', { href: \"/blog/photo-vs-illustration-vs-3d\",}, \"photo vs illustration vs 3D\"    ), \".\"\n            )\n          )\n        )\n\n        , _react2.default.createElement('p', null, \"Not sure which look fits your site? The\"\n                 , \" \"\n          , _react2.default.createElement('a', { href: \"/blog/choose-a-visual-style-for-your-website\",}, \"how to choose a visual style\"     ), \" walks through choosing a consistent style for every page.\"\n\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-label': \"Licensing terms\" ,}\n        , _react2.default.createElement('h2', null, \"Licensing terms\" )\n        , _react2.default.createElement('p', null, \"Licensing language is where a lot of people get caught out, because the terms sound similar but mean different things. Here's what they actually mean — and how Picdrome words its own terms.\"\n\n\n\n        )\n\n        , _react2.default.createElement('div', { className: \"reading-table\", tabIndex: 0, role: \"region\", 'aria-label': \"Scrollable data table\"  ,}, _react2.default.createElement('table', null\n          , _react2.default.createElement('thead', null\n            , _react2.default.createElement('tr', null\n              , _react2.default.createElement('th', null, \"Term\")\n              , _react2.default.createElement('th', null, \"What it means in plain English\"     )\n            )\n          )\n          , _react2.default.createElement('tbody', null\n            , _react2.default.createElement('tr', null\n              , _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"License\"))\n              , _react2.default.createElement('td', null, \"The rules that say what you're allowed to do with an image — who can use it, where, and any limits. You always use an image under some license, even a free one.\"\n\n\n\n              )\n            )\n            , _react2.default.createElement('tr', null\n              , _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"Attribution\"))\n              , _react2.default.createElement('td', null, \"Crediting the source, usually with a line of text or a link. Some licenses require it; some don't. Always check before you assume.\"\n\n\n              )\n            )\n            , _react2.default.createElement('tr', null\n              , _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"Royalty-free\"))\n              , _react2.default.createElement('td', null, \"You pay (or qualify) once and then don't owe a per-use royalty each time you use the image. It does \"\n\n                       , _react2.default.createElement('em', null, \"not\"), \" mean free of cost, and it does not mean \\\"no rules\\\" — there's still a license.\"\n\n              )\n            )\n            , _react2.default.createElement('tr', null\n              , _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"Public domain\" ))\n              , _react2.default.createElement('td', null, \"Work that is no longer (or never was) under copyright, so anyone can use it freely. This is a specific legal status — most \\\"free\\\" images are \"\n\n\n                 , _react2.default.createElement('em', null, \"not\"), \" public domain.\"\n              )\n            )\n            , _react2.default.createElement('tr', null\n              , _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"CC0\"))\n              , _react2.default.createElement('td', null, \"A specific Creative Commons tool a rights-holder uses to waive their rights as far as the law allows, putting work close to public domain. It is its own thing — don't assume an image is CC0 unless it says so.\"\n\n\n\n              )\n            )\n            , _react2.default.createElement('tr', null\n              , _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"Commercial use\" ))\n              , _react2.default.createElement('td', null, \"Using an image for business purposes — your company website, a client site, marketing, a product you sell. Some licenses allow it; some limit it to personal use only.\"\n\n\n\n              )\n            )\n            , _react2.default.createElement('tr', null\n              , _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"Model / property release\"   ))\n              , _react2.default.createElement('td', null, \"A signed permission. A \"\n                    , _react2.default.createElement('em', null, \"model release\" ), \" is from a recognizable person whose likeness appears; a \"\n                     , _react2.default.createElement('em', null, \"property release\" ), \" is from the owner of private property or a distinctive object shown. Releases are what make it safe to use such images commercially.\"\n\n\n              )\n            )\n          )\n        ))\n\n        , _react2.default.createElement('p', null, \"These three get mixed up constantly, so it's worth being blunt:\"\n                    , \" \"\n          , _react2.default.createElement('strong', null, \"free is not the same as royalty-free, and neither is the same as public domain.\"\n           ), \" \\\"Free\\\" describes cost. \\\"Royalty-free\\\" describes how you pay. \\\"Public domain\\\" describes copyright status. An image can be free to use and still come with a license and rules. We unpack the difference in\"\n\n                       , \" \"\n          , _react2.default.createElement('a', { href: \"/blog/free-vs-royalty-free-vs-public-domain\",}, \"free vs royalty-free vs public domain\"     ), \".\"\n        )\n\n        , _react2.default.createElement('div', { className: \"pd-callout\",}\n          , _react2.default.createElement('p', null\n            , _react2.default.createElement('strong', null, \"How Picdrome words it.\"   ), \" Picdrome originals use the Picdrome License; images from other sources keep their own terms. We never call an image \\\"public domain\\\", \\\"CC0\\\", \\\"royalty-free\\\", or \\\"unrestricted\\\" unless its source says so — those terms mean specific things. For any image you use, read the current license at its source. This page is a plain-English guide, not legal advice.\"\n\n\n\n          )\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-label': \"When to use this glossary\"    ,}\n        , _react2.default.createElement('h2', null, \"When to use this\"   )\n        , _react2.default.createElement('p', null, \"Reach for this glossary at the moment you're choosing an image and hit a word you're unsure of — in a category page, a brief from a designer, or a stock site's license. Read the definition, follow a link if you want examples, and get back to building. You'll mostly need it in the early \\\"what should this look like and am I allowed to use it\\\" stage.\"\n\n\n\n\n\n        )\n      )\n\n      , _react2.default.createElement('section', { className: \"pd-cta\", 'aria-label': \"Next steps\" ,}\n        , _react2.default.createElement('a', { className: \"pd-btn\", href: \"/blog/choose-a-visual-style-for-your-website\",}, \"Choose a visual style for your site\"      )\n        , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/categories\",}, \"Image categories and styles\"   )\n        , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/blog/free-vs-royalty-free-vs-public-domain\",}, \"Free vs royalty-free vs public domain\"     )\n      )\n\n      , _react2.default.createElement('section', { className: \"pd-faq\", 'aria-label': \"Frequently asked questions\"  ,}\n        , _react2.default.createElement('h2', null, \"FAQ\")\n\n        , _react2.default.createElement('h3', null, \"What is a hero image?\"    )\n        , _react2.default.createElement('p', null, \"The hero image is the large, prominent image at the top of a page — usually the first thing a visitor sees, often with a headline and a button over it. A good hero leaves room for that text and stays sharp on big screens. See\"\n\n\n                        , \" \"\n          , _react2.default.createElement('a', { href: \"/blog/homepage-hero-image-mistakes\",}, \"five homepage hero image mistakes\"    ), \".\"\n        )\n\n        , _react2.default.createElement('h3', null, \"What does flat-lay mean?\"   )\n        , _react2.default.createElement('p', null, \"Flat-lay means the photo is taken straight down from above, with objects laid out neatly on a flat surface. It's common for products, tools, and food, and makes for clean, organized images. Browse examples in\"\n\n\n                 , \" \"\n          , _react2.default.createElement('a', { href: \"/blog/product-vs-lifestyle-images-ecommerce\",}, \"product photos vs free lifestyle images\"     ), \".\"\n        )\n\n        , _react2.default.createElement('h3', null, \"What is negative space and why does it matter?\"        )\n        , _react2.default.createElement('p', null, \"Negative space is the empty area around the main subject of an image. It matters because it gives the eye somewhere to rest and leaves room to place a headline or button on top without crowding the picture — which is exactly what you want in a hero or banner.\"\n\n\n\n\n        )\n\n        , _react2.default.createElement('h3', null, \"Is royalty-free the same as free?\"     )\n        , _react2.default.createElement('p', null, \"No. \\\"Royalty-free\\\" means you don't owe a per-use royalty each time you use an image — but it can still cost money up front and always comes with a license and rules. \\\"Free\\\" just means no cost. They're different ideas, and neither one means \\\"public domain.\\\" More in\"\n\n\n\n             , \" \"\n          , _react2.default.createElement('a', { href: \"/blog/free-vs-royalty-free-vs-public-domain\",}, \"free vs royalty-free vs public domain\"     ), \".\"\n        )\n\n        , _react2.default.createElement('h3', null, \"What is a model release?\"    )\n        , _react2.default.createElement('p', null, \"A model release is a signed permission from a recognizable person to use images of them — important for using such photos commercially. Check whether a stock or photo source holds releases for the people shown. An AI-generated image can still resemble a real person, so if one looks like someone identifiable, choose a different image.\"\n\n\n\n\n        )\n      )\n\n      , _react2.default.createElement('section', { className: \"pd-summary\", 'aria-label': \"Plain-language summary\" ,}\n        , _react2.default.createElement('h2', null, \"In plain language\"  )\n        , _react2.default.createElement('p', null, \"This is a glossary of image-style and licensing terms for non-designers, each explained in one or two sentences with a real website example. Style terms cover things like hero images, negative space, flat-lay, gradient backgrounds, aspect ratio, and the difference between vectors, photos, illustrations, and 3D renders. Licensing terms cover license, attribution, royalty-free, public domain, CC0, commercial use, and model/property releases — with the key point that free, royalty-free, and public domain are three different things. Picdrome also offers original AI-generated images; for any image you use, the current license at its source controls. This is a plain-English guide, not legal advice. To go further, choose a\"\n\n\n\n\n\n\n\n\n              , \" \"\n          , _react2.default.createElement('a', { href: \"/blog/choose-a-visual-style-for-your-website\",}, \"visual style\" ), \" or read about\"   , \" \"\n          , _react2.default.createElement('a', { href: \"/categories\",}, \"image categories and styles\"   ), \".\"\n        )\n      )\n    )\n  );\n} exports.default = GlossaryPage;"}