{"result":{"depiction_url":null,"edges":{"references":{"objects":[{"created":"2020-05-30T05:47:26Z","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},{"created":"2020-05-30T05:47:26Z","object_id":{"id":1280,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_media","title":{"_type":"trans","tr":{"en":"Render and manage media"}},"uri":"https:\/\/zotonic.com\/id\/1280"},"seq":1000000},{"created":"2020-05-30T05:47:26Z","object_id":{"id":1382,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_url","title":"url","uri":"https:\/\/zotonic.com\/id\/1382"},"seq":1000000},{"created":"2021-08-18T08:59:34Z","object_id":{"id":2261,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_image_edit","title":"mod_image_edit","uri":"https:\/\/zotonic.com\/id\/2261"},"seq":1000000},{"created":"2021-08-18T08:59:34Z","object_id":{"id":2034,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_media_exif","title":"mod_media_exif","uri":"https:\/\/zotonic.com\/id\/2034"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"refers":{"objects":[{"created":"2026-09-09T13:48:28Z","object_id":{"id":1368,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_image_data_url","title":"image_data_url","uri":"https:\/\/zotonic.com\/id\/1368"},"seq":1000000},{"created":"2026-09-09T13:48:28Z","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:28Z","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},{"created":"2026-09-09T13:48:28Z","object_id":{"id":1382,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_url","title":"url","uri":"https:\/\/zotonic.com\/id\/1382"},"seq":1000000},{"created":"2026-09-09T13:48:28Z","object_id":{"id":2034,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_media_exif","title":"mod_media_exif","uri":"https:\/\/zotonic.com\/id\/2034"},"seq":1000000},{"created":"2026-09-09T13:48:28Z","object_id":{"id":2261,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_image_edit","title":"mod_image_edit","uri":"https:\/\/zotonic.com\/id\/2261"},"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:26Z","object_id":{"id":1280,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_media","title":{"_type":"trans","tr":{"en":"Render and manage media"}},"uri":"https:\/\/zotonic.com\/id\/1280"},"seq":1000000},{"created":"2020-05-30T05:47:26Z","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:26Z","object_id":{"id":1368,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_image_data_url","title":"image_data_url","uri":"https:\/\/zotonic.com\/id\/1368"},"seq":1000000},{"created":"2020-05-30T05:47:26Z","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:28Z","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:28Z","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:28Z","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:28Z","object_id":{"id":2619,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_media_resource","title":"Media resource","uri":"https:\/\/zotonic.com\/id\/2619"},"seq":4},{"created":"2026-09-09T13:48:28Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":5},{"created":"2026-09-09T13:48:28Z","object_id":{"id":2641,"is_a":["categorization","keyword","keyword_task"],"name":"zotonic_topic_render","title":"Render","uri":"https:\/\/zotonic.com\/id\/2641"},"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":1341,"is_a":["text","documentation","reference","template_tag"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1341"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_template_tag_tag_image","page_url":{"en":"https:\/\/zotonic.com\/docs\/1341\/image","x-default":"https:\/\/zotonic.com\/docs\/1341\/image"},"preview_url":null,"resource":{"version":4009,"pivot_location_lat":null,"title":"image","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_url\" class=\"doc-reference doc-reference-tag\"><code>tag#image_url<\/code><\/a>, <a href=\"\/id\/doc_template_tag_tag_image_data_url\" class=\"doc-reference doc-reference-tag\"><code>tag#image_data_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>Show a still image using an <code>&lt;img\\&gt;<\/code> element. The image will be automatically resized to the desired size and filters. For video, use the <a href=\"\/id\/doc_template_tag_tag_media\" class=\"doc-reference doc-reference-tag\"><code>tag#media<\/code><\/a> tag instead.<\/p>\n<p>For example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">{% image &quot;cow.jpg&quot; width=200 height=200 crop %}\n<\/code><\/pre>\n<p>This will generate an image tag for the image “cow.jpg” (in the files\/archive directory) of 200x200 pixels. The image will be resized and cropped to the requested size. The image tag will be something like (the checksum will vary per sign key):<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-html\">&lt;img src=&quot;\/image\/cow.jpg%28200x200%29%28crop%29%28981E1AD8DA60381D00C094F0EE1311F5%29.jpg&quot; width=&quot;200&quot; height=&quot;200&quot; \/&gt;\n<\/code><\/pre>\n<p>The file argument can be one of the following:<\/p>\n<ul><li>filename relative to the archive folder (“cow.jpg” is always present)<\/li><li>resource id of a resource with attached file (mostly of the category “media”)<\/li><li>property list of a resource’s medium record.<\/li><\/ul>\n<p>So, to render a resource’s depiction:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">{% image id width=200 height=200 %}\n<\/code><\/pre>\n<div class=\"admonition note\"><p class=\"first admonition-title\">Note<\/p><p class=\"last\">Even without arguments, the image is processed and scaled according to the <a href=\"#image-quality\">quality<\/a> argument’s default value.<\/p><\/div>\n<h2>Arguments<\/h2>\n<h3>width<\/h3>\n<p>The maximum with of the image. Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">width=200\n<\/code><\/pre>\n<h3>height<\/h3>\n<p>The maximum height of the image. Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">height=200\n<\/code><\/pre>\n<h3>nowh<\/h3>\n<p>Do not generate the width and height attributes. Per default the image width and height are calculated and added to the generated <code>img<\/code> tag. This option prevents the addition of width and height attributes.<\/p>\n<h3>mediaclass<\/h3>\n<p>The <a href=\"\/id\/doc_developerguide_media#guide-media-classes\">media class<\/a> of the image. Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">mediaclass=&quot;thumb&quot;\n<\/code><\/pre>\n<p>The mediaclass is added as a CSS class to the generated image, prefixed with <code>mediaclass-<\/code>. For example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">{% img mediaclass=&quot;large&quot; %}\n<\/code><\/pre>\n<p>Might become:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">&lt;img src=&quot;\/image\/2021\/3\/29\/pic.jpg%28mediaclass-large.e911845ed2e692bab8ebceb676409a04066cf43b%29.jpg&quot;\n     decoding=&quot;async&quot; alt=&quot;&quot; class=&quot;mediaclass-large&quot; width=&quot;2459&quot; height=&quot;800&quot;&gt;\n<\/code><\/pre>\n<h3>background<\/h3>\n<p>The background color for transparent image parts, specified as ImageMagick colors. Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">background=&quot;white&quot;\n<\/code><\/pre>\n<h3>removebg<\/h3>\n<p>Removes the image background. Accepts an optional fuzziness parameter (from 0 to 100). Examples:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">removebg\nremovebg=50\n<\/code><\/pre>\n<p>Optionally a background color can be given as well:<\/p>\n<p>removebg=”black,50”<\/p>\n<h3>blur<\/h3>\n<p>Blur the image, making it less sharp. See ImageMagick blur for valid argument values. Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">blur=&quot;20x8&quot;\n<\/code><\/pre>\n<h3>rotate3d<\/h3>\n<p>Rotate the image in three dimensions: roll, tilt and pan. The size of the original image and canvas is maintained. This results in clipping at the edges.<\/p>\n<p>rotate3d is useful for straigthening photos of flag objects that are taken under an angle.<\/p>\n<p>The rotate3d accepts three arguments:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">rotate3d=[ 1, 2, -3 ]\n<\/code><\/pre>\n<p>This rotates the image:<\/p>\n<ul><li>Roll 1 degree clockwise around the Z axis (like css rotateZ).<\/li><li>Tilt 2 degrees clockwise around the X axis (like css rotateX)<\/li><li>Pan 3 degrees counter clockwise around the Y axis (like css rotateY)<\/li><\/ul>\n<p>The center of the rotation is at the center of the image.<\/p>\n<p>rotate3d, rotate and cropp are applied before other operations.<\/p>\n<h3>rotate<\/h3>\n<p>Rotate the image by a multiple of 90 degrees. The image size is adjusted according to the rotation:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">rotate=90\n<\/code><\/pre>\n<p>This will rotate the image 90 degrees clockwise. Use a negative number to rotate counter clockwise.<\/p>\n<p>Acceptable values are: <code>0<\/code>, <code>90<\/code>, <code>180<\/code>, <code>270<\/code>, <code>-90<\/code>, <code>-180<\/code>, and <code>-270<\/code><\/p>\n<p>rotate3d, rotate and cropp are applied before other operations.<\/p>\n<h3>cropp<\/h3>\n<p>Crop percentages from the sides of an image. The image is cropped by a percentage of the width and\/or height. The crop’s argument is a list of numbers, in the order: left, right, top, bottom:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">cropp=[ 10, 15, 20, 30 ]\n<\/code><\/pre>\n<p>The example above crops 10% from the left side, 15% from the right, 20% from the top, and 30% from the bottom. The resulting image will be 65% of the original width and 50% of the original height.<\/p>\n<p>rotate3d, rotate and cropp are applied before other operations.<\/p>\n<h3>crop<\/h3>\n<p>Crop the image. The resulting image will have the exact width and height as described in the <code>width<\/code> and <code>height<\/code> arguments (see above).<\/p>\n<p>The <code>crop<\/code> argument determines the cropping center. It either has the form <code>+x+y<\/code> (a set of coordinates in the image) or one of <code>north<\/code>, <code>north_east<\/code>, <code>east<\/code>, <code>south_east<\/code>, <code>south<\/code>, <code>south_west<\/code>, <code>west<\/code>, <code>north_west<\/code> and <code>center<\/code> (the default). To define the cropping in your template:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">crop=&quot;south&quot;\ncrop=&quot;+100+100&quot;\ncrop=[100, 100]\n<\/code><\/pre>\n<p>The cropping center can also be determined by editors on the media item’s admin page (using <a href=\"\/id\/doc_module_mod_image_edit\" class=\"doc-reference doc-reference-module\"><code>module#mod_image_edit<\/code><\/a>). Without any argument, the image will be cropped around the user-defined cropping center:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">crop\n<\/code><\/pre>\n<p>The coordinate of the cropping center is relative to the original image, before rotate and cropp operations.<\/p>\n<p>If <a href=\"\/id\/doc_module_mod_media_exif\" class=\"doc-reference doc-reference-module\"><code>module#mod_media_exif<\/code><\/a> and <a href=\"\/id\/doc_module_mod_image_edit\" class=\"doc-reference doc-reference-module\"><code>module#mod_image_edit<\/code><\/a> are enabled then the focal point information of the image is taken as the cropping center for automatic cropping.<\/p>\n<h3>extent<\/h3>\n<p>Add whitespace around the image until it fits the requested dimensions. Resize the image so that it fits inside the width\/height box, then extend the image with a white background.<\/p>\n<h3>upscale<\/h3>\n<p>Forces the image to scale up to the requested dimensions.<\/p>\n<h3>flip<\/h3>\n<p>Mirror left and right sides of the image.<\/p>\n<h3>flop<\/h3>\n<p>Mirror the top and bottom of the image.<\/p>\n<h3>grey<\/h3>\n<p>Make the image greyscale.<\/p>\n<h3>brightness<\/h3>\n<p>Change the brightness of an image. A percentage in the range of -100 .. 100(%). Negative values darken the image, positive brighten the image. This applies a lineair multiplier to the input image, similar to the css brighten filter. Defaults to 0, no change.<\/p>\n<h3>contrast<\/h3>\n<p>Change the contrast of an image. A percentage in the range of -100 .. 100(%). Negative values decrease the contrast of the image, positive values increase the contrast. A value of -100 results in a gray image. Defaults to 0, no change.<\/p>\n<h3>lossless<\/h3>\n<p>Controls whether resized image should become JPEG (<code>lossless=false<\/code>) or PNG\/GIF images (<code>lossless=true<\/code>). When set to <code>auto<\/code>, PNG and GIF images will stay PNG\/GIF images after resizing.<\/p>\n<p>This protects PNG\/GIF clip art and logos from being encoded as JPEGs and becoming blurry.<\/p>\n<p>Defaults to <code>false<\/code>. Examples:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">lossless=true\nlossless=`auto`\nlossless=false\n<\/code><\/pre>\n<h3>interlace<\/h3>\n<p>Make a progressive JPEG or interlaced PNG\/GIF image.<\/p>\n<p>Use <code>line<\/code> or <code>plane<\/code> to create an interlaced PNG or GIF or progressive JPEG image.<\/p>\n<p><code>line<\/code> uses scanline interlacing (RRR...GGG...BBB...RRR...GGG...BBB...), and <code>plane<\/code> uses plane interlacing (RRRRRR...GGGGGG...BBBBBB...).<\/p>\n<p>For JPEG images this is per default set to <code>plane<\/code>. To disable set to <code>none<\/code>.<\/p>\n<p>Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">interlace=plane\n<\/code><\/pre>\n<h3>mono<\/h3>\n<p>Make the image black and white.<\/p>\n<h3>quality<\/h3>\n<p>Set the quality of the resulting JPEG. An integer between 0 and 100, where 100 is best quality. The default quality is inversely proportional to the output image resolution: higher-resolution images still look good even with a limited quality.<\/p>\n<div class=\"admonition note\"><p class=\"first admonition-title\">Note<\/p><p class=\"last\">Images smaller than 400x400 are sharpened before JPEG compression.<\/p><\/div>\n<p>Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">quality=70\n<\/code><\/pre>\n<h3>link<\/h3>\n<p>Add a <code>&lt;a\\&gt;<\/code> tag around the generated <code>&lt;img\\&gt;<\/code> tag. The destination depends on the value given.<\/p>\n<p>Possible values:<\/p>\n<ul><li>none; links to the image page itself<\/li><li>an integer: to the page with that id<\/li><li>any other value: assumed to be a URL.<\/li><\/ul>\n<h3>alt<\/h3>\n<p>The text for the <code>alt=&quot;...&quot;<\/code> attribute of the <code>&lt;img\\&gt;<\/code>. Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">alt=&quot;A nice image&quot;\n<\/code><\/pre>\n<h3>class<\/h3>\n<p>The text for the <code>class=&quot;...&quot;<\/code> attribute of the <code>&lt;img\\&gt;<\/code>. Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">class=&quot;figure&quot;\n<\/code><\/pre>\n<h3>format<\/h3>\n<p>Use <code>webp<\/code> to produce an image in WebP format. This reduces the image size by approximately 30%. With <code>lossless<\/code> set to <code>auto<\/code>, it uses lossless compression when the input image is a GIF or PNG.<\/p>\n<div class=\"admonition note\"><p class=\"first admonition-title\">Note<\/p><p class=\"last\"><code>webp<\/code> is currently the only possible option.<\/p><\/div>\n<p>Example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">format=`webp`\n<\/code><\/pre>\n<h3>absolute_url<\/h3>\n<p>Ensure that the generated URL contains the <a href=\"\/id\/doc_template_tag_tag_url\" class=\"doc-reference doc-reference-tag\"><code>tag#url<\/code><\/a>.<\/p>","slug":"image","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"6cf718b8ea1c3ab16ce49916d1e8874c2bc754412fc87ddf39abe4080881a9fe","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.md","publication_start":"2023-06-24T08:17:59Z","github_url":"https:\/\/github.com\/zotonic\/zotonic\/blob\/master\/doc\/template-tags\/image.md","pivot_location_lng":null,"doc_source_kind":"template_tag","name":"doc_template_tag_tag_image","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":"19073459ea19a1407318a37747716c6f8546ed23\n","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"modified":"2026-10-07T21:20:34Z","title_slug":"image"},"uri":"https:\/\/zotonic.com\/id\/1341","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1341"}},"status":"ok"}