Images, Galleries, Logos

By Hibu February 19, 2026
Page Removal & Deactivation (Post-Launch) outlines the required process for retiring live pages without deleting them. Pages must be renamed, removed from navigation, set to draft, moved within the root structure, and redirected to prevent 404 errors and protect SEO integrity.
By Hibu February 19, 2026
During site build, unused template pages must be moved to XTRA Pages and unpublished or deleted if unsupported. FAQs and Request Form pages must be set to Draft to prevent indexing. SAPs must be nested under Serving Area. The live page tree should reflect only intentional, approved structure.
Every Hibu One Smart Site includes a Social Image (Open Graph or OG image) that controls how links a
By Hibu February 12, 2026
Every Hibu One Smart Site includes a Social Image (Open Graph or OG image) that controls how links appear when shared on social media and messaging apps. Images must meet size and ratio standards and clearly represent the business for consistent, professional previews.
By Hibu February 11, 2026
Text-heavy promotional images often fail on mobile when scaled from desktop widths. Landscape graphics become unreadable, and portrait layouts still reduce clarity. Mobile-friendly versions are required for hero use; otherwise, images must be hidden or placed in supporting sections.
By Hibu February 6, 2026
Defines how BBB logos, text references, and accreditation seals may be used on Hibu One Smart Sites. Covers verified accreditation requirements, allowed placements, linking rules, use of dynamic seal code, and restrictions to prevent misleading endorsement or ratings.
By Hibu February 1, 2026
Fair Use Policy — guidelines that define reasonable build limits for content included in a standard Hibu One Smart Site. Covers maximum quantities for inventory items, photo galleries, PDFs, and custom forms, along with image quality expectations and transparency requirements to ensure fairness, consistency, and high v
By Hibu February 1, 2026
Favicons and Open Graph images help strengthen a site’s branding and visibility. Each Hibu One Smart Site includes a favicon by default and a standard OG image for social sharing. Clients can supply their own icons or images if they meet size and format requirements.
By Hibu February 1, 2026
Images uploaded to Hibu One Smart Sites are automatically optimized by Duda to improve load speed, performance, and visual quality across devices. This includes resizing, compression, modern format delivery, and device-specific optimization, with no manual setup required.
By Hibu February 1, 2026
Badges and accreditation logos are placed in the footer to maintain a consistent, professional look. Each must include alt text, use a uniform size, and meet quality standards. If a logo or badge is missing or low-quality, the best available version is used, or a note is added if unavailable.
By Hibu February 1, 2026
The Instagram Photo Gallery Feed displays up to 100 recent images from a connected Professional Instagram account. It updates automatically and supports image posts only. Designed for active business accounts, it keeps site content fresh and visually engaging without manual uploads.
By Hibu February 1, 2026
The Photo Gallery widget displays client-supplied images to highlight real examples of work, products, or services. Each gallery supports titles, descriptions, and alt text for SEO and accessibility. Galleries can include up to 100 images and may link to a connected Professional Instagram account for automatic updates.
By Hibu February 1, 2026
Hero images set the first impression for each page, confirming to visitors they’re in the right place. Designers should choose high-quality, uncluttered images that keep text and calls to action readable.
By Hibu February 1, 2026
Hibu will upload and optimize up to 1,000 images per site, including galleries, section visuals, and brand assets. All images must meet quality standards, stay under 50MB, and support clear display. Hibu renames all files and applies descriptive alt text.
By Hibu February 1, 2026
Hibu features one high-quality business logo in the site header to ensure clear branding across desktop, tablet, and mobile. PNG is preferred, with SVG and JPEG accepted. Logos must be clean, readable, and properly optimized; animated or low-resolution files are not supported.
By Hibu February 1, 2026
Legacy images from older, narrow layouts may not scale well on modern designs. Low-quality assets may be excluded from hero areas, reused in secondary sections or galleries, or replaced with updated images. Any exclusions must be documented and communicated clearly to the client.
By Hibu February 1, 2026
Image labels and image file names serve different purposes. Labels are internal, human-readable identifiers used in Duda to find and reuse images, while file names and alt text support SEO and accessibility. Labels should describe image use, not follow file-naming rules.
By Hibu February 1, 2026
Defines how image and file assets are renamed in Hibu One to improve organization and usability. Filenames must lead with asset context, place the business name last, follow formatting standards, and align with Media Manager behavior for easier scanning and selection.
By Hibu February 1, 2026
Background videos may appear on home pages and category (CAT) layouts. Videos must use subtle, landscape footage that supports hero text and site performance.
By Hibu February 1, 2026
Hibu One Smart Sites support uploaded and embedded videos to highlight services, demonstrate expertise, and improve engagement. Up to 20 videos may be added per site, including YouTube, Vimeo, and Dailymotion embeds. Videos must be web-ready, properly sourced, and optimized for performance.
By Hibu February 1, 2026
Hibu One Smart Sites look best with properly sized images. Use wide hero images (1980–2560px), content images (1200–1600px), and small thumbnails (150–300px). Pixel size matters more than DPI. JPG or PNG files are recommended.
By Hibu February 1, 2026
Alt text describes images for screen readers, supports accessibility, and provides helpful context for search engines. Properly written alt text is clear, specific, non-spammy, and applied consistently across images, logos, and UI elements to ensure usability, compliance, and better indexing.
By Hibu February 1, 2026
Designers may use a client’s logo before authorization is signed only when there is clear public evidence that the client owns and actively uses that logo. Designers must document the basis for the assumption every time.

