Family sizing
If you just want to avoid dictating pixels and yet override the adaptive sizing to make an image fit a particular type of device, you can specify the name of a mobile device family you are targeting with your site.
Simply place the name of the family at the very start of the path as follows:
<img
src='http://i.tinysrc.mobi/ultra/http://mysite.com/myimage.png'
alt='My image'
/>
This acts as an alias for a known screen size. ‘ultra’ includes phones such as Apple’s iPhone and the Android platform – their screens are 320px by 480px, so your image will be returned at a size that fits those bounds.
The named families that tinySrc knows are:
For charts showing common mobile device screen sizes, you are recommended to take a look at dotMobi’s DeviceAtlas (requires free registration).
If you want to specify a file encoding and a family name, ensure they appear in that order:
<img
src='http://i.tinysrc.mobi/jpg/ultra/http://mysite.com/myimage.png'
alt='My image'
/>
Finally, if you specify a width and/or height (which must always go just before the original URL), they will override the screen size implied by the family alias. For example,
<img
src='http://i.tinysrc.mobi/high/280/http://mysite.com/myimage.png'
alt='My image'
/>
will result in an image width of 280, not 240.
It is also possible to use the ‘-’ and ‘x’ modifiers in conjunction with this family sizing approach.
NB: family sizing is now a legacy technique. It is not as powerful as adaptive sizing, which is based on device-by-device screen data. So we strongly recommend that you now use that default technique instead of fixing broad families by name.
We review the overall API in summary in the next section.