output="url" returns the cached image’s location, relative to server’s document root. In this example, the value is used as the src value for an <img/> tag.

<img src="[img_fit output='url' height='200']atest.gif[/img_fit]" height="200" />

<img src="/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_0_200.gif" height="200" />

output="img" is the default for all IMG Processor shortcodes. The result is an <img/> tag which displays the image on the page.

[img_fit output="img" width="200" height="200"]atest.gif[/img_fit]

<img src="/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif" width="142" height="200" alt="atest.gif" />

output="html" allows the default <img/> tag to be customized by adding any of the following six (6) shortcode options. If the shortcode attribute is set, a corresponding <img/> attribute is added to the HTML result.

• img-id="{css-name}"
• alt="{image-description}" (default: src filename)
• title="{image-title}"
• style="{css-styles}"
• decoding="{auto|async|sync}" (default: async)
• loading="{eager|lazy}"

[img_fit output="html" width="200" height="200" alt="IMG-ALT" title="IMG-TITLE"]atest.gif[/img_fit]

<img alt="IMG-ALT" title="IMG-TITLE" decoding="async" src="/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif" width="142" height="200"/>

output="figure" extends output="html", wrapping the <img/> in <figure>..</figure> tags and, optionally, adding <figcaption>..</figcaption> tags. This follows the behavior of WordPress’s “Image” block. The following four (4) options are available.

• figure-id="{css-name}"
• figure-class="{css-classnames}"
• caption="{image-caption}"
• caption-class="{css-classnames}"

[img_fit output="figure" width="200" height="200" alt="IMG-ALT" title="IMG-TITLE" caption="CAPTION" figure-class="wp-block-image has-custom-border" style="border-width:1px;border-radius:6px"]atest.gif[/img_fit]

<figure class="wp-block-image has-custom-border"><img alt="IMG-ALT" title="IMG-TITLE" style="border-width:1px;border-radius:6px" decoding="async" src="/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif" width="142" height="200"/><figcaption class="wp-element-caption"/>CAPTION</figcaption></figure>

output="info" is a development and debugging aid. It returns details for the result image formated as an HTML list. Any single value from that list can be returned by using its name. For instance, output="url" returns the image’s location; output="bytes" returns the file’s size; output="datetime" returns the file’s modification date; etc.

[img_fit output="info" width="200" height="200"]atest.gif[/img_fit]

output="json" is similar to output="info" except the details are encoded as a JSON string. The value can be passed to Javascript, and then parsed to recreate the info array.

<script language="javascript">
var $mydata = JSON.parse('[img_fit output="json" width="200" height="200"]atest.gif[/img_fit]');
console.log($mydata);
document.write('<pre>');
document.write('\n url = ' + $mydata.url);
document.write('\n width = ' + $mydata.width);
document.write('\n height = ' + $mydata.height);
document.write('\n bytes = ' + $mydata.bytes);
document.write('</pre>');
</script>