Images

Definition

“Images” include supporting content imagery, logos, icons, graphics, and other visual assets used across the site. High-quality images are essential to modern design, brand credibility, and conversion. Hibu One Smart Sites prioritize clarity, consistency, and professional presentation when using both client-supplied and stock images.

Fair Use Rules for Images

Hibu One Smart Sites apply specific fair use standards for image placement, galleries, and quality.

  • Photo Galleries
  • Core service/product page: Up to 1 gallery per page.
  • Main gallery page: May include up to 10 galleries.
  • Each gallery may contain up to 100 images.
  • If a client supplies 3+ images for a service (e.g., kitchens, roofing, bathrooms):
  • Those images will appear on the associated service page.
  • They will also be placed into a unique gallery on the main gallery page.

  • Image Quality & Legacy Assets
  • Older assets from narrow layouts (e.g., 960px) often appear blurry on modern Smart Sites. These may not be carried over.
  • Lower-quality images may be used in secondary sections or galleries but not in hero placements.
  • Designers should substitute high-quality stock or client-supplied replacements where possible.
  • Mandatory transparency: If client images are excluded from hero or other prominent placements, the designer must add an assumption and ensure DSC communicates it to the client.

Legacy Images

  • Older assets from narrow layouts (e.g., 960px designs) may appear blurry or stretched on modern 1200px+ layouts.
  • Such images may not be carried over. Instead:
  • We will use high-quality, current images that fit the design.
  • Clients may supply updated, higher-resolution versions.
  • Lower-quality images may still be used in secondary sections or galleries, but not as hero images.
  • Mandatory: If a client-supplied image is excluded from the hero due to quality, the designer must log a detailed assumption, share with the DSC, and ensure it is included in client communications. Transparency is required.
  • Options for legacy images:
  • Use in galleries (if grouped, see below).
  • Use in secondary placements where scaling or cropping issues are less visible.
  • Exclude from site with documented reasoning.

Hero Images

  • Each page must use a unique hero image to distinguish navigation.
  • Recommended minimum size: 1920 × 1280 px (full-width hero), safe zone applied.
  • Avoid images with overlaid text, signage, or people looking directly into the camera.
  • For transparent header designs, the top ¼–â…“ of the image must be uncluttered to preserve readability. Stock images are preferred in most cases.
  • Hero images must support readability of overlay text and CTAs.
  • Poor client-supplied images (wrong size, orientation, composition) must be relocated to body content or a gallery.

Photo Galleries

Hibu Policy

The Photo Gallery module allows for multiple client-supplied images to be displayed in a single, visually engaging format. Galleries are used to highlight real examples of a client’s work, products, or services.

Stock images are not permitted
within photo galleries.


Photo galleries should be built to enhance user experience, maintain optimal page performance, and follow standard Smart Website structure guidelines.

  • Core pages (Service/Product pages): May include up to one (1) photo gallery per page.
  • Main Gallery page: May include up to ten (10) separate galleries.
  • Gallery size: Each gallery may contain up to 100 client-supplied images.
  • Service-specific images:
  • If a client provides three (3) or more images tied to a specific service (e.g., roofing, kitchens, bathrooms), those images will appear in:
  • A gallery on the associated service page, and
  • A dedicated gallery on the main Gallery page.
  • Note: Overuse of large image sets or galleries on multiple pages can negatively impact page speed and search performance. Google prioritizes websites that display high-quality, relevant content over quantity.


