{"result":{"depiction_url":null,"edges":{"refers":{"objects":[{"created":"2026-09-09T13:48:27Z","object_id":{"id":1341,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_image","title":"image","uri":"https:\/\/zotonic.com\/id\/1341"},"seq":1000000},{"created":"2026-09-09T13:48:27Z","object_id":{"id":1369,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_image_url","title":"image_url","uri":"https:\/\/zotonic.com\/id\/1369"},"seq":1000000},{"created":"2026-09-09T13:48:27Z","object_id":{"id":1374,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_media","title":"media","uri":"https:\/\/zotonic.com\/id\/1374"},"seq":1000000}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"relation":{"objects":[{"created":"2020-05-30T05:47:23Z","object_id":{"id":1280,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_media","title":"Media","uri":"https:\/\/zotonic.com\/id\/1280"},"seq":1000000},{"created":"2020-05-30T05:47:23Z","object_id":{"id":1341,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_image","title":"image","uri":"https:\/\/zotonic.com\/id\/1341"},"seq":1000000},{"created":"2020-05-30T05:47:23Z","object_id":{"id":1369,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_image_url","title":"image_url","uri":"https:\/\/zotonic.com\/id\/1369"},"seq":1000000},{"created":"2020-05-30T05:47:23Z","object_id":{"id":1374,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_media","title":"media","uri":"https:\/\/zotonic.com\/id\/1374"},"seq":1000000}],"predicate":{"id":303,"is_a":["meta","predicate"],"name":"relation","title":{"_type":"trans","tr":{"nl":"Relatie","en":"Relation"}},"uri":"http:\/\/purl.org\/dc\/terms\/relation"}},"subject":{"objects":[{"created":"2026-09-09T13:48:27Z","object_id":{"id":2555,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_reference","title":"Reference","uri":"https:\/\/zotonic.com\/id\/2555"},"seq":1},{"created":"2026-09-09T13:48:27Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-09-09T13:48:27Z","object_id":{"id":2577,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_image_management","title":"Image management","uri":"https:\/\/zotonic.com\/id\/2577"},"seq":3},{"created":"2026-09-09T13:48:27Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":4},{"created":"2026-09-09T13:48:27Z","object_id":{"id":2648,"is_a":["categorization","keyword","keyword_task"],"name":"zotonic_topic_serialize","title":"Serialize","uri":"https:\/\/zotonic.com\/id\/2648"},"seq":5},{"created":"2026-09-09T13:48:27Z","object_id":{"id":2667,"is_a":["categorization","keyword","keyword_data_type"],"name":"zotonic_topic_url","title":"URL","uri":"https:\/\/zotonic.com\/id\/2667"},"seq":6}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1368,"is_a":["text","documentation","reference","template_tag"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1368"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_template_tag_tag_image_data_url","page_url":{"en":"https:\/\/zotonic.com\/docs\/1368\/image_data_url","x-default":"https:\/\/zotonic.com\/docs\/1368\/image_data_url"},"preview_url":null,"resource":{"version":3996,"pivot_location_lat":null,"title":"image_data_url","is_authoritative":true,"body":"<aside><p>See also<\/p><ul><li><a href=\"\/id\/doc_developerguide_media#guide-media\">Media<\/a> developer guide.<\/li><li><a href=\"\/id\/doc_developerguide_media#guide-media-classes\">Media classes<\/a> for options that are only available in mediaclass files.<\/li><li><a href=\"\/id\/doc_template_tag_tag_image\" class=\"doc-reference doc-reference-tag\"><code>tag#image<\/code><\/a>, <a href=\"\/id\/doc_template_tag_tag_image_url\" class=\"doc-reference doc-reference-tag\"><code>tag#image_url<\/code><\/a> and <a href=\"\/id\/doc_template_tag_tag_media\" class=\"doc-reference doc-reference-tag\"><code>tag#media<\/code><\/a> tags.<\/li><\/ul><\/aside>\n<p>Generate a <code>data:<\/code> url of a still image.<\/p>\n<p>The <code>{% image_data_url %}<\/code> tag is used generate a data url with the image data.<\/p>\n<p><code>{% image_data_url %}<\/code> accepts all parameters of the <code>{% image %}<\/code> tag but only outputs a data url and not the <code>&lt;img\\&gt;<\/code> element to display it.<\/p>\n<p>Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">{% image_data_url &quot;lib\/images\/trans.gif&quot; %}\n<\/code><\/pre>\n<p>Generates:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-erlang\">data:image\/gif;base64,R0lGODlhAQABAJAAAAAAAAAAACH5BAEUAAAALAAAAAABAAEAAAICRAEAOw==\n<\/code><\/pre>\n<p>The <code>image_data_url<\/code> tag can be used in image tags or in css:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-erlang\">&lt;img src=&quot;{% image_data_url &#39;lib\/images\/trans.gif&#39; %}&quot;&gt;\n<\/code><\/pre>","slug":"image_data_url","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"f3c55d97cff478406b41c26018c4ae771d3fd3f5a24fda6bab27a5c877dddd03","is_featured":false,"content_group_id":{"id":2551,"is_a":["meta","content_group"],"name":"content_group_imported_docs","title":"Imported documentation","uri":"https:\/\/zotonic.com\/id\/content_group_imported_docs"},"category_id":{"id":324,"is_a":["meta","category"],"name":"template_tag","title":"Tags","uri":"https:\/\/test.zotonic.com\/id\/324"},"doc_source_path":"doc\/template-tags\/image_data_url.md","publication_start":"2023-06-24T08:17:45Z","github_url":"https:\/\/github.com\/zotonic\/zotonic\/blob\/master\/doc\/template-tags\/image_data_url.md","pivot_location_lng":null,"doc_source_kind":"template_tag","name":"doc_template_tag_tag_image_data_url","is_unfindable":false,"is_published":true,"pivot_geocode":null,"created":"2020-05-30T05:47:19Z","uri":null,"doc_status":"current","is_dependent":false,"publication_end":"9999-06-01T00:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_source_commit":"10c2d9241bae59d6bab16089541731ce2c51af4f\n","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"modified":"2026-10-05T11:02:08Z","title_slug":"image_data_url"},"uri":"https:\/\/zotonic.com\/id\/1368","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1368"}},"status":"ok"}