Skip Navigation
Skip Main Content

TS Logo

Image Guidelines & Resources

Image Upload

Image Upload Requirements

Before uploading images to a practice library in PracticeBeat, please ensure your files meet the following criteria:

  • File type of PNG or JPEG
  • Image width that is 2x the Render Size (standard screen width is 1440px)

    Image Width Size Reference:

    • Full Page Image: 2880px
    • Half Page Image: 1200px
    • 1/3 Page Image: 600px
    • 1/4 Page Image: 300px
    • Large Icon: 250px
    • Medium Icon: 100px
    • Small Icon: 75px
  • File name is SEO-friendly
    • Use Hyphens (-): Google interprets hyphens as spaces, whereas underscores (_) can mash words together
    • All Lowercase: Use lowercase letters to avoid technical issues on case-sensitive servers
    • Be Descriptive & Concise: Use 2–5 words that accurately describe the content
    • Avoid Special Characters: Do not use ?, &, !, or unnecessary words like "a" or "the"
    • EXAMPLE: Use dental-waiting-room.png instead of IMG_9876.png

Use the tool below if you would like assistance naming and resizing images

Image Preprocessor

  1. Select images and click Analyze Images.
  2. The AI will suggest an SEO name for each image.
  3. Review and edit the SEO names, then choose a Usage for every image.
  4. Click Apply & Download — images will be resized to match the chosen usage width.

Review & Edit

PreviewOriginal FileSEO NameUsage

Image Implementation

Image Implementation Requirements

After uploading your images to a practice library, the platform generates two unique links: a WebP URL (for performance) and a Fallback Image URL (PNG or JPEG).

Use those links and the templates below to implement these images via CSS or HTML.

  • CSS Implementation
    NOTE: Replace all items highlighted in RED with corresponding information. Only use WebP Image URL.
    .your-element { background-image: url("https://storage.googleapis.com/treatspace-prod-media/image.webp"); background-repeat: no-repeat; background-size: cover; }
  • HTML Implementation
    NOTE: Replace all items highlighted in RED with corresponding information. Use both WebP Image and Fallback Image URLs.
    <img alt="image description" class="img-fluid" loading="lazy" onerror="this.onerror=null;this.src='https://storage.googleapis.com/treatspace-prod-media/fallback-image.jpeg'" src="https://storage.googleapis.com/treatspace-prod-media/main-image.webp">
  • Implementation Best Practices
    Above the Fold Images:
    EXAMPLE: 1st Hero Banner Slide, 1st Service/Resource Photo, Profile Banners.

    Below the Fold Images:
    EXAMPLE: Any image outside of the initial viewport.

Use the tool below if you would like assistance generating CSS code for background images or HTML code for image elements

Image Code Generator

  1. Select preferred code option: CSS Background image or HTML Image element.
  2. Enter in any required image URLs.
  3. Click the Generate Code button and copy generated code.