Image Guidelines
No description provided.
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.pnginstead ofIMG_9876.png
Use the tool below if you would like assistance naming and resizing images
Image Preprocessor
- Select images and click Analyze Images.
- The AI will suggest an SEO name for each image.
- Review and edit the SEO names, then choose a Usage for every image.
- Click Apply & Download — images will be resized to match the chosen usage width.
Processing…
Review & Edit
⚠️ Please select a Usage for every image before downloading.
| Preview | Original File | SEO Name | Usage |
|---|
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
- Select preferred code option: CSS Background image or HTML Image element.
- Enter in any required image URLs.
- Click the Generate Code button and copy generated code.