Definition

The Photo Gallery widget displays a collection of images that can be opened in a lightbox view or linked to other site elements. Images may link to internal pages, anchors, popups, email addresses, or external URLs.

Each image supports a title, description, and alt text for accessibility and SEO. The widget can also connect to a Professional Instagram feed (Business or Creator account) to automatically display client imagery.

For setup details, see Connect a Professional Instagram Feed.


Content Editor

The Content Editor manages all images, text, and link settings within the gallery.

To access:

  • Right-click the widget and select Edit Content, or
  • In Flex Mode or Editor 2.0, click the element and select Edit Content from the floating menu.


Gallery Setup Options

  • Enable links on gallery images: Toggles link functionality for each image.
  • When enabled, the lightbox view is disabled.
  • If no link is applied, clicking the image does nothing.
  • Connect Instagram: Links the gallery to a Professional Instagram account (images only; videos are not displayed).
  • Add Image: Add one or multiple images at once.
  • Select from existing images.
  • Click Full View to open the Image Picker.
  • Use the plus icon to upload new images.


Design and Image Treatment

The designer may use the tools available within the Photo Gallery widget to best showcase the imagery provided by the client. These tools allow designers to:

  • Crop or adjust images to improve visual composition.
  • Reposition the focal point of an image to highlight the subject.
  • Add optional design elements such as a headline, text overlay, or button, if appropriate for the gallery or requested by the client.


The
placement and styling of these design elements are at the discretion of the designer, based on the client’s imagery, brand tone, and desired visual impact. Duda offers several layout options for galleries, and designers are not limited to the default layout provided in a section or PBN. The selected layout should complement the type and orientation of the client’s images.

  • Consistency Note - While galleries may vary by page or purpose, any galleries that include text, buttons, or overlays should maintain a consistent design approach — including spacing, typography, and element placement — within the same website. Consistency ensures a unified look and feel while still allowing flexibility across pages.


Spacing, image alignment, and other stylistic choices are considered
designer preferences and may be adjusted as needed to best present the client’s imagery. These decisions should always prioritize:

  • Image clarity and professionalism
  • Page performance and load speed
  • Overall visual harmony with the site’s design


Performance and SEO Notes

  • HwP Lazy Loading optimizes page speed by deferring offscreen image loads.
  • Above-the-fold images are marked as important and load immediately.
  • Remaining images load after the page renders or as they scroll into view.
  • This improvement, introduced in January 2019, contributes to a 5–10% improvement in Google Lighthouse scores.
  • Grouping images by theme or service improves user navigation and visual impact.
  • Avoid duplicating identical galleries across multiple pages — this may dilute SEO value and confuse indexing.

Instagram Feed

The Photo Gallery widget can display images from a connected Professional Instagram account (Business or Creator). This option allows clients to automatically feature recent social posts directly on their website.

  • Only image posts will display; videos and reels are not supported.
  • The connection must use a Professional Instagram account — personal accounts are not eligible.
  • The feed updates automatically, reflecting the latest Instagram images.
  • This feature is intended for clients who regularly maintain an active, professional-quality feed.

Headline

text

Logos / Badges

  • Logos and accreditation/affiliation badges must be placed in the alloted row in the footer section
  • Do not place a single/lone logo in the badge row:
  • If only one is supplied, add to the footer column with business hours.
  • On alternate footers, place on the Contact Us page underneath social icons

Rules & Guidelines

  • Placement: Logos/badges are displayed in the assigned section above the footer.
  • Alt Text: Every logo/badge must include descriptive alt text.
  • Consistency: Normalize logos of varying shapes/sizes by placing them on a square canvas with 15–20px whitespace for a uniform appearance.
  • Quality:
  • If a logo appears pixelated or blurred, confirm placement size, check for higher-resolution sources (Google search or resource library), and replace both desktop and mobile assets for consistency.
  • If a high-quality replacement is unavailable, keep the best available file — but document it in assumptions if it impacts quality.
  • Linking: Enable logo links only when required (e.g., accreditation site).
  • Apply zoom hover only to logos with links.
  • Missing Logos / Badges
  • Do not create text-based logos or badges as substitutes.
  • If a client-supplied logo/badge cannot be found (and is not available in the resource library or through a verified high-res source), add the following assumption:
  • “Assumption: Logo/Badge unavailable, not added.”
  • Do not place a single lone logo/badge in the footer row. Instead:
  • If there is only one, move it to the footer column with business hours.
  • If using an alternate footer, place the lone logo/badge at the bottom of the Contact Us page content.


