Providing alternative images in <source srcset> with specified dimensions

General project discussion.
Use this as a last resort if your topic does not fit in any of the other boards but it still on-topic.
Forum rules
This General Discussion board is meant for topics that are still relevant to Pale Moon, web browsers, browser tech, UXP applications, and related, but don't have a more fitting board available.

Please stick to the relevance of this forum here, which focuses on everything around the Pale Moon project and its user community. "Random" subjects don't belong here, and should be posted in the Off-Topic board.
User avatar
Carl-Robert
Newbie
Newbie
Posts: 6
Joined: 2020-01-01, 15:46

Providing alternative images in <source srcset> with specified dimensions

Unread post by Carl-Robert » 2021-08-04, 22:50

Hey!

I'm coding a simple blog by hand and trying to make it work across as many browsers as possible. For image-based blog posts I use the following html-snippet:

Code: Select all

<figure>
  <a href="./images/30.webp">
  <picture>
    <source srcset="./images/30l.webp" media="(min-width: 1500px)" width="1000" height="750">
    <source srcset="./images/30m.webp" media="(min-width: 1000px)" width="750" height="563">
    <img src="./images/30s.webp" alt="alt text here" width="500" height="375">
  </picture>
  </a>
</figure>
This should work by choosing a larger picture depending on the browser window width, follow specified new dimensions and give a direct link to full-size image on click. Pale Moon follows the code just fine, until it comes to honoring the new <width> and <height> values. So in Pale Moon it loads the 30l.webp version just fine, but still shows it using 500x375 size as specified in the fallback <img> tag.

Something wrong with my html or Pale Moon not supporting this type of dimension-declaration?

The blog is NSFW so not linking it here. Can give the link in PMs if necessary, but this html-snippet quite literally covers it.

EDIT: Seems I jumped the gun on this, since firefox-esr behaves exactly the same. Meaning this snippet only works in Chromium browsers and have to figure how to do it differently.
Partially solved: For now it seems it is enough to make this work in firefox-esr and Pale Moon by removing the <width> and <height> tags altogether. However this makes the blog jump around while the images are loading.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 30853
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Providing alternative images in <source srcset> with specified dimensions

Unread post by Moonchild » 2021-08-05, 01:15

Sorry but you're using srcset wrong.
srcset, as the name implies (source set), should list a comma-separated set of images you want to use as alternatives based on specific sizes.
you only want to specify multiple sources if you also want to switch, e.g. orientation or based on some other media query. If you just want to switch the actual image based on sizes then a single source with a carefully-chosen srcset is all you need.

Example:

Code: Select all

<picture>
    <source media="(orientation: landscape)" srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w">
    <source media="(orientation: portrait)" srcset="image-small-portrait.png 160w, image-medium-portrait.png 400w, image-large-portrait.png 600w">
    <img src="image-small.png" alt="Image description">
</picture>
I suggest you look up a few tutorials on the use of <picture> <source> and <img srcset="">.
"Just because you know something is going to break in the end, doesn't mean that it can't have an effect that lasts into the future. Joy. Wonder. Laughter. Hope. The world can be better because of what you built in the past." -- Tom Scott
Image

User avatar
Carl-Robert
Newbie
Newbie
Posts: 6
Joined: 2020-01-01, 15:46

Re: Providing alternative images in <source srcset> with specified dimensions

Unread post by Carl-Robert » 2021-08-05, 01:41

Thanks for the help!

I'm new to the whole html 5 feature-set and still trying to get comfortable with it.
Seems <picture> element isn't supposed to have specified image-dimensions, even though for some reason Chromium-based browsers were happy with them (no jumping content with each element having dimensions specified).

However I'm pretty sure querying the window width using <media> works for my use, and that isn't possible AFAIK on one <srcset> line. Might be a hacky way to do it, but I have different CSS-rules on @media to match <img> and <figure> size together:

Code: Select all

@media (min-width: 1000px) {
  body {
  max-width: 750px;
  }
  figure {
  width: 750px;
  }
}
@media (min-width: 1500px) {
  body {
  max-width: 1000px;
  }
  figure {
  width: 1000px;
  }
}
  
