Image

This guide explains how to upload images to the Varbase Media Library.

Supported Formats

Varbase supports the following image formats:

• JPG / JPEG: Best for photographs and images with many colors. Uses lossy compression.

• PNG: Best for graphics, logos, and images that require transparency. Uses lossless compression.

• GIF: Supports simple animations and transparency. Limited to 256 colors.

• SVG: Scalable vector graphics. Ideal for logos, icons, and illustrations that need to scale without quality loss.

• WebP: A modern format that provides superior compression for both lossy and lossless images. Recommended for web use.

Steps to Upload an Image

1. Navigate to Content > Media and click Add media, or use the media widget on a content editing form.

2. Select Image as the media type.

3. Upload the image file:

   • Drag and drop the file into the upload area, or

   • Click the upload area to browse your computer and select the file.

4. Fill in the image metadata:

   • Name: A descriptive name for the image. This is used in the Media Library for identification.

   • Alternative text (alt text): A text description of the image for accessibility. Screen readers use alt text to describe images to visually impaired users. This field is required.

   • Title: An optional title attribute that appears as a tooltip when visitors hover over the image.

5. Set the focal point.

   • After the image uploads, a focal point indicator appears on the image preview.

   • Click and drag the focal point marker to the most important area of the image.

   • The focal point ensures this area remains visible when the image is cropped for different display sizes.

6. Click Save to add the image to the Media Library.

Writing Good Alt Text

Alt text is essential for accessibility and SEO. Follow these guidelines:

• Be descriptive. Describe what the image shows (e.g., "Team members gathered around a conference table during a planning meeting").

• Be concise. Keep alt text brief but informative, typically one to two sentences.

• Avoid redundancy. Do not start with "Image of" or "Photo of", as screen readers already announce that it is an image.

• Convey purpose. If the image serves a specific function (e.g., a button or link), describe the function rather than the visual appearance.

• Decorative images. If the image is purely decorative and adds no informational value, alt text can be left empty (but this is rare for editorial content).

Image Optimization Tips

• Resize before uploading. Resize images to a reasonable resolution before uploading. Extremely large images (e.g., 5000x5000 pixels) are unnecessary for web display and increase page load times.

• Compress images. Use image compression tools to reduce file size without noticeable quality loss.

• Use the right format. Use JPG for photographs, PNG for graphics with transparency, SVG for vector illustrations, and WebP for general web use.

• Consistent dimensions. For content types that display images in a grid or list, try to use images with consistent aspect ratios for a clean layout.

Editing an Existing Image

1. Navigate to Content > Media and find the image in the Media Library.

2. Click Edit next to the image.

3. Update the metadata (name, alt text, title) or replace the image file.

4. Adjust the focal point if needed.

5. Click Save to apply the changes.