Creating custom images for your website can greatly enhance your visual content and help convey your brand’s message effectively. If you want to generate unique, AI-powered images for your website, OzSpeed offers integration with an AI Image Generator that allows you to create high-quality visuals quickly and easily. Here’s a step-by-step guide on how to use the AI Image Generator.
Step 1: Access the AI Image Generator #
To start generating custom images, open the AI Image Generator tool in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Media Library.
- Click on AI Image Generator in the toolbar.
Tip: #
- Have a clear idea of the type of image you want to generate (e.g., product photos, backgrounds, icons) to get the best results.
Step 2: Enter Your Image Prompt #
The AI Image Generator creates images based on a text prompt. The more specific and detailed your prompt, the better the result.
How to Write a Prompt: #
- In the prompt box, describe the image you want to create. Be as detailed as possible.
- Example 1: “A modern office workspace with a laptop on a wooden desk, sunlight streaming through a window.”
- Example 2: “A vibrant city skyline at sunset with skyscrapers reflecting the orange and pink hues of the sky.”
- Click Generate Image.
Tip: #
- Include details like colors, styles, and elements to guide the AI and get the desired output.
Step 3: Review and Refine the Generated Image #
The AI will create a few variations based on your prompt. You can select the one you like best or refine your prompt for better results.
How to Refine the Image: #
- Browse through the generated image variations.
- If the image isn’t quite right, click Edit Prompt and make adjustments (e.g., change colors, add or remove elements).
- Click Regenerate to create new versions.
Tip: #
- Be specific with your descriptions. Instead of “a car,” say “a red sports car on a coastal road during sunset.”
Step 4: Download and Add the Image to Your Media Library #
Once you’re happy with the generated image, you can download it and add it to your Media Library.
How to Download: #
- Click Download Image to save the file to your computer.
- Click Add to Media Library to upload the image directly to your website’s media collection.
Tip: #
- Use high-resolution images for hero sections and banners, and smaller, optimized images for thumbnails and icons.
Step 5: Insert the Image into Your Website #
After adding the image to your Media Library, you can easily insert it into any section of your website.
How to Insert the Image: #
- Click Add Element in the editor toolbar.
- Select Image Block and choose the AI-generated image from your Media Library.
- Resize and position the image as needed.
- Click Save.
Tip: #
- Use the image editing tools in hPanel to adjust brightness, contrast, and cropping if needed.
Step 6: Optimize the Image for Web Use #
To ensure fast loading times, optimize the image before publishing your site.
How to Optimize: #
- Go to Media Library > Optimize Image.
- Choose the compression level (e.g., medium, high).
- Click Apply Optimization.
Tip: #
- Use the WebP format for best performance and quality balance.
Step 7: Preview and Publish Your Changes #
Before going live, preview your website to see how the new image looks across different devices.
How to Preview: #
- Click Preview in the top toolbar.
- Check the image on both desktop and mobile views to ensure it looks good.
- Click Publish to make the changes live.
Tip: #
- Test the page loading speed after adding the image to ensure it doesn’t slow down your site.
Troubleshooting Tips #
- Image Doesn’t Match the Prompt:
- Refine your prompt with more specific details or try different keywords.
- Use adjectives and descriptive terms to guide the AI.
- Image Quality Is Low:
- Ensure you’re generating images in high resolution.
- Use the image editor in hPanel to enhance the quality before adding it to your site.
- Slow Page Load Times:
- Compress the image using the Optimize Image tool in the Media Library.
- Enable lazy loading for images in Performance Settings.
Additional Tips: #
- Experiment with Styles: Try different styles in your prompt (e.g., “realistic,” “cartoon,” “minimalist”) to get a variety of image outputs.
- Use for Social Media: Generate unique visuals for social media posts, banners, and ads to keep your branding consistent.
- Stay On-Brand: Make sure the generated images align with your brand’s colors, style, and tone.
