{"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 BusinessWebsiteImagesGuidePage() {\n return (\n _react2.default.createElement('div', { className: \"pd-page pd-guides-business-website-images 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-guides-business-website-images {\\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 }\\n .reading-picdrome.pd-guides-business-website-images * { box-sizing:border-box; }\\n .reading-picdrome.pd-guides-business-website-images .pd-wrap {\\n max-width:900px; margin:0 auto; padding:2rem 1.25rem 4rem;\\n }\\n .reading-picdrome.pd-guides-business-website-images h1 {\\n font-size:2.1rem; line-height:1.2; margin:0 0 .75rem; letter-spacing:-0.01em;\\n }\\n .reading-picdrome.pd-guides-business-website-images h2 {\\n font-size:1.45rem; line-height:1.25; margin:2.5rem 0 .75rem; letter-spacing:-0.01em;\\n padding-top:.5rem;\\n }\\n .reading-picdrome.pd-guides-business-website-images h3 {\\n font-size:1.1rem; margin:1.5rem 0 .4rem;\\n }\\n .reading-picdrome.pd-guides-business-website-images p { margin:0 0 1rem; }\\n .reading-picdrome.pd-guides-business-website-images .pd-lede {\\n font-size:1.2rem; color:var(--pd-muted); margin:0 0 1.5rem; max-width:42rem;\\n }\\n .reading-picdrome.pd-guides-business-website-images a { color:var(--pd-brand-dark); }\\n .reading-picdrome.pd-guides-business-website-images a:hover { color:var(--pd-brand); }\\n .reading-picdrome.pd-guides-business-website-images .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-guides-business-website-images .pd-card {\\n border:1px solid var(--pd-line); border-radius:12px; padding:1rem 1.1rem;\\n background:var(--pd-bg);\\n }\\n .reading-picdrome.pd-guides-business-website-images .pd-card h3 { margin-top:0; }\\n .reading-picdrome.pd-guides-business-website-images .pd-card p { margin-bottom:0; color:var(--pd-slate); font-size:.96rem; }\\n .reading-picdrome.pd-guides-business-website-images .pd-cta {\\n display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1.5rem 0 .5rem;\\n }\\n .reading-picdrome.pd-guides-business-website-images .pd-btn {\\n background:var(--pd-brand); color:var(--c1gb4l3-runtime-action-fg, #ffffff); border-radius:10px; padding:.7rem 1.1rem;\\n font-weight:600; text-decoration:none; display:inline-block;\\n }\\n .reading-picdrome.pd-guides-business-website-images .pd-btn:hover { background:var(--pd-brand-dark); color:var(--c1gb4l3-runtime-action-fg, #ffffff); }\\n .reading-picdrome.pd-guides-business-website-images .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; display:inline-block;\\n background:var(--pd-bg);\\n }\\n .reading-picdrome.pd-guides-business-website-images .pd-btn-secondary:hover { border-color:var(--pd-brand); color:var(--pd-ink); }\\n .reading-picdrome.pd-guides-business-website-images .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.25rem 0;\\n }\\n .reading-picdrome.pd-guides-business-website-images .pd-callout p:last-child { margin-bottom:0; }\\n .reading-picdrome.pd-guides-business-website-images .pd-note {\\n border-left:4px solid var(--pd-warn); background:var(--pd-warn-bg);\\n padding:1rem 1.1rem; border-radius:8px; margin:1.25rem 0; color:var(--pd-slate);\\n }\\n .reading-picdrome.pd-guides-business-website-images .pd-note p:last-child { margin-bottom:0; }\\n .reading-picdrome.pd-guides-business-website-images ul, .reading-picdrome.pd-guides-business-website-images ol {\\n margin:0 0 1rem; padding-left:1.3rem;\\n }\\n .reading-picdrome.pd-guides-business-website-images li { margin:.3rem 0; }\\n .reading-picdrome.pd-guides-business-website-images table {\\n width:100%; border-collapse:collapse; margin:1.25rem 0; font-size:.95rem;\\n }\\n .reading-picdrome.pd-guides-business-website-images th, .reading-picdrome.pd-guides-business-website-images td {\\n border:1px solid var(--pd-line); padding:.55rem .7rem; text-align:left; vertical-align:top;\\n }\\n .reading-picdrome.pd-guides-business-website-images th { background:var(--pd-soft); font-weight:600; }\\n .reading-picdrome.pd-guides-business-website-images .pd-toc {\\n border:1px solid var(--pd-line); border-radius:12px; padding:1rem 1.25rem;\\n background:var(--pd-soft); margin:1.5rem 0;\\n }\\n .reading-picdrome.pd-guides-business-website-images .pd-toc p { margin:0 0 .5rem; font-weight:600; }\\n .reading-picdrome.pd-guides-business-website-images .pd-toc ol { margin:0; }\\n .reading-picdrome.pd-guides-business-website-images .pd-faq h3 { margin-top:1.4rem; }\\n .reading-picdrome.pd-guides-business-website-images .pd-summary {\\n border:1px solid var(--pd-line); border-radius:12px; padding:1.1rem 1.25rem;\\n background:var(--pd-soft); margin:1.75rem 0 0;\\n }\\n .reading-picdrome.pd-guides-business-website-images .pd-summary p:last-child { margin-bottom:0; }\\n .reading-picdrome.pd-guides-business-website-images .pd-meta { color:var(--pd-muted); font-size:.95rem; margin:0 0 1.5rem; }\\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('div', { className: \"pd-wrap\",}\n , _react2.default.createElement('header', { className: \"reading-hero\",}\n , _react2.default.createElement('h1', null, \"The complete guide to choosing images for your business website\" )\n , _react2.default.createElement('p', { className: \"pd-lede\",}, \"A practical, no-jargon guide to picking, placing, sizing, and licensing the images on a business website — written for founders and non-designers.\"\n\n\n )\n , _react2.default.createElement('p', { className: \"pd-meta\",}, \"By Picdrome. A long read, but skimmable — jump to any section below.\" )\n )\n\n , _react2.default.createElement('nav', { className: \"pd-toc\", 'aria-label': \"Guide sections\" ,}\n , _react2.default.createElement('p', null, \"What this guide covers\" )\n , _react2.default.createElement('ol', null\n , _react2.default.createElement('li', null, _react2.default.createElement('a', { href: \"#what-images-do\",}, \"What good website images actually do\" ))\n , _react2.default.createElement('li', null, _react2.default.createElement('a', { href: \"#match-the-page\",}, \"Match the image to the page\" ))\n , _react2.default.createElement('li', null, _react2.default.createElement('a', { href: \"#visual-style\",}, \"Pick a consistent visual style\" ))\n , _react2.default.createElement('li', null, _react2.default.createElement('a', { href: \"#size-format-speed\",}, \"Size, format, and speed\" ))\n , _react2.default.createElement('li', null, _react2.default.createElement('a', { href: \"#accessibility\",}, \"Accessibility: alt text and contrast\" ))\n , _react2.default.createElement('li', null, _react2.default.createElement('a', { href: \"#licensing\",}, \"Licensing without the worry\" ))\n , _react2.default.createElement('li', null, _react2.default.createElement('a', { href: \"#mistakes\",}, \"Common mistakes to avoid\" ))\n , _react2.default.createElement('li', null, _react2.default.createElement('a', { href: \"#faq\",}, \"Frequently asked questions\" ))\n )\n )\n\n , _react2.default.createElement('section', { 'aria-label': \"Who this is for\" ,}\n , _react2.default.createElement('p', null, \"If you are building or refreshing a business website and the image choices feel like guesswork, this guide is for you. You do not need a design background. We walk through the decisions in the order you actually face them: what an image is for, where it goes, what style to use, how to size and export it, how to keep it accessible, and how to check the license. Picdrome also offers original AI-generated images; this guide helps you choose and check images from a source you trust.\"\n\n\n\n\n\n\n )\n )\n\n , _react2.default.createElement('div', { className: \"pd-cta\",}\n , _react2.default.createElement('a', { className: \"pd-btn\", href: \"/blog/choose-the-right-image-framework\",}, \"Choose the right image for a page\" )\n , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/use-cases\",}, \"Choose by page section\" )\n , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/blog/website-image-sizes-cheat-sheet\",}, \"Image sizes cheat sheet\" )\n , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/blog/use-free-and-ai-images-safely\",}, \"Using free & AI images safely\" )\n )\n\n , _react2.default.createElement('section', { id: \"what-images-do\",}\n , _react2.default.createElement('h2', null, \"What good website images actually do\" )\n , _react2.default.createElement('p', null, \"Let us be honest about what an image can and cannot do. An image does not magically increase conversions, build trust, or generate sales on its own. What a well-chosen image does is more concrete and more reliable: it communicates an idea faster than text, sets the tone of the page, and stays readable behind any headline or button placed on top of it.\"\n\n\n\n\n\n )\n , _react2.default.createElement('p', null, \"Think of an image as supporting the words around it. When someone lands on your homepage, the right picture tells them “you are in the right place” before they read a single sentence. On a service page, an image can show what the work looks like. On an about page, it can give the business a human, grounded feel. None of that requires hype — it just requires the image to fit the message.\"\n\n\n\n\n\n )\n , _react2.default.createElement('div', { className: \"pd-grid\",}\n , _react2.default.createElement('div', { className: \"pd-card\",}\n , _react2.default.createElement('h3', null, \"It communicates\" )\n , _react2.default.createElement('p', null, \"A picture sets context in a glance — the kind of business, the mood, the subject — so the copy has less work to do.\" )\n )\n , _react2.default.createElement('div', { className: \"pd-card\",}\n , _react2.default.createElement('h3', null, \"It sets tone\" )\n , _react2.default.createElement('p', null, \"Warm and friendly, clean and technical, calm and premium — the image signals tone before anyone reads.\" )\n )\n , _react2.default.createElement('div', { className: \"pd-card\",}\n , _react2.default.createElement('h3', null, \"It stays readable\" )\n , _react2.default.createElement('p', null, \"A good hero image leaves room for text and keeps that text legible. Readability beats “impressive but busy”.\" )\n )\n , _react2.default.createElement('div', { className: \"pd-card\",}\n , _react2.default.createElement('h3', null, \"It loads fast\" )\n , _react2.default.createElement('p', null, \"An image that is sized and compressed sensibly does not slow the page down or push the layout around.\" )\n )\n )\n , _react2.default.createElement('p', null, \"The goal for the rest of this guide is simple: choose images that fit the page, stay readable, and load fast. Do those three things and the rest tends to fall into place.\"\n\n\n\n )\n )\n\n , _react2.default.createElement('section', { id: \"match-the-page\",}\n , _react2.default.createElement('h2', null, \"Match the image to the page\" )\n , _react2.default.createElement('p', null, \"The single most useful habit is to choose an image by where it goes. A hero image has a different job from a thumbnail in a service grid, which has a different job from a portrait on an about page. When you match the image to the page section, the choice gets easier and the result looks more deliberate.\"\n\n\n\n\n )\n , _react2.default.createElement('p', null, \"Here is a section-by-section starting point. See what each spot needs on the \"\n , _react2.default.createElement('a', { href: \"/use-cases\",}, \"use-case hub\" ), \", and a full breakdown in the page map: \"\n , _react2.default.createElement('a', { href: \"/blog/image-for-each-website-page\",}, \"the right image for each website page\"\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, \"Page section\" )\n , _react2.default.createElement('th', null, \"What the image is doing\" )\n , _react2.default.createElement('th', null, \"Practical tip\" )\n )\n )\n , _react2.default.createElement('tbody', null\n , _react2.default.createElement('tr', null\n , _react2.default.createElement('td', null, \"Hero\")\n , _react2.default.createElement('td', null, \"Sets the first impression and holds the headline and main button.\" )\n , _react2.default.createElement('td', null, \"Leave clear space for text. Avoid busy detail where the words sit.\" )\n )\n , _react2.default.createElement('tr', null\n , _react2.default.createElement('td', null, \"About\")\n , _react2.default.createElement('td', null, \"Makes the business feel human and grounded.\" )\n , _react2.default.createElement('td', null, \"Pick something that matches your real tone, not a generic boardroom.\" )\n )\n , _react2.default.createElement('tr', null\n , _react2.default.createElement('td', null, \"Service\")\n , _react2.default.createElement('td', null, \"Shows what the work or outcome looks like.\" )\n , _react2.default.createElement('td', null, \"Use a consistent crop and ratio across every service card.\" )\n )\n , _react2.default.createElement('tr', null\n , _react2.default.createElement('td', null, \"Pricing\")\n , _react2.default.createElement('td', null, \"Adds a light visual cue without distracting from the numbers.\" )\n , _react2.default.createElement('td', null, \"Keep it simple. Pricing pages reward clarity over decoration.\" )\n )\n , _react2.default.createElement('tr', null\n , _react2.default.createElement('td', null, \"Blog\")\n , _react2.default.createElement('td', null, \"Gives each post a recognisable thumbnail and header.\" )\n , _react2.default.createElement('td', null, \"Use one ratio for every post so the index looks tidy.\" )\n )\n )\n ))\n , _react2.default.createElement('p', null, \"A quick rule: the closer an image is to a decision point — a hero, a pricing section, a contact form — the calmer and more readable it should be. Save the more detailed, atmospheric images for sections where the visitor is browsing rather than deciding.\"\n\n\n\n\n )\n )\n\n , _react2.default.createElement('section', { id: \"visual-style\",}\n , _react2.default.createElement('h2', null, \"Pick a consistent visual style\" )\n , _react2.default.createElement('p', null, \"One mismatched image can make a whole page feel off. The fix is to decide on a style once, then apply it everywhere. Three decisions cover most of it.\"\n\n\n )\n , _react2.default.createElement('div', { className: \"pd-grid\",}\n , _react2.default.createElement('div', { className: \"pd-card\",}\n , _react2.default.createElement('h3', null, \"Photo, illustration, or 3D\" )\n , _react2.default.createElement('p', null, \"Photographic feels real and concrete. Illustration feels approachable and flexible. 3D feels modern and product-led. Pick one lane as your default.\" )\n )\n , _react2.default.createElement('div', { className: \"pd-card\",}\n , _react2.default.createElement('h3', null, \"Warm or cool\" )\n , _react2.default.createElement('p', null, \"Warm tones read friendly and inviting. Cool tones read calm, clean, and technical. Choose the temperature that matches your business.\" )\n )\n , _react2.default.createElement('div', { className: \"pd-card\",}\n , _react2.default.createElement('h3', null, \"Busy or minimal\" )\n , _react2.default.createElement('p', null, \"Minimal images keep text readable and pages fast. Busier images suit gallery-style sections. Lean minimal near headlines and buttons.\" )\n )\n )\n , _react2.default.createElement('p', null, \"Consistency matters more than the specific choice. A site that commits to clean, cool-toned illustrations looks intentional; a site that mixes warm photos, cartoon icons, and dark 3D renders looks accidental. Once you pick a lane, keep it across the homepage, service pages, and blog.\"\n\n\n\n\n )\n , _react2.default.createElement('p', null, \"For a step-by-step method, read\"\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/choose-a-visual-style-for-your-website\",}, \"how to choose a visual style for your website\"\n ), \", and for the vocabulary behind the choices, see the\" , \" \"\n , _react2.default.createElement('a', { href: \"/glossary\",}, \"visual style glossary\" ), \".\"\n )\n )\n\n , _react2.default.createElement('section', { id: \"size-format-speed\",}\n , _react2.default.createElement('h2', null, \"Size, format, and speed\" )\n , _react2.default.createElement('p', null, \"A great image still hurts the page if it is the wrong size or exported badly. Two things go wrong most often: images that are far larger than they need to be (slow to load), and images that are too small for where they are placed (blurry when stretched). Aim for the right dimensions, then compress.\"\n\n\n\n\n )\n\n , _react2.default.createElement('h3', null, \"Aspect ratios\" )\n , _react2.default.createElement('p', null, \"Match the ratio to the slot. Wide hero banners are usually around 16:9 or wider. Cards and thumbnails are often square (1:1) or a gentle landscape (4:3). Portraits for an about page lean tall (3:4 or 4:5). Decide the ratio per slot and crop to it so nothing important gets cut off. The\"\n\n\n\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/website-image-sizes-cheat-sheet\",}, \"image sizes cheat sheet\" ), \" lists common dimensions you can copy.\"\n\n )\n\n , _react2.default.createElement('h3', null, \"JPG, PNG, or WebP\" )\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, \"Format\")\n , _react2.default.createElement('th', null, \"Best for\" )\n , _react2.default.createElement('th', null, \"Notes\")\n )\n )\n , _react2.default.createElement('tbody', null\n , _react2.default.createElement('tr', null\n , _react2.default.createElement('td', null, \"JPG\")\n , _react2.default.createElement('td', null, \"Photos and detailed images\" )\n , _react2.default.createElement('td', null, \"Small files, no transparency. Fine for most heroes and photos.\" )\n )\n , _react2.default.createElement('tr', null\n , _react2.default.createElement('td', null, \"PNG\")\n , _react2.default.createElement('td', null, \"Logos, flat graphics, anything needing transparency\" )\n , _react2.default.createElement('td', null, \"Larger files. Use when you need sharp edges or a transparent background.\" )\n )\n , _react2.default.createElement('tr', null\n , _react2.default.createElement('td', null, \"WebP\")\n , _react2.default.createElement('td', null, \"Almost everything, when supported\" )\n , _react2.default.createElement('td', null, \"Smaller than JPG and PNG at similar quality. A strong modern default.\" )\n )\n )\n ))\n , _react2.default.createElement('p', null, \"For a deeper comparison, read\"\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/jpg-png-webp-comparison\",}, \"JPG vs PNG vs WebP\" ), \". When in doubt: WebP for most images, JPG as a safe fallback, PNG only when you need transparency.\"\n\n )\n\n , _react2.default.createElement('h3', null, \"Compression\")\n , _react2.default.createElement('p', null, \"Compression shrinks the file so the page loads faster, usually with no visible quality loss at sensible settings. Export at the dimensions you actually need — do not drop a 4000-pixel image into a 600-pixel slot — and then compress. The walkthrough in\"\n\n\n\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/compress-website-images\",}, \"how to compress website images\" ), \" covers the settings step by step.\"\n\n )\n )\n\n , _react2.default.createElement('section', { id: \"accessibility\",}\n , _react2.default.createElement('h2', null, \"Accessibility: alt text and contrast\" )\n , _react2.default.createElement('div', { className: \"pd-note\",}\n , _react2.default.createElement('p', null, \"Accessibility rules and standards evolve, and the right approach can depend on your audience and region. Treat the points below as a practical starting point, not legal or compliance advice, and confirm specifics for your situation.\"\n\n\n\n )\n )\n , _react2.default.createElement('p', null, \"Two accessibility basics apply to almost every business website: meaningful images need alt text, and text placed over an image needs enough contrast to read.\"\n\n\n )\n\n , _react2.default.createElement('h3', null, \"Alt text\" )\n , _react2.default.createElement('p', null, \"Alt text is a short written description of an image. It is read aloud by screen readers and shown if an image fails to load. Every meaningful image should have alt text that describes what the image shows in plain language. Images that are purely decorative can have empty alt text so screen readers skip them. Keep descriptions specific and brief — describe the content, not the file.\"\n\n\n\n\n\n )\n , _react2.default.createElement('p', null, \"For a full method, read\"\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/write-alt-text-for-images\",}, \"how to write alt text for images\" ), \", which has worked examples you can adapt for each slot.\"\n\n )\n\n , _react2.default.createElement('h3', null, \"Contrast over images\" )\n , _react2.default.createElement('p', null, \"When a headline sits on top of an image, the text has to stay readable against whatever is behind it. Choose images with a calmer area where the text goes, or add a subtle overlay or gradient so the words separate cleanly from the background. If you have to squint to read it, the contrast is not enough yet.\"\n\n\n\n\n )\n )\n\n , _react2.default.createElement('section', { id: \"licensing\",}\n , _react2.default.createElement('h2', null, \"Licensing without the worry\" )\n , _react2.default.createElement('p', null, \"Licensing is where a lot of founders get nervous, so here is the plain version. Every image comes from somewhere — a stock library, a photographer, an AI image tool, a client — and the current license or terms at that source decide what you may do with it. Before an image goes on your business site, landing pages, or blog, read that license and confirm it covers commercial website use, and note any attribution rule.\"\n\n\n\n\n\n )\n , _react2.default.createElement('div', { className: \"pd-callout\",}\n , _react2.default.createElement('p', null\n , _react2.default.createElement('strong', null, \"How to describe it honestly:\" ), \" Picdrome originals use the Picdrome License; images from other sources keep their own terms. Don't call an image public domain, CC0, royalty-free, or unrestricted unless its source says so — “free” describes cost, not copyright status. This page is guidance, not legal advice.\"\n\n\n )\n )\n , _react2.default.createElement('p', null, \"If an image is AI-generated, be honest about that where it is relevant, rather than implying a generated person is a real customer or team member. For the practical do-and-do-not list, read\"\n\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/use-free-and-ai-images-safely\",}, \"using free and AI images safely\" ), \". When in doubt about a specific use, run it through the\"\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/image-rights-pre-publish-check\",}, \"pre-publish image rights check\" ), \".\"\n )\n )\n\n , _react2.default.createElement('section', { id: \"mistakes\",}\n , _react2.default.createElement('h2', null, \"Common mistakes to avoid\" )\n , _react2.default.createElement('p', null, \"Most image problems on business websites come down to a handful of repeat offenders. If you only fix these, your pages will already look more considered.\"\n\n\n )\n , _react2.default.createElement('ul', null\n , _react2.default.createElement('li', null\n , _react2.default.createElement('strong', null, \"Overused stock that everyone recognises.\" ), \" If an image feels generic, it makes the whole page feel generic. Choose something that fits your specific tone.\"\n\n\n )\n , _react2.default.createElement('li', null\n , _react2.default.createElement('strong', null, \"Mismatched styles on one page.\" ), \" A warm photo next to a flat icon next to a dark 3D render reads as accidental. Pick one lane and stay in it.\"\n\n )\n , _react2.default.createElement('li', null\n , _react2.default.createElement('strong', null, \"Blurry heroes.\" ), \" Usually caused by stretching a small image to fill a large slot. Start from a large enough source and crop down, never up.\"\n\n )\n , _react2.default.createElement('li', null\n , _react2.default.createElement('strong', null, \"Unreadable text over images.\" ), \" Low contrast between the headline and the background. Use a calmer area, an overlay, or a gradient.\"\n\n )\n , _react2.default.createElement('li', null\n , _react2.default.createElement('strong', null, \"Oversized files.\" ), \" Dropping a huge image into a small slot slows the page. Size to the slot, then compress.\"\n\n )\n )\n , _react2.default.createElement('p', null, \"For more examples and fixes, read\"\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/website-image-mistakes\",}, \"common website image mistakes\" ), \".\"\n )\n )\n\n , _react2.default.createElement('section', { 'aria-label': \"Next steps\" ,}\n , _react2.default.createElement('h2', null, \"Put it into practice\" )\n , _react2.default.createElement('p', null, \"You now have the full decision path: what the image is for, where it goes, what style to use, how to size and export it, how to keep it accessible, and how to check the license. The fastest next step is to settle what the page you are working on needs.\"\n\n\n\n )\n , _react2.default.createElement('div', { className: \"pd-cta\",}\n , _react2.default.createElement('a', { className: \"pd-btn\", href: \"/blog/choose-the-right-image-framework\",}, \"Choose the right image for a page\" )\n , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/use-cases\",}, \"Choose by page section\" )\n , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/blog/website-image-sizes-cheat-sheet\",}, \"Image sizes cheat sheet\" )\n , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/blog/use-free-and-ai-images-safely\",}, \"Using free & AI images safely\" )\n )\n )\n\n , _react2.default.createElement('section', { id: \"faq\", className: \"pd-faq\",}\n , _react2.default.createElement('h2', null, \"Frequently asked questions\" )\n\n , _react2.default.createElement('h3', null, \"How many images does a homepage need?\" )\n , _react2.default.createElement('p', null, \"Fewer than most people think. A common pattern is one strong hero image, one supporting image per major section (about, services, social proof), and small thumbnails where they help. If a section reads clearly without an image, it does not need one. Aim for purpose over quantity.\"\n\n\n\n\n )\n\n , _react2.default.createElement('h3', null, \"Where do I put images on a service page?\" )\n , _react2.default.createElement('p', null, \"Usually one lead image near the top that shows the service or its outcome, then a consistent set of smaller images if you list multiple services in a grid. Keep the ratio and crop identical across the grid so it looks tidy, and leave the area near any call-to-action calm and readable.\"\n\n\n\n\n )\n\n , _react2.default.createElement('h3', null, \"What size should a hero image be?\" )\n , _react2.default.createElement('p', null, \"Wide and large enough to stay sharp on big screens, commonly around a 16:9 ratio. Start from a source larger than the slot, crop to your ratio, and then compress so it loads quickly. Exact pixel dimensions for common slots are listed on the\"\n\n\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/website-image-sizes-cheat-sheet\",}, \"image sizes cheat sheet\" ), \".\"\n )\n\n , _react2.default.createElement('h3', null, \"Photo or illustration — which should I use?\" )\n , _react2.default.createElement('p', null, \"Either works; consistency matters more than the choice. Photos feel concrete and real; illustrations feel approachable and flexible. Pick the one that matches your tone and use it as your default across the site. See the\"\n\n\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/choose-a-visual-style-for-your-website\",}, \"visual style walkthrough\" ), \" \", \"if you are unsure.\"\n\n )\n\n , _react2.default.createElement('h3', null, \"Can I use an image commercially?\" )\n , _react2.default.createElement('p', null, \"Only if the license at its source allows it. Read the current terms where the image comes from and confirm they cover commercial website use; if they don't clearly do, choose another image.\"\n\n\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/use-ai-images-commercially\",}, \"Using AI images commercially\" ), \" covers the extra checks for generated images. This is guidance, not legal advice.\"\n\n )\n\n , _react2.default.createElement('h3', null, \"Do I need to write alt text for every image?\" )\n , _react2.default.createElement('p', null, \"Write alt text for every meaningful image so screen readers and search engines can understand it. Purely decorative images can use empty alt text so they are skipped. Our guide on\"\n\n\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/write-alt-text-for-images\",}, \"writing alt text\" ), \" makes this quick.\"\n )\n\n , _react2.default.createElement('h3', null, \"Why does my hero image look blurry?\" )\n , _react2.default.createElement('p', null, \"Almost always because a small image is being stretched to fill a large area. Start from a source bigger than the slot and crop down rather than scaling up. Also check you have not over-compressed it. Match dimensions to the slot using the\"\n\n\n , \" \"\n , _react2.default.createElement('a', { href: \"/blog/website-image-sizes-cheat-sheet\",}, \"cheat sheet\" ), \".\"\n )\n )\n\n , _react2.default.createElement('section', { className: \"pd-summary\", 'aria-label': \"Plain-language summary\" ,}\n , _react2.default.createElement('h2', null, \"In short\" )\n , _react2.default.createElement('p', null, \"To choose images for a business website: match each image to the page section it sits in, commit to one consistent visual style, size and compress images so pages load fast, give every meaningful image alt text and keep overlaid text readable, and confirm the license at each image's source covers your use before you publish.\"\n\n\n\n\n )\n , _react2.default.createElement('p', null, \"Start at the \"\n , _react2.default.createElement('a', { href: \"/blog/choose-the-right-image-framework\",}, \"right-image framework\" ), \", choose by section on the \"\n , _react2.default.createElement('a', { href: \"/use-cases\",}, \"use-case hub\" ), \", grab dimensions from the \"\n , _react2.default.createElement('a', { href: \"/blog/website-image-sizes-cheat-sheet\",}, \"size cheat sheet\" ), \", and read\" , \" \"\n , _react2.default.createElement('a', { href: \"/blog/use-free-and-ai-images-safely\",}, \"using free and AI images safely\" ), \" \", \"before you publish.\"\n\n )\n )\n )\n )\n );\n} exports.default = BusinessWebsiteImagesGuidePage;"}