This is for a local contractor or service owner, restaurant owner, or product shop choosing visuals for a first website or replacing a dated one. The decision is practical: which icons, photos, product images, and screenshots help a visitor trust the page, understand the offer, and take the next step without slowing the launch.
Quick answer
Use icons for scanning, real photos for trust, screenshots for digital steps, and product images when size, texture, color, or condition affect the decision. If a visual cannot help a visitor decide what the business does, whether it is credible, or what happens next, it does not belong near the top of the page.
- Icon: best for service categories, process steps, feature comparisons, and small cues next to short labels.
- Real photo: best when the visitor needs proof that the crew, restaurant, product, or space is real.
- Screenshot: best when the visitor needs to understand booking, ordering, checkout, account setup, or another digital task.
- Product image: best when the visitor is judging fit, finish, scale, texture, or condition before buying.
A visual earns its place only when it does one of three jobs: it clarifies the offer, proves the result, or helps the visitor imagine the experience. A restaurant menu photo can prove freshness. A contractor’s before-and-after photo can prove workmanship. A product close-up can answer the question a paragraph cannot. A decorative blob, stock handshake, or random icon grid usually adds noise.
The builder matters only where it changes the image work. A one-page Carrd site may need one strong hero photo and three support icons. A Shopify store needs product photos, variant images, and alt text that can survive collection pages, carts, and search results. A WordPress or Webflow site gives more layout control, but it also gives you more ways to overload a page. Treat images as launch assets, not decoration.
Choose visuals by job
Use icons for scanning, not persuasion. Three to five consistent icons can help visitors compare service categories such as "Emergency repair," "Maintenance plan," and "New installation." If the label still makes sense after you hide the icon, the icon is doing the right amount of work. If the icon has to explain the whole idea, replace it with a short phrase.
For meaningful icons, contrast matters. W3C WCAG 2.2 guidance for non-text contrast says user interface components and meaningful graphics should have at least a 3:1 contrast ratio against adjacent colors.[1] That is a useful rule for service icons, check marks, arrows, and button outlines. Pale gray icons on a white card may look quiet, but they can disappear for the visitor who is trying to decide fast.
Use photos when trust is the problem. A contractor page should show the real crew, vehicle, finished work, or client setting when possible. A restaurant should show the actual dining room, patio, bar, kitchen detail, plated dish, or takeout packaging. A product shop should show the item in use, in hand, or beside a familiar object for scale. Google Business Profile’s photo guidance recommends JPG or PNG business photos, between 10 KB and 5 MB, with a recommended resolution of 720 px by 720 px and a minimum resolution of 250 px by 250 px.[2] Those numbers are not a homepage design rule, but they are a reminder that local-business photos need to represent reality and stay usable across surfaces.
Use screenshots when process clarity is the problem. A restaurant can show the online ordering step where pickup time is chosen. A contractor can show the estimate request form or booking calendar. A product shop can show a subscription selector, size guide, bundle builder, or checkout step if that moment affects confidence. Crop the screenshot to one task, remove private names, and add a caption that says what the visitor is seeing.
Alt text should match the job. Shopify’s product media help says alt text has a 512-character maximum and recommends 125 characters or less.[3] That is a useful working limit for any builder: write "Blue ceramic mug with speckled glaze on cafe counter," not "image" or a paragraph of keywords. For non-product images, describe the useful content, not the mood the designer hoped to create.
| Visual choice | Use it when | Concrete example | Skip it when |
|---|---|---|---|
| Icon | The visitor is comparing categories or steps. | A home-services page uses one-line icons for repair, installation, and maintenance. | The icon repeats a word that is already obvious or comes from a different icon set. |
| Real photo | The visitor needs proof that the business exists and does the work. | A restaurant shows its actual dining room and plated signature dish, not a generic table setting. | The photo is stock, over-filtered, or unrelated to the offer on that section of the page. |
| Screenshot | The visitor needs to understand a digital workflow. | A booking page shows the exact calendar step where a customer chooses a time. | The screenshot is a dense dashboard with tiny labels and no caption. |
| Product image | The visitor is judging size, texture, color, or condition. | A product page shows front, side, detail, and scale views. | The product is too small in the frame or the background competes with it. |
Avoid visual competition
Most small-business pages start to feel busy when they mix too many visual systems: outline icons, filled icons, black-and-white photos, color photos, rounded screenshots, angled screenshots, badges, arrows, and background patterns. Pick one icon style, one photo crop rule, one screenshot frame, and one accent color for visual cues. A visitor should not have to decode the design before reading the offer.
Visual competition also affects speed. Google’s Core Web Vitals thresholds on web.dev define good field performance as Largest Contentful Paint at 2,500 ms or faster, Interaction to Next Paint at 200 ms or faster, and Cumulative Layout Shift of 0.1 or lower at the 75th percentile of page views.[4] If the largest element on the first screen is a huge hero image, that image can become the thing that makes the page feel slow.
Use a simple file-size rule before upload. Squarespace’s image formatting help says uploaded image files have a 20 MB limit, but it recommends image files of 500 KB or less to help a site load quickly.[5] The same page says Squarespace creates seven image widths from 100 px to 2,500 px for responsive display. That does not mean every builder works the same way, but it gives a useful launch target: keep normal page images near 500 KB or less unless the visitor truly needs close inspection.
Place each image beside the copy it supports. For a local bakery, a croissant photo belongs next to breakfast catering or morning pickup copy, not in a random gallery far below the contact button. For a contractor, the finished patio photo belongs beside the service that produced it. For a product shop, a texture close-up belongs near the material, care, or sizing information that makes the detail matter.
Two small-business teardowns
A weak contractor homepage often opens with a full-screen stock house, three badges, a city skyline, and a button below the fold. A stronger version opens with one real finished project, a short headline about the work, a visible estimate button, and three matching icons for repair, installation, and maintenance. The photo proves the result, the icons organize the offer, and the button stays easy to find.
A weak restaurant homepage often rotates seven moody dining images before the visitor can see the menu or order link. A stronger version uses one honest food or room photo, puts "View menu" or "Order pickup" beside the opening copy, and saves the wider gallery for lower on the page. If online ordering has a confusing pickup-time step, one cropped screenshot with a caption is more useful than another plated dish.
- Local service: above the fold, show one real result or crew-in-context photo, one plain promise, and a call or estimate button. Skip generic skylines and tool close-ups that could belong to anyone.
- Restaurant: above the fold, show food, space, or takeout packaging that matches the current offer. Skip dark dining-room photos that hide the food and carousels that delay the menu link.
- Product shop: above the fold, show the product clearly with one detail or scale cue. Skip collages where the item is small, cropped, or mixed with props that compete with it.
Protect the call to action
A beautiful visual section fails if it pushes the next step out of view. On a first website, the primary action is usually one of five things: call, book, request a quote, view a menu, or buy. Put the visual in service of that action. The hero image should make the action feel believable, not compete with the headline and button.
Use this workflow before publishing a new homepage or landing page:
- Name one primary action for the page: "Book a table," "Request an estimate," "Buy the product," "View the menu," or "Schedule a consult."
- List every planned visual in a simple inventory: hero photo, service icons, product photos, screenshots, badges, background images, and social proof logos.
- Assign one job to each visual: clarify the offer, prove the result, or preview the experience. Delete any visual that does not get one of those jobs.
- Match the first screen to the business type: finished work for a contractor, food or room proof for a restaurant, and product clarity for a shop.
- Compress normal page images toward the 500 KB working target, write brief alt text, and place each image next to the copy it supports.
- Check the page on a phone. The button should appear before the visitor has to hunt, and the image should not cause layout shift or cover the copy.
| Before | After | Why it works |
|---|---|---|
| Eight stock photos across a contractor homepage. | One real hero photo, two finished-work examples, and one crew or vehicle photo. | The visitor sees proof instead of filler. |
| A restaurant carousel before the menu button. | One strong dish or room photo with the menu and order actions visible. | The visual creates appetite without hiding the next step. |
| Six icon colors from different sets. | Three matching icons with short labels. | The service categories scan faster. |
| Three full-screen checkout screenshots. | One cropped screenshot with a caption explaining the task. | The visitor understands the workflow without reading tiny interface text. |
End note: If you are still drafting the page, the Website Builder home page can help you create a quick first version to test against this visual checklist. Keep the final choice of icons, photos, and screenshots tied to what the visitor needs to decide.
The tomorrow-morning rule is simple: before uploading a visual, write what it helps the visitor decide in seven words or fewer. "Can I trust this crew?" passes. "How do I choose pickup time?" passes. "Makes page look modern" fails.
FAQ
Should I use stock photos on a first website?
Use stock photos only when they show something the visitor already expects and cannot mistake for proof of your work. A background texture or generic location mood shot may be fine. A fake team photo, fake storefront, fake food photo, or fake project result is a trust problem.
How many icons should a homepage use?
Use three to five icons for the main categories or process steps. If you need more than five, the page probably needs clearer headings, a table, or separate service pages instead of a larger icon grid.
Are screenshots useful for local service businesses?
Only when the website includes a digital action the visitor must understand. Good screenshot candidates are appointment booking, online ordering, quote requests, client portals, proof galleries, and payment steps. Skip screenshots for basic claims like "friendly service" or "quality work."
What is the safest image size rule before launch?
For normal page images, start with the 500 KB or less working target from Squarespace’s image guidance,[5] then test the page on a phone. Product close-ups, portfolio images, and food photography may justify larger files, but only when the detail helps the visitor decide.
Sources
- W3C WCAG 2.2 non-text contrast guidance: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast
- Google Business Profile photo and video guidelines: https://support.google.com/business/answer/6103862?hl=en
- Shopify product media alt text help: https://help.shopify.com/en/manual/products/product-media/add-alt-text
- web.dev Core Web Vitals threshold explanation: https://web.dev/articles/defining-core-web-vitals-thresholds
- Squarespace image formatting guidance: https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-images-for-display-on-the-web