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
Next, upload your image. Done!
Replacing images
Hover over the image you want to replace.
Click the 'replace' icon & upload the new image.
Deleting images
Hover over the image you want to delete.
Click the 'delete' icon (trash can).
Image settings
You can open the image settings panel by hovering over the image and clicking the 'edit' icon (pencil).
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.
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.
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.
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.
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:
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
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:
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.
To crop an image, click the icon, and you will be able to crop the image.
Adjust the blue rectangle to crop the image.
Once done, click the Accept button (checkmark icon) to accept the changes.
Adding links to images
You can add links to images. Clicking the 'Add' button (the + icon) will open up the details panel.
You can enter the desired destination and select whether to open it in a new tab.
Captions
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).
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.