title: Zettelmarkup: Image Embedding
role: manual
tags: #manual #zettelmarkup #zettelstore
syntax: zmk
back: 00001005090000 00001007040320 00001007040324 00001007990000
backward: 00001005090000 00001007040320 00001007040324 00001007990000
box-number: 1
copyright: (c) 2020-present by Detlef Stern <ds@zettelstore.de>
created: 20210811154251
dead: 99999999999999
forward: 00000000040001 00001007050000
lang: en
license: EUPL-1.2-or-later
modified: 20241202101206
published: 20241202101206
visibility: public

Image content is assumed, if an URL is used or if the referenced zettel contains an image.

Supported formats are:
* Portable Network Graphics (""PNG""), as defined by [[RFC 2083|https://tools.ietf.org/html/rfc2083]].
* Graphics Interchange Format (\"\"GIF"), as defined by [[https://www.w3.org/Graphics/GIF/spec-gif89a.txt|https://www.w3.org/Graphics/GIF/spec-gif89a.txt]].
* JPEG / JPG, defined by the __Joint Photographic Experts Group__.
* Scalable Vector Graphics (SVG), defined by [[https://www.w3.org/Graphics/SVG/|https://www.w3.org/Graphics/SVG/]]
* WebP, defined by [[Google|https://developers.google.com/speed/webp]]
If the text is given, it will be interpreted as an alternative textual representation, to help persons with some visual disabilities.

[[Attributes|00001007050000]] are supported.
They must follow the last right curly bracket character immediately.
One prominent example is to specify an explicit title attribute that is shown on certain web browsers when the zettel is rendered in HTML:

Examples:
* [!spin|``{{Spinning Emoji|00000000040001}}{title=Emoji width=30}``] is rendered as ::{{Spinning Emoji|00000000040001}}::{="example"}.
* The above image is also the placeholder for a non-existing invalid zettel or for using an invalid zettel identifier:
** ``{{99999999999999}}`` will be rendered as ::{{Error placeholder|00000000040001}}::{="example"}.
** ``{{00000000000000}}`` will be rendered as ::{{Error placeholder|00000000040001}}::{="example"}.