# 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.