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
  • Maximum width of 1920 pixels
  • 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 (Browse or Drag & Drop) and click the Analyze Images button.
  2. The AI will suggest an SEO image name for each image.
  3. Review and edit the names below, then click the Apply & Download button.
  4. Images wider than 1920 pixels will be scaled down proportionally.
Processing...

Review AI Suggestions

ImageOriginalSEO Name (Edit here)

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">

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.