Client Expectation Note

Logos and badges may be standardized for consistent display (square canvas, spacing, etc.). This may result in slight differences from the original file, but ensures a clean and professional presentation.

Logos / Badges

  • Logos and accreditation/affiliation badges must be placed in the alloted row in the footer section
  • Do not place a single/lone logo in the badge row:
  • If only one is supplied, add to the footer column with business hours.
  • On alternate footers, place on the Contact Us page underneath social icons

Rules & Guidelines

  • Placement: Logos/badges are displayed in the assigned section above the footer.
  • Alt Text: Every logo/badge must include descriptive alt text.
  • Consistency: Normalize logos of varying shapes/sizes by placing them on a square canvas with 15–20px whitespace for a uniform appearance.
  • Quality:
  • If a logo appears pixelated or blurred, confirm placement size, check for higher-resolution sources (Google search or resource library), and replace both desktop and mobile assets for consistency.
  • If a high-quality replacement is unavailable, keep the best available file — but document it in assumptions if it impacts quality.
  • Linking: Enable logo links only when required (e.g., accreditation site).
  • Apply zoom hover only to logos with links.
  • Missing Logos / Badges
  • Do not create text-based logos or badges as substitutes.
  • If a client-supplied logo/badge cannot be found (and is not available in the resource library or through a verified high-res source), add the following assumption:
  • “Assumption: Logo/Badge unavailable, not added.”
  • Do not place a single lone logo/badge in the footer row. Instead:
  • If there is only one, move it to the footer column with business hours.
  • If using an alternate footer, place the lone logo/badge at the bottom of the Contact Us page content.


Client Expectation Note

Logos and badges may be standardized for consistent display (square canvas, spacing, etc.). This may result in slight differences from the original file, but ensures a clean and professional presentation.

Before/After Image Widget

  • Displays two images in a slider for visual comparison.
  • Best for services with clear transformations (e.g., lawn care, roofing, remodels).
  • Limitations:
  • Avoid if “before” and “after” images differ in angle, lighting, or quality.
  • Avoid if labels/text are already embedded in the images (causes clutter).


For interactive Before/After comparisons, Before/After Image Widget section

Favicon and Social Network Image

Definition

Favicons and Open Graph images are site icons that support branding and improve user experience. A favicon appears in browser tabs, bookmarks, and search engine results pages (SERPs), while an Open Graph image appears when a site link is shared on platforms such as Facebook, LinkedIn, or iMessage.


Hibu One Smart Site Rules

Favicon

  • A favicon is included by default on every Hibu One Smart Site.
  • The favicon will usually be created from the client’s logo (or a simplified part of it) for best branding.
  • If the logo is not appropriate for use (too much text, too much detail, unrecognizable, etc.), a generic icon may be used instead. It is expected that the designer update the icon to match one of the client’s brand colors.
  • If the client supplies their own favicon, it must be at least 16 × 16 px.
  • Accepted file types: .ico, .png, .jpg/.jpeg.
  • Hibu will not edit client-supplied images.
  • Note: Favicons will always display as a square, which can cause vertical or detailed images to become unrecognizable.

Open Graph Image (Social Sharing)

  • Every Hibu One Smart Site includes a default Open Graph (OG) image for social sharing.
  • Recommended size: 1200 × 630 px.
  • Typical choices include:
  • Client’s logo
  • A truck, storefront, or team photo
  • The homepage hero image
  • Another strong image that represents the business


Page-Specific Overrides

  • A page-specific OG image can replace the default.
  • This image appears when a page link is shared on platforms like Facebook, LinkedIn, or iMessage.
  • Example: A restaurant may set a photo of its signature dish to appear when its Menu page is shared.


Client Submissions

  • Clients may provide their own OG image if it meets the size requirement.


Note:  Open Graph images may also display in iMessage previews on iPhones. They are not consistently shown in Android SMS apps, though some messaging platforms (e.g., WhatsApp, Messenger) may display them.

Headline

This is paragraph text. Click it or hit the Manage Text button to change the font, color, size, format, and more. To set up site-wide paragraph and title styles, go to Site Theme.