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