IT in Education

Using the built-in media manager

joomlaThe built-in Media manager has lots of useful features. This article describes some configurations that I make when using this feature.


Image editing

You can perform basic edits to images inside the Media Manager, without the need for a third party image editor like Gimp.

  1. Go to Content > Media.
  2. In Gallery view, hover on your image.
  3. Select > Edit.

In the Media Edit screen, you can Crop, Resize and Rotate your images.

Lazy Loading

Lazy loading refers to the process of images being loaded in a browser, but only as the user scrolls down and the image becomes visible. This can dramatically speed up the page loading speed, improving your SEO.

  1. Open an article for editing.
  2. In TinyMCE go to CMS Content > Media.
  3. Select an image for adding.
  4. The option Image will be lazyloaded is enabled by default.

For other Joomla editors there are similar options.

  1. In JCE, add an image.
  2. Select the Advanced tab.
  3. For the Loading option, select Lazy.

WebP images

WebP images are increasingly replacing .jpg files as the default image format for web pages. They offer upto 50% smaller file sizes.

  1. Log on to Joomla with your admin account.
  2. Go to Content > Media.
  3. Click the Options button.
  4. Append the following comma-separated settings:
    1. Allowed Extensions: .webp,WEBP
    2. Legal Image Extensions (File Types): .webp
    3. Legal MIME Types: image/webp

You will now be able to see webp files and upload them.

SVG images

SVGs (Scalable Vector Graphics) are not supported by default because SVGs can be used to perform both client-side and server-side attacks. So only use SVGs that you trust (i.e. that you've made yourself). Nevertheless, I like to use SVG images throughout my websites. Here are the steps to include SVGs in Media Manager.

  1. Log on to Joomla with your admin account.
  2. Go to Content > Media.
  3. Click the Options button.
  4. Append the following comma-separated settings:
    1. Allowed Extensions: .svg
    2. Legal Image Extensions (File Types): .svg
    3. Legal MIME Types: image/svg+xml

You will now be able to see SVG files and upload them.

Unable to upload file

Note that Joomla will prevent the upload of SVG files that aren't sanitized.

I typically use Inkscape for my SVG editing, and I found that the file needed to be saved as a Plain SVG, or even better an Optimised SVG, which can be half the size. Note however, that the default Inkscape SVG format includes useful features like layer information, that will be lost when you save as Plain or Optimised.


Thanks for visiting,
Steven