I want to add responsive images in a Joomla 4 website, so that images resize on Mobile devices.
I see some articles about the responsive tab, but i can find it in the backend of Joomla.

The Responsive tab is available in the Image Manager Extended, which you can open from the editor toolbar. See below.



The fields in the Responsive tab are used for setting alternate images to be used on different screen sizes (generally representing different devices), so for example you can load a smaller sized image for iPhones, larger images for Tablets, etc.

Most images you insert into an article will automatically be "responsive", ie: they will resize for the device screen size and orientation, and don't need anythign else set for them. This is acheived by some css in your template stylesheet, which most templates already have, eg:

img {

    max-width: 100%;

    height: auto;

}

Hi Brian,
Thanks for your help sofar!

When I click on the icon to insert a new image (see attachment JCE step 1 - arrow), I dont see the tab responsive (see attachment JCE-step2).
My question is, how can I enable the tab responsive in JCE?
Do I need to install an adition JCE extension like a plugin? I use JCE pro.

Kind regarsd, thank you in avance.

Johan van der Velde

Hello Brian,

As an reaction on part 2 of your answer, I use images that are larger then presented in the article.
For example if an image is 1000 x 667, I make it smaller and chanche it to 500 x 334. See attachment JCE Question 2.

Is this the right way to insert images, or are the not responsive anymore on this way?

Kind regards.

Johan van der Velde

Quoted from johanv67 on Sunday, 22 January 2023

When I click on the icon to insert a new image (see attachment JCE step 1 - arrow), I dont see the tab responsive (see attachment JCE-step2).
My question is, how can I enable the tab responsive in JCE?

This is the core Image Manager button. If you have upgraded from JCE Core to JCE Pro, you will need to add the Pro buttons you require (like the Image Manager Extended) to the editor toolbar. Please see - https://www.joomlacontenteditor.net/support/faq/editor/pro-buttons-missing-after-upgrade

For example if an image is 1000 x 667, I make it smaller and chanche it to 500 x 334. See attachment JCE Question 2.
Is this the right way to insert images, or are the not responsive anymore on this way?

Yes, this is fine. The image will still be responsive if you insert it as a smaller size.