Pixel Perfect

What to Know Before You Submit / Upload a Photo

Images can make or break a small business website. Whether you’re a contractor, hairstylist, dentist, or restaurant owner, the photos you upload should build trust, highlight your work, and make your business look professional.

Most business owners aren’t photographers. They're using iPhones or Androids, often snapping pictures during the workday. That’s fine — as long as you follow a few simple best practices.

This guide covers what you need to know before you add images to your site, including:

• The right image sizes and formats for web
• What types of images help convert leads
• How to take better photos of your team and your work
• Tips for lighting, composition, naming, and consistency
• When to not use images at all

The tips here work for any type of business — we’ve just included examples from home service contractors since they make up a large number of Hibu sites.

Let’s get everything in frame.

Use High-Quality, Web-Friendly Images (Proper Size & Format)

Make sure your images are large enough and clear on all devices. For hero images, aim for a width of 1600–1920 pixels to keep them sharp on desktop screens.

Our website platform will handle the rest by automatically creating optimized versions for tablets and phones. Just upload high-quality originals — up to 15MB per image is fine.

Use the right file formats:

• JPEG / JPG for most photos
• PNG for graphics, logos, or anything with transparency
• WebP is also supported automatically behind the scenes

Do not upload HEIC files (the default format for iPhone photos). These are not fully supported and may not display correctly on your site.

Tip for iPhone users:
To avoid HEIC files, go to:

• Settings > Camera > Formats
• Choose Most Compatible — this will save future photos as JPEG instead of HEIC.Or, you can   export or email the photo to yourself, which often converts it to JPEG automatically.

This setup gives your site crisp, professional-looking images without needing to resize or compress anything yourself.

Avoid blurry, dark, or pixelated photos. Clear, well-lit images make your business look more credible and trustworthy.

Use Descriptive File Names

Name your image files in plain language instead of leaving them as random camera filenames.

For example:

• leaky-faucet-repair-before.jpg
• Not IMG_1234.jpg

Follow these tips for better file names:

• Avoid spaces — use hyphens instead (e.g., team-photo.png, not team photo.png)
• Use keywords that describe what’s in the photo

Descriptive file names help:

• Keep your images organized
• Boost SEO by telling search engines what the image shows
• Make it easier for our Hibu website build teams to group related photos on the right page or gallery

These small steps make your images easier to work with — for both search engines and the team building your site.

Showcase Before-and-After Work

One of the best ways to demonstrate your quality is through before-and-after photos of projects. Home improvement and repair services benefit greatly from this. Show the:

• “Before” — the problem or original condition
• “After” — your completed work

For example, a lawn care company might show a patchy, weed-filled lawn next to the same yard looking lush and green after treatment. This kind of visual proof shows the results you deliver and highlights your expertise.

Tips for effective before-and-after images:

• Take photos from the same angle and distance for easy comparison
• Keep lighting consistent between both shots (don’t take one at night and the other in daylight)
• Use a clear, matching file name to keep them grouped together (e.g., white-house-before.jpg and white-house-after.jpg )

Done well, before-and-after photos offer a strong visual impact that can help convince visitors to choose your business.

Include Team Photos and Action Shots

Put a human face on your business. Include photos of your team — whether it’s a group shot of the crew or candid images of your employees on the job. This helps create a personal connection and builds trust.

For example:

• A plumbing company could show plumbers standing by the company van
• A landscaper might show the crew planting a tree for a client
  
  

Action shots of your staff at work are strong content:

• A roofer nailing shingles
• An HVAC technician installing a unit
• A cleaner scrubbing a countertop
  
  

These images show that real, knowledgeable people are behind the service.

Tips for team and action shots:

• Keep the tone professional but friendly
• Have team members wear company-branded shirts or uniforms, if available
• Make sure everyone looks approachable (smiling or focused, not scowling or camera-shy)
• Avoid overly posed or fake-looking shots — candid but clear images often feel the most authentic
• Take photos in landscape mode (left to right), not portrait (up and down), so they display better on the site

Hibu does not recommend using a team photo as the main hero image, since we typically display text over that area. A photo like plumbers standing by a company van is considered “busy” and can make the text difficult to read.

Instead:

• Use your team photo next to the introduction text on the home page
• Feature it again on your About Us page

By featuring your actual team in the right places, you make your business feel more trustworthy and relatable — without hurting readability or design.

Maintain a Consistent Style and Orientation

Strive for a cohesive look across all your website images. Consistency helps your site feel polished and professional.

Here’s what to keep consistent:

