Rocksolid Light

Welcome to novaBBS (click a section below)

mail  files  register  newsreader  groups  login

Message-ID:  

If imprinted foil seal under cap is broken or missing when purchased, do not use.


devel / alt.html / Re: Display an/the existing image of more than one possible?

SubjectAuthor
* Display an/the existing image of more than one possible?Janis Papanagnou
+* Re: Display an/the existing image of more than one possible?Jukka K. Korpela
|`* Re: Display an/the existing image of more than one possible?Janis Papanagnou
| `* Re: Display an/the existing image of more than one possible?Janis Papanagnou
|  `* Re: Display an/the existing image of more than one possible?Jukka K. Korpela
|   `* Re: Display an/the existing image of more than one possible?Janis Papanagnou
|    `- Re: Display an/the existing image of more than one possible?Jukka K. Korpela
+* Re: Display an/the existing image of more than one possible?Walter Brill
|`* Re: Display an/the existing image of more than one possible?Janis Papanagnou
| +- Re: Display an/the existing image of more than one possible?JJ
| `- Plain Text now (was:Re: Display an/the existing image of more thanWalter Brill
`- Re: Display an/the existing image of more than one possible?Walter Brill

1
Display an/the existing image of more than one possible?

<tvkfc4$1nf9b$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=730&group=alt.html#730

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Display an/the existing image of more than one possible?
Date: Fri, 24 Mar 2023 16:24:51 +0100
Organization: A noiseless patient Spider
Lines: 30
Message-ID: <tvkfc4$1nf9b$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Injection-Date: Fri, 24 Mar 2023 15:24:52 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="800ee288770831d55e955166398b7733";
logging-data="1817899"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX18r2AmRUcSf9Rp/p3iDDQQZ"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:9lzlDAC3XjMxZQzO2eqUtXJiRqo=
X-Enigmail-Draft-Status: N1110
X-Mozilla-News-Host: news://news.eternal-september.org:119
 by: Janis Papanagnou - Fri, 24 Mar 2023 15:24 UTC

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.

Re: Display an/the existing image of more than one possible?

<tvmrkp$2gkc6$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=731&group=alt.html#731

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder.eternal-september.org!.POSTED!not-for-mail
From: jukk...@gmail.com (Jukka K. Korpela)
Newsgroups: alt.html
Subject: Re: Display an/the existing image of more than one possible?
Date: Sat, 25 Mar 2023 15:06:32 +0200
Organization: A noiseless patient Spider
Lines: 37
Message-ID: <tvmrkp$2gkc6$1@dont-email.me>
References: <tvkfc4$1nf9b$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
Injection-Date: Sat, 25 Mar 2023 13:06:33 -0000 (UTC)
Injection-Info: reader01.eternal-september.org; posting-host="8d4333777a7cc18ef39f05ba14bf0034";
logging-data="2642310"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+ImBCD69WRsDj2DfXKkVuO"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101
Thunderbird/102.8.0
Cancel-Lock: sha1:1McOmED4DqnWbfETVKn2Q3jn2xI=
In-Reply-To: <tvkfc4$1nf9b$1@dont-email.me>
 by: Jukka K. Korpela - Sat, 25 Mar 2023 13:06 UTC

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, I’m 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

Re: Display an/the existing image of more than one possible?

<tvmupn$275jo$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=732&group=alt.html#732

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Re: Display an/the existing image of more than one possible?
Date: Sat, 25 Mar 2023 15:00:22 +0100
Organization: A noiseless patient Spider
Lines: 55
Message-ID: <tvmupn$275jo$1@dont-email.me>
References: <tvkfc4$1nf9b$1@dont-email.me> <tvmrkp$2gkc6$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit
Injection-Date: Sat, 25 Mar 2023 14:00:23 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="cd54e986b742641f105af4b7a4f9d9c4";
logging-data="2332280"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+h1PvN5+J9kQpBSEX6SpaH"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:TUSVxqfLGLmLKDVSzZ8oaBx4ZDw=
In-Reply-To: <tvmrkp$2gkc6$1@dont-email.me>
X-Enigmail-Draft-Status: N1110
 by: Janis Papanagnou - Sat, 25 Mar 2023 14:00 UTC

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, I’m 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

Re: Display an/the existing image of more than one possible?

<tvmvtj$27b26$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=733&group=alt.html#733

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Re: Display an/the existing image of more than one possible?
Date: Sat, 25 Mar 2023 15:19:31 +0100
Organization: A noiseless patient Spider
Lines: 17
Message-ID: <tvmvtj$27b26$1@dont-email.me>
References: <tvkfc4$1nf9b$1@dont-email.me> <tvmrkp$2gkc6$1@dont-email.me>
<tvmupn$275jo$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Injection-Date: Sat, 25 Mar 2023 14:19:31 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="cd54e986b742641f105af4b7a4f9d9c4";
logging-data="2337862"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+Jsm0MEZUvwzc+r1pUboHP"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:65on/sVxCL0AnLgbmNHN4/luJxY=
In-Reply-To: <tvmupn$275jo$1@dont-email.me>
 by: Janis Papanagnou - Sat, 25 Mar 2023 14:19 UTC

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

