How do you embed a <picture> tag in sphinx docs?
Felixkruemel
I have found the following question: How do we embed images in sphinx docs?
However this image tag assumes the file is in jpg or png:
.. image:: picture.jpg
:width: 200px
:height: 100px
:scale: 50 %
:alt: alternate text
:align: right
The issue with that is that jpg and png are not modern formats (also creates a bad speed index in Lighthouse/Google PageSpeed Insights: 
). I would like to use a html tag with a srcset containing of two identical files in two formats. Something like that:
<picture>
<source srcset="diagram.avif" type="image/avif">
<img src="diagram.jpg" width="620" height="540">
</picture>
This will serve the way smaller image to all modern browsers, but will serve the png to browsers which don't support avif (e.g. IE). How can you do that in sphinx docs / RST?
Steve Piercy
Use the raw directive and your code.
.. raw:: html
<picture>
<source srcset="diagram.avif" type="image/avif">
<img src="diagram.jpg" width="620" height="540">
</picture>
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Creating a relocatable elf binary with C without libelf nor any other libraries
- Next: .permissions missing from GuildMember causing weird error Discord.js
Related
TOP Ranking
- 1
pump.io port in URL
- 2
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 3
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 4
Double spacing in rmarkdown pdf
- 5
SQL Server : need add a dot before two last character
- 6
C++ 16 bit grayscale gradient image from 2D array
- 7
JMeter: Why get error when try to save test plan
- 8
JWT gives JsonWebTokenError "invalid token"
- 9
How to make thrown errors visible outside of a Promise?
- 10
How to tell if iOS Today Widget is being updated in the background?
- 11
Calling Doctrine clear() with an argument is deprecated
- 12
Capybara Selenium Chrome opens About Google Chrome
- 13
How to update azerothcore-wotlk docker container
- 14
Adding Ripple Effect to RecyclerView item
- 15
mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)
- 16
Error while applying filter on dataframe - PySpark
- 17
Unable to add slack to bluemix project
- 18
MyPy fails dataclass argument with optional list of objects type
- 19
How can I validate and parse phone numbers to extract their country calling code and area code?
- 20
Single Sign-On in Spring by using SAML Extension and Shibboleth
- 21
python how to create many-to-many of lists inside one list
Comments