• Orientation and aspect ratio (e.g., all images in landscape mode (left to right)
• This is especially important for hero images. If a photo is taken in portrait mode (up and down), we most likely won’t be able to use it as a hero. Hero sections are wide, so portrait images will either get cropped awkwardly or stretched, making them unusable or distorted. Always take hero candidates in landscape mode (left to right) to fit the design.
• Visual style (similar lighting, color tone, brightness, and contrast)
• Cropping format (e.g., all headshots as vertical rectangles or squares)
• Examples:
• For a team page, crop all headshots to the same shape and size for a clean grid
• In a gallery, avoid mixing small vertical photos with large horizontal panoramas

This doesn’t mean every photo must look identical — just that they should feel like they belong together. A consistent visual style supports your branding and makes your site easier to view and navigate.

Pay Attention to Lighting

Lighting can make or break your images. Shoot in good light so your subjects appear bright, clear, and color-accurate.

For best results, use natural light whenever possible:

• Indoor shots: Take photos near windows or open doors to let in daylight. Turn off harsh overhead fluorescents that can distort colors.
• Outdoor shots: Morning or late afternoon light is softer and more flattering than midday sun.

Avoid common lighting issues:

• Extreme backlighting – when the subject is in shadow because of bright light behind them
• Harsh midday sun – can cause strong shadows or overexposed highlights
• Built-in phone flash – often creates glare, dark shadows, and unnatural tones

If the scene is too dark:

• Open curtains
• Turn on extra lights (preferably “white” bulbs, not yellow)
• Use a portable work light if needed for job site photos

The goal is an evenly lit subject — you want clear detail, not areas lost in shadow or washed out by brightness.

Good lighting helps your images look clean, sharp, and professional — just like the quality of work you provide.

Use Images Purposefully – Don’t Add Filler

Every image on your site should serve a purpose. Avoid adding photos just to fill space or decorate. If an image doesn’t support your content or message, it’s better to leave it out.

For example:

• You don’t need to show 10 variations of the same fence or garden project — one or two strong images will do
• If you don’t have a good photo of a specific service, it’s better to use a high-quality stock image than a blurry or poorly composed original
  

Before adding a photo, ask yourself:

• Does this image help explain something?
• Does it show something important?
• Does it build trust with visitors?

If the answer is no, consider removing it.

By using images intentionally, your website will stay focused, clear, and more effective for your visitors.

Submit a High-Quality Logo

A great logo helps set the tone for your entire website. It conveys trust, professionalism, and gives our designers a strong foundation to build a clean, effective design. A poor-quality logo — one that’s blurry, pixelated, overly tall, or cluttered with extra text like a phone number or tagline — often results in a site that looks unprofessional or unbalanced.

Here’s what to submit for the best results:

• The highest-quality version of your logo, ideally in PNG format (with a transparent background)
• If available, include vector files like EPS or AI — these are the same file types used by companies that printed your truck decal, outdoor signage, or business cards
• If a design company created your logo, they may have also provided a brand guidelines document (usually a PDF with rules for logo spacing, fonts, and colors) — please send that along too
• Share all versions you have:
• Light and dark versions
• Horizontal and stacked configurations
• Any with transparent backgrounds

The more options we have, the more flexibility our design team has to make your website look its best — across desktop, mobile, and everything in between.

Follow Basic Smartphone Photography Tips

You don’t need professional camera gear — modern iPhones and Android phones can take excellent photos if you use them right. Here are a few simple tips to help you get the best results:

• Clean the lens before you shoot.
  A quick wipe of your phone’s camera lens with a soft cloth can remove smudges that blur your photos. Since phones often sit in pockets, toolboxes, or glove compartments, the lens can easily collect dust and fingerprints. A clean lens can be the difference between a hazy shot and a sharp one.
  
  
• Hold steady, or use support.
  Camera shake is one of the most common causes of blurry images. Try to keep your hands still — brace your elbows on a table or against your body.  Even better, set your phone on a solid surface or use a small tripod. You can also use the phone’s timer mode to avoid shaking the phone when you tap the shutter.
  
  
• Avoid zooming in digitally.
  If you need a closer shot, walk closer to the subject rather than using the phone’s zoom. Digital zoom crops the image and reduces clarity.  If your phone has an optical telephoto lens, that’s fine — but many phones use digital zoom, which lowers image quality.
  
  
• Ensure your subject is in focus.
  Tap the screen where your subject appears — for example, on a person’s face or the item you’re highlighting. This helps the camera adjust focus and exposure. Most phones also allow you to lock focus and exposure by pressing and holding on the subject. This is helpful if you're composing the shot or trying to balance lighting.
  
  
• Take multiple shots.
  Don’t settle for just one photo. Take several from different angles — high, low, or from the side — and pick the best one later.
  With digital photos, there’s no cost to taking extras, and one of the later attempts may have better lighting or composition.

Even small steps like keeping your hands steady or cleaning the lens can make a big difference in quality. Always review your photos on a larger screen when possible — what looks fine on a phone might reveal flaws on a desktop.

With a little practice, you’ll start to spot what works best. The goal is simple: show your business in the best light and help your images reflect the quality of your work.

These Photos Aren’t for You — They’re for Your Customers

Remember, every photo you upload should help the person visiting your website. Ask yourself:

• Does this image help explain something?
• Does it show something important?
• Does it build trust with visitors?

If the answer is no, leave it out.

These images aren’t for your personal collection. They’re not for showing off your motorcycle, your dog, or your latest vacation — that’s what Facebook is for.

Your website photos should build trust in you, your business, and your services. They should help people feel confident choosing you over someone else. Use them to support your message, not distract from it.

When in doubt, keep it simple, relevant, and customer-focused.