Adaptive sizing
There are thousands of makes and models mobile phones and devices in the market. And each one is a little bit different.
One of the problems you face as a mobile designer is knowing how large all of their screens are. Well, tinySrc can take care of that too.
We’ve teamed up with the DeviceAtlas team at dotMobi, and they have captured screen sizes for over 3,000 mobile devices. tinySrc uses this data to ensure your images fit whichever screen your users have – automatically.
By default, the image constraints are set to the full width of the screen, using the displayWidth and displayHeight properties provided by DeviceAtlas.
This is the default behaviour of the API if no other properties are provided. For example:
<img
src='http://i.tinysrc.mobi/http://mysite.com/myimage.png'
alt='My image, constrained by the screen'
/>
Note how we are not providing width and height attributes in the markup, since the values may be different for every handset screen encountered.
Subtraction sizing
Additionally, you can trim or scale the image further, by providing width and height parameters.
As we have seen, an explicit width or height before the URL will fix the image size. But by prefixing those parameters with ‘-’ or ‘x’, the numbers come to represent subtraction and percentage scaling (of the adapated screen size) respectively.
So for example, if you wanted your image to be, at most, 8 pixels narrower than the width of the screen, (whatever that actually is), you would use ‘-8′, as in the following:
<img
src='http://i.tinysrc.mobi/-8/http://mysite.com/myimage.png'
alt='My image, constrained by 8 pixels less than the screen width'
/>
This is useful if you wish to leave a border around your images or if you want to account for the scroll bar of the browser screen.
Percentage sizing
Similarly, if you want to scale the graphic to a proportion of the screen, use ‘x’. The value provided is interpreted as an integer percentage from 1 to 100.
So to ensure the image takes no more than half the screen use ‘x50′, as in the following:
<img
src='http://i.tinysrc.mobi/x50/http://mysite.com/myimage.png'
alt='My image, constrained by half the width of the screen'
/>
It is possible to use either of these modifiers on both the width and the height simultaneously.
For example, this would ensure the image fitted into a quadrant of the screen:
<img
src='http://i.tinysrc.mobi/x50/x50/http://mysite.com/myimage.png'
alt='My image, constrained by half screen width and half height'
/>
Mixed sizing
Different modifiers can be used for width and height. This example ensures the image runs almost the whole width of the screen, but doesn’t take up more than a fifth of its vertical height:
<img
src='http://i.tinysrc.mobi/-5/x20/http://mysite.com/myimage.png'
alt='My image, constrained in banner-ad style'
/>
And finally, of course, if neither ‘x’ or ‘-’ modifiers are provided before the number, it is interpreted as an absolute pixel number. This example constrains the image by half the width of the screen and 100 pixels in height:
<img
src='http://i.tinysrc.mobi/x50/100/http://mysite.com/myimage.png'
alt='My image, constrained to half screen width and 100px in height'
/>
It is important to remember that in all these cases, however, the image retains its aspect ratio. Even if the resulting dimensions of the above examples are letterbox in shape, a portrait image will remain portrait.
In other words, the width and height resulting from the above subtraction and scaling operations are constraints – not guaranteed dimensions of the result.
It is also possible to change the image file formats. Please refer to the next section.