How to add an image to a Joomla! article

When creating articles in Joomla!, it can be a great idea to include images or other illustrations to enhance their visual impact.

You can add images directly in the Edit Article screen. Head to Content > Articles then select an existing article to edit, or click the + New button to create a new article.

Move the cursor to the line in which you’d like to insert the image. From the formatting menu, select the Image button.

Article editor

If you’ve previously uploaded an image to your server, use the folder icons to navigate to the image you wish to insert. Alternatively, scroll down to the Upload files section, click Choose files, select the image to upload on your local computer, then click Start Upload to proceed.

Upload files section

Click the image, then scroll down to view the metadata options.

  • Image Description: This becomes the alt attribute for the image.
  • Image Title: Used for the optional caption and also becomes the title attribute in HTML.
  • Image Float: Sets the image alignment. By default, the align attribute is Not Set.
  • Caption: Enables the caption which displays the Image Title below the image.
  • Caption Class: Applies the entered class to the figcaption.

Image metadata options

Enter the metadata you wish to attach to the image, then click Insert.

Insert image

The Insert Image screen will close and the image will be displayed in the editor.

Image inserted

Resizing and spacing images

You’ll notice the image is displayed at its full size, which may not work well for your page design. You can constrain the image proportions by clicking the image and selecting the Insert/Edit image button in the toolbar.

Image resizing

Enter the horizontal and vertical dimensions and ensure the Constrain Proportions box is checked.

Dimensions settings

If you wish to create some space around the image, or add a border, select the Advanced tab and enter your desired settings. Click OK to update the image.

Image resized

Optimizing images

While Joomla! includes basic image editing features, it’s a good idea to fully optimize your images before you upload them. Reducing image size is a small task that can dramatically increase page load times.

Use an image editor to size your image files to the proportions you need, balancing file size and image size for optimal impact. When saving files, compare JPEG and PNG formats to see which offers the smaller file size. While JPEG files can be compressed to reduce file size, you can sometimes find that a PNG file offers higher quality and a smaller file size – even when the image itself is reasonably large.

Be sure to also take a look at image optimization apps, such as JPEGmini which is available for Mac and PC. These apps are able to reduce file sizes by up to 80%, without visibly reducing image quality.

JPEGmini website

A combination of optimized imagery and Joomla!’s simple to use formatting tools will ensure your articles deliver real visual impact, without slow load times.

For further questions, or if you need help, please open a support ticket from your HostPapa Dashboard. Follow this link to learn how.

Related Articles