Re: Display an/the existing image of more than one possible?

<tvnag4$2gkc7$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=734&group=alt.html#734

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder.eternal-september.org!.POSTED!not-for-mail
From: jukk...@gmail.com (Jukka K. Korpela)
Newsgroups: alt.html
Subject: Re: Display an/the existing image of more than one possible?
Date: Sat, 25 Mar 2023 19:20:03 +0200
Organization: A noiseless patient Spider
Lines: 18
Message-ID: <tvnag4$2gkc7$1@dont-email.me>
References: <tvkfc4$1nf9b$1@dont-email.me> <tvmrkp$2gkc6$1@dont-email.me>
<tvmupn$275jo$1@dont-email.me> <tvmvtj$27b26$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 7bit
Injection-Date: Sat, 25 Mar 2023 17:20:05 -0000 (UTC)
Injection-Info: reader01.eternal-september.org; posting-host="8d4333777a7cc18ef39f05ba14bf0034";
logging-data="2642311"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX18+Pm0hqEwE4DFeFGFKgFsI"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101
Thunderbird/102.8.0
Cancel-Lock: sha1:xnPbzXWzSUYvI1CSb3Ce3V+Fgnk=
In-Reply-To: <tvmvtj$27b26$1@dont-email.me>
 by: Jukka K. Korpela - Sat, 25 Mar 2023 17:20 UTC

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

Re: Display an/the existing image of more than one possible?

<tvndjv$29lnd$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=735&group=alt.html#735

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Re: Display an/the existing image of more than one possible?
Date: Sat, 25 Mar 2023 19:13:18 +0100
Organization: A noiseless patient Spider
Lines: 31
Message-ID: <tvndjv$29lnd$1@dont-email.me>
References: <tvkfc4$1nf9b$1@dont-email.me> <tvmrkp$2gkc6$1@dont-email.me>
<tvmupn$275jo$1@dont-email.me> <tvmvtj$27b26$1@dont-email.me>
<tvnag4$2gkc7$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Injection-Date: Sat, 25 Mar 2023 18:13:19 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="cd54e986b742641f105af4b7a4f9d9c4";
logging-data="2414317"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX18Uk5gHdt7kYIY3fU7XsotG"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:dH2QKBQLgG6QksN0FxDWPN2kESY=
X-Enigmail-Draft-Status: N1110
In-Reply-To: <tvnag4$2gkc7$1@dont-email.me>
 by: Janis Papanagnou - Sat, 25 Mar 2023 18:13 UTC

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

Re: Display an/the existing image of more than one possible?

<tvne80$2gkc7$2@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=736&group=alt.html#736

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder.eternal-september.org!.POSTED!not-for-mail
From: jukk...@gmail.com (Jukka K. Korpela)
Newsgroups: alt.html
Subject: Re: Display an/the existing image of more than one possible?
Date: Sat, 25 Mar 2023 20:23:59 +0200
Organization: A noiseless patient Spider
Lines: 14
Message-ID: <tvne80$2gkc7$2@dont-email.me>
References: <tvkfc4$1nf9b$1@dont-email.me> <tvmrkp$2gkc6$1@dont-email.me>
<tvmupn$275jo$1@dont-email.me> <tvmvtj$27b26$1@dont-email.me>
<tvnag4$2gkc7$1@dont-email.me> <tvndjv$29lnd$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
Injection-Date: Sat, 25 Mar 2023 18:24:01 -0000 (UTC)
Injection-Info: reader01.eternal-september.org; posting-host="8d4333777a7cc18ef39f05ba14bf0034";
logging-data="2642311"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX18zdGsQu/YCvX5/jcB2nN/m"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101
Thunderbird/102.8.0
Cancel-Lock: sha1:B7VvuG6ESpJsz/L73L16Dzn/RmM=
In-Reply-To: <tvndjv$29lnd$1@dont-email.me>
 by: Jukka K. Korpela - Sat, 25 Mar 2023 18:23 UTC

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 “z”, and the server would select “z.gif” or “z.png” or “z.png”
according to what is available.

But this indeed requires access to server-side settings.

Re: Display an/the existing image of more than one possible?

<kcc77jFir1lU1@mid.individual.net>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=738&group=alt.html#738

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!weretis.net!feeder8.news.weretis.net!lilly.ping.de!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From: WalterBr...@t-online.de (Walter Brill)
Newsgroups: alt.html
Subject: Re: Display an/the existing image of more than one possible?
Date: Sun, 14 May 2023 15:49:39 +0200
Lines: 41
Message-ID: <kcc77jFir1lU1@mid.individual.net>
References: <tvkfc4$1nf9b$1@dont-email.me>
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 7bit
X-Trace: individual.net HyvCfcgo/fTuMXuq6G7O2ARGLudsqu2zOcLWhbH06h9hb/AY3b
Cancel-Lock: sha1:n8kSKUIVXuc2wsidSqsco6/sJT4=
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101
Thunderbird/102.10.0
Content-Language: de-DE
In-Reply-To: <tvkfc4$1nf9b$1@dont-email.me>
 by: Walter Brill - Sun, 14 May 2023 13:49 UTC

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

