Media

The Media section in Superlite is used to manage images and other supported files that are used on the website.

Uploaded media can be reused across pages, selected by themes and used for settings such as logos, favicons and social sharing images.

Superlite keeps the original uploaded file and can create optimized versions for the public website.

Opening the Media library

Open Media from the main navigation to access the media library.

The library contains files that have been uploaded to Superlite and are available for use on the website.

From here you can upload new files, review existing media and select images for use in content or settings.

Uploading an image

Choose the upload option in the Media section and select an image from your computer.

Superlite checks the file before accepting it.

Supported standard image formats include:

• JPEG
• PNG
• WebP
• GIF
• SVG

Files that could be executed as server code, such as PHP files, are not accepted as media.

Once the image has been uploaded successfully, it becomes available in the media library.

Using existing media

You do not need to upload the same image every time you want to use it.

Images already stored in the media library can be selected again when editing a page or changing a setting that accepts media.

This is useful for images that appear in several places on the site, such as logos, illustrations or commonly reused photographs.

Original files

Superlite keeps the original uploaded image in the media archive.

The original file acts as the source from which optimized versions can be created.

The public website does not always need to use the original file directly.

For example, a large photograph can be stored as the original while Superlite generates smaller versions that are more appropriate for normal page display.

File names

Each uploaded image has a file name.

Clear file names make the media library easier to manage, especially on sites with many images.

A descriptive file name can also make it easier to understand what an image contains without opening it.

Avoid using unclear names such as:

IMG_3847.jpg

when a more descriptive name is practical.

Image titles

An image can have a title stored with its media information.

The title is primarily useful for identifying and managing the image inside Superlite.

Whether the title is shown on the public website depends on how the image is used and how the active theme renders it.

Alternative text

Alternative text describes the content or purpose of an image.

It is important for accessibility because screen readers can use it when the image cannot be seen.

Alternative text can also help when an image fails to load.

Write alternative text that explains the useful information contained in the image.

For example:

Aerial view of central Stockholm

is more useful than:

image123

Decorative images that do not add meaningful information may not require descriptive alternative text.

The appropriate choice depends on how the image is being used.

Image captions

Images can have captions where supported.

A caption is text associated with the image that can be displayed to visitors.

Captions are useful for adding context, identifying people or places, explaining diagrams or providing other information directly related to the image.

The active theme controls how captions appear on the public website.

Image dimensions

Superlite can store information about the dimensions of uploaded images.

Dimensions describe the image width and height in pixels.

This information can help Superlite and the active theme choose an appropriate image version for different uses.

Large source images do not necessarily need to be delivered at their full dimensions to every visitor.

File size

The media library can keep track of the size of uploaded files.

Large image files can make pages slower to load.

Superlite can therefore create optimized public versions while keeping the original image available in the media archive.

You should still avoid uploading unnecessarily large files when a smaller original would provide the same visual quality.

Thumbnails

Superlite can create thumbnail versions of uploaded images.

Thumbnails are small versions used in places such as the media library or other interfaces where displaying the full image would be unnecessary.

They make it easier to browse a large number of media files without loading every original image at full size.

WebP versions

Superlite can create WebP versions of supported images.

WebP can often provide a smaller file size than older image formats while maintaining good visual quality.

Smaller images can improve page loading performance.

The original uploaded file remains available even when an optimized WebP version is generated.

Multiple image sizes

Superlite can create several sizes of the same image.

For example, the same source image may be available as a thumbnail, a medium sized image and a larger version.

This allows the website to use an image that is appropriate for the space where it appears instead of always loading the largest version.

Available image sizes can be controlled through the Superlite settings.

Responsive images

Superlite can support responsive image output using `srcset`.

Responsive images allow the browser to choose between different versions of the same image depending on factors such as screen size and display resolution.

A visitor using a small mobile screen may therefore receive a smaller image than someone viewing the same page on a large desktop screen.

This reduces unnecessary downloads without requiring separate content for different devices.

The active theme determines how the available image versions are used in the public HTML.

Using images in pages

Images from the media library can be inserted into page content through the editor.

Add an image block and choose an existing image or upload a new one where the interface allows it.

The image is then stored as part of the page content.

The theme controls how the image appears when the page is published.

Changing the theme does not require you to upload the image again.

Replacing an image

If you want different content to appear in an existing image block, select another image from the media library.

This changes the image used by that block without requiring you to recreate the rest of the page.

Be careful when replacing media that may be used in several places.

If you are changing an existing media file globally rather than selecting another image for one page, the change may affect every place that uses that media item.

Logos

A theme can provide a setting for selecting a site logo.

When this option is available, choose an image from the media library.

The theme determines where the logo appears and how large it is displayed.

A logo does not need to be uploaded separately for every theme. Themes can use the same image from the Superlite media library when their settings support it.

Favicons

A favicon is the small site icon commonly displayed in browser tabs and bookmarks.

Superlite settings can allow you to select a favicon from the available media.

The appropriate image dimensions and supported output depend on how the favicon is implemented by the active site configuration.

Use a simple image that remains recognizable when displayed at a very small size.

Social sharing images

Images in the media library can also be used as Open Graph images.

An Open Graph image can be shown when a page is shared on services that use the page's social metadata.

You can select an appropriate image in the SEO settings for the page where this functionality is available.

This allows the same media library to be used for both visible page content and metadata.

SVG files

SVG is supported differently from normal raster images such as JPEG or PNG.

An SVG file contains markup rather than only image pixels. Because of this, unsafe SVG content can potentially contain code or references that should not be published directly.

Superlite therefore treats SVG files specially and sanitizes them before they can be used publicly.

Only use SVG files from sources you trust.

Unsupported files

The Media section is not intended to be a general file storage area.

Files that could present a security risk are rejected.

In particular, executable server files must never be accepted as media.

If an upload fails, first check that the file format is supported and that the file is a valid example of that format.

Media and themes

Superlite manages the media, but the active theme controls its presentation.

The theme can decide how wide an image should appear, how captions are styled, which generated image size is appropriate and whether responsive image versions should be used.

This separation allows you to change the design of the website without replacing the underlying media library.

Media and the public website

The media archive belongs to the CMS, while optimized public media files can be generated for use by the website.

This follows the same principle as the rest of Superlite.

The CMS keeps the source information and files.

The public website receives the versions required to display the site efficiently.