To use resized images, there are three smarty function available. The two modifiers th and alt are shortcuts to use preset picture sizes. The resize function has more options.
Examples using the thumbnail or alternative size of a picture:
<img src="{$picture.file}" alt="This is the normal size" />
<img src="{$picture.file|th}" alt="This is the thumbnail version" />
<img src="{$picture.file|alt}" alt="This is the alternative size" />
What sizes the generated thumbnails and alternative versions will be depends on the directory settings.
Using resize
<img src="{resize image=$picture.file}" alt="Using standard settings" />
<img src="{resize image=$picture.file w=200}" alt="Resized to a maximum width of 200px" />
<img src="{resize image=$picture.file h=120}" alt="Resized to a maximum height of 120px" />
<img src="{resize image=$picture.file width=300 height=300}" alt="Resized 300px on each side, longer side will be cropped" />
<img src="{resize image=$picture.file crop_ratio="1:2"}" alt="Center-cropped so that picture is twice as tall as it is wide" />
<img src="{resize image=$picture.file c="5:1" h=50}" alt="Center-cropped so that width is 5 times the height and then resized to a maximum height of 50px" />
<img src="{resize image=$picture.file q=60}" alt="Adjusted JPEG-quality to 60%" />