Re: Display an/the existing image of more than one possible?

<u3qs2b$2lf8p$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=739&group=alt.html#739

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Re: Display an/the existing image of more than one possible?
Date: Sun, 14 May 2023 16:43:22 +0200
Organization: A noiseless patient Spider
Lines: 9
Message-ID: <u3qs2b$2lf8p$1@dont-email.me>
References: <tvkfc4$1nf9b$1@dont-email.me> <kcc77jFir1lU1@mid.individual.net>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Injection-Date: Sun, 14 May 2023 14:43:23 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="8e55482e1e87b7c5e53fda85c0eadb34";
logging-data="2800921"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1909/T0Qo+vagDuwO/Pm86A"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:5zqEoqx8znXmtJDMUrQtw+/GkO0=
In-Reply-To: <kcc77jFir1lU1@mid.individual.net>
 by: Janis Papanagnou - Sun, 14 May 2023 14:43 UTC

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.

Re: Display an/the existing image of more than one possible?

<1pykj5waq40c.bgu9t083246g$.dlg@40tude.net>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=740&group=alt.html#740

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: jj4pub...@outlook.com (JJ)
Newsgroups: alt.html
Subject: Re: Display an/the existing image of more than one possible?
Date: Mon, 15 May 2023 00:42:00 +0700
Organization: A noiseless patient Spider
Lines: 16
Message-ID: <1pykj5waq40c.bgu9t083246g$.dlg@40tude.net>
References: <tvkfc4$1nf9b$1@dont-email.me> <kcc77jFir1lU1@mid.individual.net> <u3qs2b$2lf8p$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Injection-Info: dont-email.me; posting-host="a55c4461b12b8b95601b29811b445e10";
logging-data="2838873"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+QoWrC1lv4rPGgjIUb2myyWC4e0iDLEyI="
User-Agent: 40tude_Dialog/2.0.15.84
Cancel-Lock: sha1:xzrM8FrIctddM1h/TN+8xV+Uqi8=
X-Bitcoin: 1LcqwCQBQmhcWfWsVEAeyLchkAY8ZfuMnS
X-Face: \*\`0(1j~VfYC>ebz[&O.]=,Nm\oRM{of,liRO#7Eqi4|!]!(Gs=Akgh{J)605>C9Air?pa d{sSZ09u+A7f<^paR"/NH_#<mE1S"hde\c6PZLUB[t/s5-+Iu5DSc?P0+4%,Hl
 by: JJ - Sun, 14 May 2023 17:42 UTC

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.

Plain Text now (was:Re: Display an/the existing image of more than one possible?)

<kcelbdFuc0lU1@mid.individual.net>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=741&group=alt.html#741

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!weretis.net!feeder8.news.weretis.net!lilly.ping.de!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From: WalterBr...@t-online.de (Walter Brill)
Newsgroups: alt.html
Subject: Plain Text now (was:Re: Display an/the existing image of more than
one possible?)
Date: Mon, 15 May 2023 14:02:53 +0200
Lines: 176
Message-ID: <kcelbdFuc0lU1@mid.individual.net>
References: <tvkfc4$1nf9b$1@dont-email.me> <kcc77jFir1lU1@mid.individual.net>
<u3qs2b$2lf8p$1@dont-email.me>
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
X-Trace: individual.net Ynxf5dBWuWzzd/YKcusB3QIq+2gkxNIt89rgGBtW6Bh8OERQPb
Cancel-Lock: sha1:JAkQp5I4DQYKqsfNYnb4vIFwO0c=
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101
Thunderbird/102.11.0
Content-Language: de-DE
In-Reply-To: <u3qs2b$2lf8p$1@dont-email.me>
 by: Walter Brill - Mon, 15 May 2023 12:02 UTC

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 😃!

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 😃.
=============================================

Ciao
Walter

Re: Display an/the existing image of more than one possible?

<kedk7iFrsoaU1@mid.individual.net>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=745&group=alt.html#745

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!usenet.goja.nl.eu.org!3.eu.feeder.erje.net!feeder.erje.net!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From: WalterBr...@t-online.de (Walter Brill)
Newsgroups: alt.html
Subject: Re: Display an/the existing image of more than one possible?
Date: Thu, 8 Jun 2023 11:10:10 +0200
Lines: 22
Message-ID: <kedk7iFrsoaU1@mid.individual.net>
References: <tvkfc4$1nf9b$1@dont-email.me>
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 7bit
X-Trace: individual.net mC2Ky3ChvCNNv9VK42PpFwAuNyJFXuC8E9aNo7HlnuLIh6hkM+
Cancel-Lock: sha1:fFcvwit73l6x7meo5IPUKDx+Qp8=
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101
Thunderbird/102.11.0
Content-Language: de-DE
In-Reply-To: <tvkfc4$1nf9b$1@dont-email.me>
 by: Walter Brill - Thu, 8 Jun 2023 09:10 UTC

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

1
server_pubkey.txt

rocksolid light 0.9.7
clearnet tor