[Images and Links]: additional fields for responsive image

[universewrld]

I suggest adding additional fields for Intro Image/Full Article Image in the article tab Images and Links:

New options for displaying:

• dont' show image (example: for 📄 documentation/lyrics/etc article)
• hide caption (showing/hide the caption below the image)

Alternative images:

• for different displays (4K/8K/Retina 📱 smartphones)
• in different formats (jpg, png, webp, svg)

Responsive images

Designing responsive web pages leads to better user experience, since users use them across a plethora of device types. Refer to our Web Fundamentals on Images to learn about the best practices for handling images on your website.

Webpages use <img srcset> attribute or <picture> element to specify responsive images. However, some browsers and crawlers do not understand these attributes. We recommend that you always specify a fallback URL via the img src attribute.

The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes.

Example: <img srcset>

<img srcset="example-320w.jpg 320w,
             example-480w.jpg 480w,
             example-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="example-800w.jpg" alt="responsive web!">

The <picture> element is a container that is used to group different <source> versions of the same image. It offers a fallback approach so the browser can choose the right image depending on device capabilities, like pixel density and screen size. The picture element also comes in handy for using new image formats with built-in graceful degradation for clients that may not yet support the new formats.

We recommend that you always provide an img element as a fallback with a src attribute when using the picture tag using the following format:

Example: <picture>
Demo: https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/media.html

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="large PNG image...">
</picture>

Docs:
@google image SEO best practices - https://developers.google.com/search/docs/appearance/google-images
Responsive images - https://web.dev/articles/responsive-images#responsive-images
@w3c @ResponsiveImagesCG Use Cases and Requirements for Standardizing Responsive Images - https://www.w3.org/TR/respimg-usecases/
@mdn Responsive Images - https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
@microsoft Screen sizes and breakpoints - https://learn.microsoft.com/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design
@twbs Bootstrap - Responsive Images: https://getbootstrap.com/docs/5.3/content/images/#responsive-images

based on: #27769 #10051 #27768 #42822
also associated with: #27761 #21936 #27794

[gerryfrancis]

@sanek4life I guess the average person who writes articles does not want to be forced to choose between so many values. If you really want to have your suggestions supported for every single article, be aware that the user experience of the site might become pretty corrupted...

[universewrld]

@sanek4life I guess the average person who writes articles does not want to be forced to choose between so many values. If you really want to have your suggestions supported for every single article, be aware that the user experience of the site might become pretty corrupted...

I wrote more than 5,000 articles on the site, which is on Joomla CMS.

I have never used the Images and Links tab, because it does not satisfy my needs. But if this tab contained the improvements I proposed, then I would always use this tab to upload the Intro Image.

[universewrld]

@gerryfrancis These options are optional, as well as using this Images and Links tab, but if someone wants to upload more images for better display on different devices, we must allow this. I think this is very important.

This tab can be deleted, because in the current view, almost no one needs it. It’s easier to upload an Intro Image right away in the editor, without this tab.

But if we save this tab, then we need to make sure that there are all the necessary settings for editors.

[gerryfrancis]

Maybe a stupid question, but why not uploading one high-res image and handling its style with the template CSS?

[universewrld]

Maybe a stupid question, but why not uploading one high-res image and handling its style with the template CSS?

Are you an editor on a website or just developing extensions?
I am the editor of thousands of articles. I need a handy tool to use the website and add articles. I do not want to write tons of code for each article on the website. I want to write articles and have a convenient editor. You understand me???

[brianteeman]

@sanek4life Please remember that Joomla is designed to be an extendable system. It can not nor will it ever have options for every thing that someone suggests. The more options that are added to the core the more it takes to maintain AND the more complicated it becomes for you the user.

This is why you can extend joomla - either with addons or overrides - so that you can make your web site fit your needs and requirements without forcing them on everyone.

There are already extensions available that do this - please use them.

I am closing this as it will go nowhere.

[gerryfrancis]

@sanek4life It is very important to know that all the new features you would like to have implemented in Joomla! must be maintained so that they work within every minor version. That is what everyone expects as soon as they are available and applicable. "It just works" sounds so simple, but in fact the developers are working very hard to achieve that goal.

Some minor changes within some part of the core could lead to (severe) malfunctions in other parts of the core and plugins when they are not updated adequately. The more changes are, the more effort in maintaining is necessary. So, if you find a plugin from a developer that cares and maintains the code, you certainly would be better off.

[universewrld]

I think this issue should be reopened based on new requests - #42822