Skip to main content

How to Add, Resize, and Caption Images in Joomla (with Alt Text)

Using WordPress instead? See How to Add, Resize, and Caption Images in WordPress (with Alt Text).

This covers the built-in tools in Joomla 5 and 6: the Media Manager and the article editor (TinyMCE).

Before you upload: size and format

Large images slow your site down. Before uploading:

  • Width: resize to about the largest size it will display. As a rule of thumb, we recommend about 1920px wide for full-width banners, about 1200px for images that span the main content area, and about 800px or less for images that sit beside text. Your template may differ, so ask us if you're not sure.
  • Format: use JPEG or WebP for photos, PNG for graphics with sharp edges or transparency, and SVG only if your site is set up to allow it.
  • Compress: run photos through a compression tool or your photo editor's "export for web" option before uploading. A JPEG quality setting around 70-80% usually looks the same to visitors and is much smaller. Smaller files mean faster pages, especially on phones.
  • File name: use plain, descriptive names like front-office-dalton.jpg, not IMG_4032.jpg.

Upload to the Media Manager

  1. Go to Content > Media.
  2. Open the folder you want (or create one with Create New Folder).
  3. Click Upload and pick your file, or drag files into the window.

Resize or crop in Joomla

Joomla has a basic image editor:

  1. In Content > Media, hover over the image and click the pencil (edit) icon.
  2. Use the Crop, Resize, and Rotate tabs. (The image editor works with JPEG, PNG, and WebP files.)
  3. Click Save & Close. This changes the file itself, so keep an original copy elsewhere if you may need it.

Add an image to an article

  1. Open the article (Content > Articles, then click the title).
  2. Click in the text where you want the image.
  3. Click CMS Content > Media in the editor toolbar.
  4. Select the image (or upload one from here).
  5. Fill in the fields:
    • Image Description (Alt Text): see below.
    • No Description: tick only for purely decorative images.
    • Image Class: optional, for alignment classes your template provides.
    • Lazy Loading: leave on so images below the fold load as needed.
    • Figure Caption: text shown under the image.
  6. Click Insert Media, then Save.

To change the displayed size later, click the image in the editor, click the image button in the toolbar, and adjust the width and height (keep the proportions locked). Displaying a big file smaller doesn't make it load faster, so resize the file itself when you can.

Intro and full article images

The Images and Links tab has Intro Image and Full Article Image fields, each with its own description (alt text), No Description option, and caption. Your template decides where these show, usually in blog lists and at the top of the article.

Writing good alt text

Alt text is read aloud by screen readers and shown if an image doesn't load. It helps people and search engines understand the image.

  • Describe what matters in the image in a short sentence: "Two technicians installing a heat pump outside a brick house."
  • Don't start with "image of" or "picture of."
  • If the image is a link or button, describe where it goes.
  • If the text around it already says the same thing, or it's decoration, tick No Description so screen readers skip it.
  • Don't stuff it with keywords.

Prefer we handle it?

If you'd rather spend your time running your business, our boutique hosting, available to our clients, including sites moved over from another host, takes a proactive approach to security and monitoring, with nightly backups, 24/7 outage monitoring, and ongoing core CMS updates.

Joomla