Documentation
Here’s a quick guide on using tinySrc
Inside your HTML, you’re already familiar with inserting images into your page like this:
<img
src='http://mysite.com/myimage.png'
alt='My image'
width='640'
height='400'
/>
To use tinySrc, you simply prefix your absolute src attribute with:
http://i.tinysrc.mobi/
Add that into the tag and your image will be magically resized for a smaller, mobile screen:
<img
src='http://i.tinysrc.mobi/http://mysite.com/myimage.png'
alt='My image'
/>
Unless you tell it otherwise, tinySrc will resize the image to fit the screen of the mobile handset visiting your site. For example, if an iPhone visits the site, the image will be constrained to its screen size of 320px x 480px.
In this particular case, the image is of landscape orientation, and width is the constraining dimension. Aspect ratios are always preserved by tinySrc, so our 640px by 400px image will emerge resized for an iPhone as 320px by 200px.
If you want to resize graphics to to something other than the full screen in width or height (and you should), there are plenty of other ways the API can be used. Next.