Skip to main content

Images

An overview of images and how to use, including display and sizing options.

Images are an essential part of your content. This article will explain some fundamental concepts for images and show you how to scale and position your images and manage their properties (including size).

Supported media formats

Supported media formats (next to streaming video) for Wordpond include:

JPG, PNG, SVG, PDF, GIF, WebP, MP4

 

Adding images

Here's how to add an image to your article:

Open the Blocks menu: type ' / ' or click the + plus icon at the beginning of a paragraph

select 'Image' from the list

image-Gpc5x6JIYDTbo9f0

Adding images to your content

Next, upload your image. Done!

image-PoIPRs-4z4LutVPe

Replacing images

Hover over the image you want to replace.

Click the 'replace' icon & upload the new image.

image-sk_zDYh63BumAR_C

Deleting images

Hover over the image you want to delete.

Click the 'delete' icon (trash can).

image-qrPLMVqNJso-dVjr

 

Image settings

You can open the image settings panel by hovering over the image and clicking the 'edit' icon (pencil).

image-_k9HcgII2ciM3lvK

An image is always set in a container. In the settings panel, you can select how the image (content) interacts with its container.

Image (container) size

By default, an uploaded image will use a container that fits the default content width of your article.

You can, however, change the dimensions of your image container. For the image width, you can select a size:

  • smaller than the content width, or set to
  • full page width

Visually, you will see the image resize within the container when you change the dimensions.

image-3Ih0UHuIIAYsvukJ

You can change the dimensions of the container either in the settings panel or by dragging the handles that appear on the image container when you click the Edit button.

 

Note that the aspect ratio of your image will be maintained when you resize either width or height.

image-UGxtXttJdH3ZdztM

You can stop this by turning the link between width and height off.

 

Alignment

You can choose to have your image left, right, or centered. The alignment will only have a visual effect if the image width is smaller than your content width.

A lone tree sitting in the middle of a lake

Left aligned

A lone tree sitting in the middle of a lake

Center aligned

A lone tree sitting in the middle of a lake

Right aligned

 

Display options

You have several options available to define how to display your image within its container.

Here are the several options next to one another. More details for each option is added below.

image-AT3eeeDyWjXGOPxk

Image layout options

Fill

A lone tree sitting in the middle of a lake

Fill

Fill: the image will stretch horizontally and vertically to fill its container. If you turn off the fixed aspect ratio (see above), the image can get distorted when you change the container size. Best for: background images.

Contain:

A lone tree sitting in the middle of a lake

Contain

Contain: The image will stretch up to the available height or width of the container, whichever is smallest. Some empty space can occur in the container.

Cover

A lone tree sitting in the middle of a lake

Cover

Cover: the image will increase to fit the width or height of its container, whichever is smallest. You get an effect similar to Fill but without the possible distortion. With this setting, some parts of the image can be cut off.

Fit Width:

A lone tree sitting in the middle of a lake

Replace this with image caption

The image will increase to fit the width of its container, and the container will stretch vertically to show the image completely. Best for: general use, portraits.

 

Cropping images

After clicking Edit, the Cropping icon will appear on your image.

image-V573CkdQwETRbOuo

To crop an image, click the icon, and you will be able to crop the image.

image-aNii6uXrKcgYmUZz

Adjust the cropping section

Adjust the blue rectangle to crop the image.

Once done, click the Accept button (checkmark icon) to accept the changes.

 

Adding links to images

image-CYN2j_JTSqAK1zRm

You can add links to images. Clicking the 'Add' button (the + icon) will open up the details panel.

image-zEyeyDHt9Oo7qKbN

You can enter the desired destination and select whether to open it in a new tab.

 

Captions

image-8RlQPMZLoSLdIako

To add captions to your images, turn the captions setting to ON.

For more details on how to work with captions, please check this help article.

 

Alt text

Alt text is important for accessibility (screen readers) and search engine optimization (SEO).

image-cv71MESpP8-kLytS

Wordpond uses AI, its AI engine, to generate alt texts automatically.

You can override these by entering your alt text.

Important note: Image resolution and optimization

Wordpond automatically optimizes your images.

In the article editor, we often use a downscaled version of your images for the editor's performance. This might cause your image to look less crisp.

You will not have this in your preview and published version as we re-render and optimize the image for publication.