Smart stretching allows the center of an image to stretch independently from the edges when it is resized. This is useful when you have an image with borders around a solid center.
For example, here is an image of a generic application window:
This image has a titlebar across the top, a gray stroke on all sides, and the corners are rounded equally. The image looks good at its native size, but when it is resized, it looks like this:
The uniform stretching of the image makes the titlebar, stroke and corners look out of proportion. Smart stretching can fix this by allowing the center to stretch independently of the sides.
For this image, at its native size, we can set the edges to to 25 (top), 5 (right), 5 (bottom) and 5 (left). The edges are identified on the canvas by bright blue lines.
Now, the component looks like this when resized:
By using smart stretching, the single source image can be used to create windows of many different sizes.