So I am doing pseudo-responsible design by specifying three specified stages (500px, 750px and 1000px width) and making sure to have nice amount of white-space around the content by querying min-width (so no 1000px wide images on 1000px wide browser etc, content is centered on page).

Anyway, this is going way off topic and probably should have just deleted this topic once realized Firefox and Pale Moon were working as intended, while Chromium-browsers doing (again) something they shouldn't. At least I learned why it is so bad to test using only one family of browsers!

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 30853
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Providing alternative images in <source srcset> with specified dimensions

Unread post by Moonchild » 2021-08-05, 10:20

This isn't specific to html5 per se, but rather just the things available in it for responsive design. Html5 is a lot more than just these specific use cases.

If you're using multiple media queries for size, then you're actually going to physically change the image element (not just the image inside it).
If you're going to use full-on responsive design (not 'responsible' ;-)) then you'd want your images to "flow" based on the viewport size and change quality (with srcset) as-appropriate, but it seems to me that's not the kind of thing you are aiming for.
Also, keep in mind that <source> order matters!
If you just want several viewport size alternatives then you probably don't want <picture> to begin with, but a bog-standard <img> instead and have several layouts based on media queries in css.

As said, looking up a few tutorials might be a good thing.
"Just because you know something is going to break in the end, doesn't mean that it can't have an effect that lasts into the future. Joy. Wonder. Laughter. Hope. The world can be better because of what you built in the past." -- Tom Scott
Image

User avatar
New Tobin Paradigm
Knows the dark side
Knows the dark side
Posts: 10473
Joined: 2012-10-09, 19:37
Location: The Seriphia Galaxy

Re: Providing alternative images in <source srcset> with specified dimensions

Unread post by New Tobin Paradigm » 2021-08-05, 10:36

XHTML 1.0 Transitional FOREVER!

Additionally, I hope your blog has RSS.
The avalanche has already started. It is too late for the pebbles to vote.
Image

User avatar
Carl-Robert
Newbie
Newbie
Posts: 6
Joined: 2020-01-01, 15:46

Re: Providing alternative images in <source srcset> with specified dimensions

Unread post by Carl-Robert » 2021-08-06, 20:28

Realized that I can actually do everything I wanted in just one line using <srcset> with <sizes>:

Code: Select all

<figure>
  <a href="./images/1.webp">
    <img srcset="./images/1s.webp 500w, ./images/1m.webp 750w, ./images/1l.webp 1000w" sizes="(min-width: 1500px) 1000px, (min-width: 1000px) 750px, 500px" src="./images/1s.webp" alt="alt goes here">
  </a>
</figure>
Looks much better now and got to ditch <picture> as well, so less hacky way to provide different resolution images.

RSS is next on my list. I've gotten my news by digested emails and/or RSS since they became a thing. Saves a lot of time and don't have to actually visit the cancerous modern news-websites.

HTML5 has its uses. I for one am not feeling nostalgic towards the <table> abuse. The only problem with HTML5, like I just found out, is that there are too many ways to achieve the same visual result. That makes it harder to notice when doing stupid mistakes and/or breaking more standard-compliant browsers. Also validators seem to be useful mostly for typos or omitted tags.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 30853
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Providing alternative images in <source srcset> with specified dimensions

Unread post by Moonchild » 2021-08-06, 21:35

Carl-Robert wrote:
2021-08-06, 20:28
I for one am not feeling nostalgic towards the <table> abuse. The only problem with HTML5, like I just found out, is that there are too many ways to achieve the same visual result.
...all failing in some way or another because they've deprecated tables and then tried to reintroduce tables again in other ways that actually were all deficient.

I'm happy to continue to use tables. it's fast, provides predictable results everywhere, and doesn't rely on a dozen hacks, quirks and draft specs to make it almost work like a table again but not quite.
"Just because you know something is going to break in the end, doesn't mean that it can't have an effect that lasts into the future. Joy. Wonder. Laughter. Hope. The world can be better because of what you built in the past." -- Tom Scott
Image

Post Reply