Working with Pictures in AUEN

Adding Pictures

1. Access the Editor: Log into your AUEN account and open your website editor.
2. Select the Image Element: In the elements panel, find and select the "Image" or "Picture" element.
3. Add to Your Page: Drag and drop the image element to your desired location on the page.
4. Upload or Select an Image: Click on the placeholder image to open the image settings. Choose to upload a new image from your computer or select from your AUEN image library.

Customizing Images

1. Resize Images: Use the resize handles to adjust the image size within your layout. Maintain aspect ratio by holding the Shift key while resizing.
2. Crop Images: Access the image editor to crop your pictures as needed. Choose from preset aspect ratios or create a custom crop.
3. Add Effects: Apply filters or adjustments like brightness, contrast, and saturation. Add borders or rounded corners to your images.
4. Set Alt Text: Always add alternative text to your images for accessibility and SEO purposes.

Image Optimization

1. File Size: AUEN may automatically optimize your images for web use. For best performance, aim to keep image file sizes under 200KB when possible.
2. Image Formats: Use JPG for photographs and complex images with many colors. Use PNG for images that require transparency or have fewer colors.
3. Responsive Images: AUEN typically handles responsive image sizing automatically. Check how your images appear on different device sizes using the preview mode.

Advanced Image Features

1. Image Galleries: Create image galleries or sliders to showcase multiple pictures. Customize gallery layouts and transition effects.
2. Background Images: Set images as backgrounds for Stripes or entire pages. Adjust background image positioning and repeat settings.
3. Hover Effects: Add hover effects to images for interactive elements. Options may include zoom, fade, or overlay text on hover.

Best Practices for Using Pictures

1. Quality and Relevance: Use high-quality, relevant images that enhance your content.
2. Consistent Style: Maintain a consistent style and tone across your website's imagery.
3. Balance: Strike a balance between text and images for optimal visual appeal and readability.
4. Legal Considerations: Ensure you have the right to use all images on your site. Use royalty-free or properly licensed images.
5. Loading Speed: Be mindful of image file sizes to maintain fast loading times.
6. Mobile Optimization: Ensure your images look good and load quickly on mobile devices.
7. Regular Updates: Periodically review and update your images to keep your site fresh and current.

Troubleshooting Common Issues

• Images Not Loading: Check your image file formats and sizes. Ensure the image URLs are correct.
• Distorted Images: Always maintain aspect ratios when resizing to avoid distortion.
• Blurry Images: Use high-resolution images and avoid enlarging small images beyond their original size.