Managing Images and Media

Images and videos make your website visually appealing and reinforce your message. Webey offers comprehensive capabilities for uploading, managing, and optimizing media. In this article, you will learn how to add images and videos to your pages and how to optimize them for speed, SEO, and accessibility.

Uploading Images

There are several ways to add images to your Webey page:

• Via the Image block — add an Image block to your page and click Upload image. Select a file from your computer and it will be automatically uploaded to the media library.
• Drag and drop — drag an image directly from your file manager to the upload field in the editor. This is the fastest way to add images.
• Media library — click Choose from library to select a previously uploaded image. All images you upload are automatically saved in your site's media library.

The Media Library

The media library is a central overview of all uploaded files on your site. You can find the media library in the left menu under Media. Here you can:

• View all uploaded images and files in a grid or list view.
• Search for specific files by filename.
• Delete files you no longer need.
• Copy the URL of a file to use it elsewhere.

The media library is shared across all pages of your site, so an image you upload once can be reused on multiple pages.

Supported File Formats

Webey supports the following image formats:

• JPEG (.jpg, .jpeg) — the most widely used format for photos. Offers good compression with acceptable quality loss. Ideal for photographs and images with lots of color variation.
• PNG (.png) — supports transparency and is lossless. Use this for logos, icons, and images with sharp edges or text.
• WebP (.webp) — a modern format that produces smaller files than JPEG and PNG with comparable quality. Recommended for the best performance.
• SVG (.svg) — scalable vector graphics that remain sharp at any screen size. Perfect for logos, icons, and simple illustrations.
• GIF (.gif) — supports animations and transparency. Use this for simple animations, but keep in mind that GIF files can be large.

Image Block Settings

When you select an Image block, you have access to the following settings:

Alt Text

The alt text (alternative text) describes the content of the image. This is essential for two reasons:

• Accessibility — screen readers read the alt text aloud to visitors who cannot see the image. Describe what is shown in the image, for example "Team meeting at a large wooden table".
• SEO — search engines use the alt text to understand the content of images. Good alt text helps your page rank higher in image search results.

Always fill in alt text for content images. For purely decorative images, you can leave the alt text empty.

Caption

The caption appears below the image and provides additional context. Use it for source attribution, a brief description, or supplementary information that is relevant to the visitor.

Dimensions and Sizing

Adjust the display of your image with the following options:

• Width — set the width as a percentage of the container or as a fixed pixel value.
• Height — by default, the height is automatically calculated based on the aspect ratio. You can also set a fixed height.
• Object-fit — determine how the image fits within the frame: cover (fills the entire frame, may crop), contain (fits entirely within the frame), or fill (stretches the image).

Alignment

Choose how the image is aligned within the block:

• Left — the image is on the left side, text wraps around the right.
• Center — the image is in the center of the block.
• Right — the image is on the right side.

The Gallery Block

To display multiple images side by side, use the Gallery block. This block shows images in an attractive grid. You can adjust the following settings:

• Number of columns — determine how many images are displayed side by side (2, 3, or 4 columns).
• Gap — set the spacing between the images.
• Aspect ratio — choose whether all images get the same ratio or keep their original proportions.

Upload multiple images at once by dragging them together to the upload field, or add them one by one from the media library.

The Video Block

With the Video block, you can embed videos from external platforms. Webey supports the following video sources:

• YouTube — paste the URL of a YouTube video (e.g., https://www.youtube.com/watch?v=...) and the video will be automatically embedded.
• Vimeo — paste the URL of a Vimeo video and it will be neatly embedded with the Vimeo player.

The video block automatically adapts to the width of the page and maintains the correct aspect ratio. You can limit the width via the block settings if you want to display the video smaller.

Image Optimization Tips

Fast loading times are crucial for user experience and SEO. Follow these tips to optimize your images:

Limit File Size

Large images slow down your website. Aim for a maximum file size of 200-500 KB per image for most use cases. Full-width hero images can be larger (up to 1 MB), but keep them as small as possible.

Use WebP

The WebP format offers up to 30% smaller files than JPEG at comparable quality. Convert your images to WebP before uploading them. Most image editing applications and online tools support WebP export.

Use the Right Dimensions

Upload images in the dimensions they will be displayed at. Uploading a 4000x3000 pixel image when it will only be shown at 800 pixels wide is a waste of bandwidth. Guidelines:

• Hero images — 1920x1080 pixels (full HD) is sufficient for full-width display.
• Content images — 800-1200 pixels wide is enough for most layouts.
• Thumbnails and gallery — 400-600 pixels wide is sufficient.

Alt Text for SEO

Write descriptive alt texts that accurately represent the content of the image. Avoid keyword stuffing — write natural descriptions. Good alt text is 5 to 15 words long and describes what is shown in the image.

File Names

Give your images descriptive filenames before uploading them. Use hyphens as separators and avoid spaces and special characters. For example: team-meeting-office.webp instead of IMG_20260215_143022.jpg. Descriptive filenames help search engines understand the context of the image.