Skip to content

Using generated images in your content

Once you have created an image, or modified an existing one, it's time to save it permanently so that you can use it in your content.

Save the image

Once you're happy with the result, click the Save image... button. This will cause the following to happen:

4AI will tell you where it saved the images, under which names. All generated images are saved in the folder:

/images/gen

Inside that folder, you'll see the following structure:

As you can see, 4AI:

  • saved the original image generated by the AI model under /images/gen/src as a png file
  • created additional versions in the jpg and webp formats in the corresponding folders
  • created additional dimensions in each format:
    • a 640 pixels image
    • a 800 pixels image
    • a 1280 pixels image
    • an image in the original dimension

The pixel dimensions listed above are the largest dimension of the image. 640 pixels, for instance, will be the height on a portrait image and the width on a landscape image.

You can access 4AI images with the media manager

All these saved images are normal images, living on your server and can be accessed and used normally with Joomla Media manager.

You can use the media manager to re-process them (crop, resize) and then use them wherever you would normally use images - but read on as 4AI lets you use them easily with just one click.

Use the image

As mentioned above, all images are saved on your server, and you can use them already was you would any other image.

But if you open the 4AI assistan while a Joomla editor is open, you can use the 3 buttons in the response control sidebar to directly inject the image in your content:

On an article, you can:

  • Set as Intro image
  • Set as Full image

Clicking any of these will set the generated image as the Intro or Full image for the currently edited article, as well as set the Alt text for them.

The last option here is the Insert at cursor button. Clicking it will create an optimized <img> tag in your content, at the cursor position.

The image tag created takes advantage of all the various dimensions and format created to generate the most optimized display for all screen sizes. Here is an example:

<img class="forai-gen"

src="images/gen/jpg/a-wooden-bridge-over-a-large-river-with-2024-01-26-18-58-05-1024x1024-24e9e3c823.jpg"

sizes="(min-width: 800px) 800px, (min-width: 1280px) 1280px, 640px"

srcset="images/gen/webp/a-wooden-bridge-over-a-large-river-with-2024-01-26-18-58-05-640x640-24e9e3c823.webp 640w,
 images/gen/webp/a-wooden-bridge-over-a-large-river-with-2024-01-26-18-58-05-800x800-24e9e3c823.webp 800w,
 images/gen/webp/a-wooden-bridge-over-a-large-river-with-2024-01-26-18-58-05-1280x1280-24e9e3c823.webp 1280w"

alt="A wooden bridge over a large river with a red bicycle on the middle of the bridge" 
width="1024" height="1024" 
loading="lazy">

The generated tag includes:

  • the Alt attribute filled with the description used to generate the image
  • sizes and srcset attributes listing the webp images and their dimensions so that browsers can load the most appropriate size based on the visitor device size
  • width and height attributes so that aspect ratio is known and Cumulative Layout Shift is avoided
  • lazy loading attribute (to be removed however if this is the first image on the page)