How renderable array for an image with style should look like? I have a custom module that outputs some images. Now, I would like to render them properly.

Currently, I use theme() function, kinda similarly to the way shown here1 and here1:

echo theme('image_style', array(
  'path' =&gt; $image['uri'],
  'style_name' =&gt; 'product_page_thumbnail',
  'attributes' =&gt; array(
    'alt' =&gt; $image['ImageAlt'],
    'title' =&gt; $image['ImageTitle'],
  )
));


Now, the theme() docs says:


  Avoid calling this function directly. It is preferable to replace direct calls to the theme() function with calls to drupal_render() by passing a render array with a #theme key to drupal_render(), which in turn calls theme().


So how would I do that?

I know renderable array for links, it's as simple as:

$link = array(
  '#type'    =&gt; 'link',
  '#title'   =&gt; $title,
  '#href'    =&gt; 'http://example.com',
  '#options' =&gt; array('html' =&gt; TRUE, 'title' =&gt; 'link'),
);


So I want the same, but for images. Somehow I can't find any documented example of it. 



1Internal Stack Exchange links, just for reference.
There's nothing specific for images, but there is for any theme function. Your old code using theme() would be equivalent to:

$build = array(
  '#theme' =&gt; 'image_style',
  '#path' =&gt; $image['uri'],
  '#style_name' =&gt; 'product_page_thumbnail',
  '#alt' =&gt; $image['ImageAlt'],
  '#title' =&gt; $image['ImageTitle'],
);


Basically you pass the named variables for the theme function as #-prefixed properties, and the render system will do the rest.