Defined sizing
If you want to resize your images precisely, tinySrc takes optional parameters to let you define width and height, in that order. These need to appear prior to the image URL in your src attribute.
<img
src='http://i.tinysrc.mobi/320/200/http://mysite.com/myimage.png'
alt='My image'
width='320'
height='200'
/>
Because we are being explicit about the resizing, we can also be confident about restoring the width and height attributes into the tag as well.
Take a look at the HTML source to see how we did it for the images at the top of our home page.
If you are only concerned about constraining the image’s width, just provide a single numeric argument:
<img
src='http://i.tinysrc.mobi/320/http://mysite.com/myimage.png'
alt='My image'
width='320'
height='200'
/>
And remember, tinySrc always preserves aspect ratio, so in this example, we can still leave the height attribute of 200px in the tag, even though it is not explicit in the src.
Important note: tinySrc will only shrink images. It will not enlarge them. If you were to specify the following:
<img
src='http://i.tinysrc.mobi/1280/http://mysite.com/myimage.png'
alt='My image'
width='1280'
height='800'
/>
…then the returned image would be the same as the original. This means that you should make sure the original graphics are large enough to fulfill your needs, even for high-resolution devices like the iPhone.
Now, you may be thinking that you’d like not to have to specify a size at all, and have tinySrc decide how to size the image for a particular device. In which case, read on to the next section.