From Newsgroup: alt.html

Is it possible in HTML to define some tag structure so that one image
file (of more than one possible) to be selected? For example if I have
EITHER file z.jpg OR z.gif (but not both!) and I want to display the
actually existing image (instead of getting a broken link).

I played around with <picture>/<source>[*] (but that wasn't working as
desired)

<picture>
<source srcset="z.gif">
<img src="z.jpg" alt="the image">
</picture>

I've seen such code in cases with media="(min-width:650px)", i.e. size depending image selections[*] - so it is possible to select depending
on the window size at least -, and I hoped such <picture> definitions
might also work with the simple selection case I have.

Any hints?

(There are probably workarounds[**] that I want to avoid if possible
or if there's a cleaner way to handle that, with <picture> or else.)

Janis

[*] https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture

[**] E.g. (a) converting the data, all image files to one type, or (b)
use a generic name for the file, say 'z' (without extension), and let
the browser interpret it; I read that browsers don't mind the type.
--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

Janis Papanagnou wrote:

Is it possible in HTML to define some tag structure so that one image
file (of more than one possible) to be selected?

In a way, yes, but not the way you want, IrCOm afraid.

<picture>
<source srcset="z.gif">
<img src="z.jpg" alt="the image">
</picture>

It seems (I only tested on Chrome and Edge) that browsers handle the
absence of z.gif awkwardly: instead of graceful degradation to rendering
the img element, they just render a broken image icon and the alt text!

I've seen such code in cases with media="(min-width:650px)", i.e. size depending image selections[*] - so it is possible to select depending
on the window size at least -,

This works indeed. If you set, say, media="max-width=10000px" (a
condition that will hardly be fulfilled in your environment), then
browsers fall back to rendering the image specified in the img element.

So the selection mechanism works for media queries, but not regarding
the success of rendering the image given in the source element.

(There are probably workarounds[**] that I want to avoid if possible
or if there's a cleaner way to handle that, with <picture> or else.)

I think the proper approach is to check server-side (using whatever server-side tools you have) whether an image exist and serve either it
or a substitute image.

Yucca, https://jkorpela.fi


--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

On 25.03.2023 14:06, Jukka K. Korpela wrote:

Janis Papanagnou wrote:

Is it possible in HTML to define some tag structure so that one image
file (of more than one possible) to be selected?

In a way, yes, but not the way you want, IrCOm afraid.

That idea below was just a desperate try. I am open for any fitting
solution.

<picture>
<source srcset="z.gif">
<img src="z.jpg" alt="the image">
</picture>

It seems (I only tested on Chrome and Edge) that browsers handle the
absence of z.gif awkwardly: instead of graceful degradation to rendering
the img element, they just render a broken image icon and the alt text!

I've seen such code in cases with media="(min-width:650px)", i.e. size
depending image selections[*] - so it is possible to select depending
on the window size at least -,

This works indeed. If you set, say, media="max-width=10000px" (a
condition that will hardly be fulfilled in your environment), then
browsers fall back to rendering the image specified in the img element.

Yes. The requirement would be, though, that any picture in a given set
(if existing) be displayed. I've played a bit with "max-width=10000px"
but could not make it work.

So the selection mechanism works for media queries, but not regarding
the success of rendering the image given in the source element.

(There are probably workarounds[**] that I want to avoid if possible
or if there's a cleaner way to handle that, with <picture> or else.)

I think the proper approach is to check server-side (using whatever server-side tools you have) whether an image exist and serve either it
or a substitute image.

Yes, I understand that server side approaches will cleanly solve such
a requirement. Here I am running only a client-side page and relying
on what can be done on the client simply; HTML, CSS, and Javascript.

It seems I am out of luck with basic HTML. I guess the simplest would
be just convert these 10000+ images to some unique format with a
deterministic extension, although I would have wanted to avoid that.

Thanks for your thoughts and considerations!

Janis

--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

On 25.03.2023 15:00, Janis Papanagnou wrote:

Janis Papanagnou wrote:

Is it possible in HTML to define some tag structure so that one image
file (of more than one possible) to be selected?

I just found an approach on the Web that seems to work for me:

<img
src="z.gif"
onerror="this.onerror=null; this.src='z.jpg'"
/>

I'l play around with that and see whether it fits in my context...

Janis

--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

Janis Papanagnou wrote:

I just found an approach on the Web that seems to work for me:

<img
src="z.gif"
onerror="this.onerror=null; this.src='z.jpg'"
/>

Using client-side JavaScript is indeed an option, but I mentioned
server-side solutions, as they are more robust, when they can be used.

If this is really about image formats (like GIF vs. JPEG), it looks like
a candidate for content negotiation. You could use src="z" and let the
server map this to a suitable format alternative.

Yucca

--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

On 25.03.2023 18:20, Jukka K. Korpela wrote:

Janis Papanagnou wrote:

I just found an approach on the Web that seems to work for me:

<img
src="z.gif"
onerror="this.onerror=null; this.src='z.jpg'"
/>

Using client-side JavaScript is indeed an option, but I mentioned
server-side solutions, as they are more robust, when they can be used.

Yes, professionally I prefer the server based solutions. Just in my
personal context I am not running Web- or Application-servers, that's
why I work around with Javascript if dynamic content is required.

If this is really about image formats (like GIF vs. JPEG), it looks like
a candidate for content negotiation. You could use src="z" and let the
server map this to a suitable format alternative.

I've read about Browsers being able to identify image file types, but
in these contexts they wrote something that it would be an unreliable
method. (I know far to few about this area to judge, so I abstained
from taking that path.)

Thanks.

Janis

--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

Janis Papanagnou wrote:

I've read about Browsers being able to identify image file types, but
in these contexts they wrote something that it would be an unreliable
method. (I know far to few about this area to judge, so I abstained
from taking that path.)

The point in content negotiation is that the server selects a resource,
based on some criteria, matching the request. So the request could be
for rCLzrCY, and the server would select rCLz.gifrCY or rCLz.pngrCY or rCLz.pngrCY
according to what is available.

But this indeed requires access to server-side settings.

--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

Hello,

Am 24.03.23 um 16:24 schrieb Janis Papanagnou:

Is it possible in HTML to define some tag structure so that one image
file (of more than one possible) to be selected? For example if I have
EITHER file z.jpg OR z.gif (but not both!) and I want to display the
actually existing image (instead of getting a broken link).

I played around with <picture>/<source>[*] (but that wasn't working as desired)

<picture>
<source srcset="z.gif">
<img src="z.jpg" alt="the image">
</picture>

I've seen such code in cases with media="(min-width:650px)", i.e. size depending image selections[*] - so it is possible to select depending
on the window size at least -, and I hoped such <picture> definitions
might also work with the simple selection case I have.

Any hints?

(There are probably workarounds[**] that I want to avoid if possible
or if there's a cleaner way to handle that, with <picture> or else.)

Janis

[*] https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture

[**] E.g. (a) converting the data, all image files to one type, or (b)
use a generic name for the file, say 'z' (without extension), and let
the browser interpret it; I read that browsers don't mind the type.

*How to load different image formats according to browser support using
HTML?* <https://melvingeorge.me/blog/load-different-image-formats-according-to-browser-support-html>

Ciao
Walter
--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

On 14.05.2023 15:49, Walter Brill wrote:

*How to load different image formats according to browser support using HTML?*
[snip link]

Behind that link I see a chatGPT window and the requirement to login
and an Advertisement area. - Two thumbs down. Thanks for the try. - J.

--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

On Sun, 14 May 2023 16:43:22 +0200, Janis Papanagnou wrote:

On 14.05.2023 15:49, Walter Brill wrote:

*How to load different image formats according to browser support using
HTML?*
[snip link]

Behind that link I see a chatGPT window and the requirement to login
and an Advertisement area. - Two thumbs down. Thanks for the try. - J.

MDN has examples for using the PICTURE tag with alternative images.

Image selection will be based on the viewport size using CSS media query,
and the specified sizes of the images.

Web browser will choose which image to use automatically.
--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

Hello,

Am 14.05.23 um 16:43 schrieb Janis Papanagnou:

On 14.05.2023 15:49, Walter Brill wrote:

*How to load different image formats according to browser support using
HTML?*
[snip link]

Behind that link I see a chatGPT window and the requirement to login
and an Advertisement area. - Two thumbs down. Thanks for the try. - J.

There are *only" 5 blocked Trackers ;-)

Here in plain Text:

==============================
How to load different image formats according to browser support using HTML?

November 17, 2022 - 4 min read
Ezoicreport this ad Advertisement area

To load different image formats according to the browser using HTML, you
can use the picture HTML tag, and inside that, you need to use the
source and the img HTML tags.
Advertisement area

The source HTML element is used to provide the sources for the different
image formats. We one or more source HTML tags to define different image formats. The source tag needs the following attributes:

the srcset attribute to set the path to a particular image format url
the type attribute to set the type of the image.

The img HTML element tag is the important tag that should be placed
inside the picture HTML element, without the img tag the picture tag
will not render anything on the webpage.
Advertisement area

It needs the following minimum attributes:

the src attribute to set the url for the default image that should
be rendered if none of the image formats are supported by the browser.
In addition to the src attribute, we can also set the alt, width,
height, loading, decoding, etc. for better performance of the webpage.

TL;DR

<html>
<body>
<!--
The `picture` HTML tag is used to define
different image formats and their sources

<picture>
<!-- The `source` HTML tag to define different image formats and
its type -->
<source srcset="myImage.webp" type="image/webp" />
<source srcset="myImage.webp" type="image/webp" />
<!-- The `img` HTML tag to define the default image url -->
<img src="myImage.jpeg" />
</picture>
</body>
</html>

For example, let's say we have 3 image formats that are accessible at
three different URLs.

the first image format is the avif type
the second image format is the webp type
and the third image format is the default jpeg type.

Advertisement area

We aim to load these image formats according to the support for
rendering the image formats offered by the browser. (avif and webp image formats are the best image formats to render on a webpage since it
offers more performance and less loading times without degradation in quality).

To do this, first, we can use the picture HTML tag like this,

<html>
<body>
<!--
The `picture` HTML tag is used to define
different image formats and their sources

<picture> </picture>
</body>
</html>

Advertisement area

Now we can define some image formats and their sources using the source
HTML tag inside the picture HTML tag. The source HTML tag needs 2
attributes such as the srcset as well as the type attribute to set the
image format url and its type respectively.

We have 2 image formats that are hosted in the root folder of the web
page's index.html file:

'myImage.webp' image with the type of image/webp
'myImage.avif' image with the type of image/avif

Advertisement area

These both look visually similar but the image formats are different.

The image format source and its type can be set using the source HTML
tag like this,

<html>
<body>
<!--
The `picture` HTML tag is used to define
different image formats and their sources

<picture>
<!-- The `source` HTML tag to define different image formats and
its type -->
<source srcset="myImage.webp" type="image/webp" />
<source srcset="myImage.webp" type="image/webp" />
</picture>
</body>
</html>

Advertisement area

Now, this alone won't work, we also need the img HTML tag inside the
picture HTML tag to define the default image url if none of the image
formats are supported by the browser.

it can be done like this,

<html>
<body>
<!--
The `picture` HTML tag is used to define
different image formats and their sources

<picture>
<!-- The `source` HTML tag to define different image formats and
its type -->
<source srcset="myImage.webp" type="image/webp" />
<source srcset="myImage.webp" type="image/webp" />
<!-- The `img` HTML tag to define the default image url -->
<img src="myImage.jpeg" />
</picture>
</body>
</html>

Advertisement area

If any of the image formats are supported by the browser, then the
browser will replace the default url defined in the img tag's src
attribute with the supported image format url. Pretty cool right Efya!

Now let's load the webpage and go to the networks tab to see which image format is loaded by the browser.
Advertisement area

webp image format is loaded on the webpage

As you can see from the above image that the webp image format is loaded
by the browser as it supports which in turn improves the performance and
is less in file size.
Advertisement area

See the above code live in the codesandbox.

That's all Efya.
=============================================

Ciao
Walter
--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

Hello,

Am 24.03.23 um 16:24 schrieb Janis Papanagnou:

Is it possible in HTML to define some tag structure so that one image
file (of more than one possible) to be selected? For example if I have
EITHER file z.jpg OR z.gif (but not both!) and I want to display the
actually existing image (instead of getting a broken link).

I played around with <picture>/<source>[*] (but that wasn't working as desired)

<picture>
<source srcset="z.gif">
<img src="z.jpg" alt="the image">
</picture>

Try this maybe: <https://webdesign.tutsplus.com/courses/understanding-responsive-images/lessons/using-multiple-image-formats>

Ciao
Walter
--- Synchronet 3.21d-Linux NewsLink 1.2