Automatically resize images on your website for mobile devices

The ratio of mobile internet users to PC internet users has dramatically increased in the recent years. With the evolution of advanced touch screen mobiles with large screens and powerful operating systems like iOS4 or Android, users can get all the basic things done on their mobile devices. So, they prefer mobile devices to computers for on the fly internet browsing and many other stuff. In light of this fact, many websites these days have a shrunk, optimized version for mobile devices and mobile browsers that load faster and look better on the mobile screens. Therefore everything from images to CSS need to be modified. Resizing images can look like an extra work and can be tedious if there are a large number of images. Well, tinysrc.net offers a very simple and easy solution for developers developing mobile websites.

Tinysrc.net is a very handy online tool that can resize any image to perfectly fit into the browser of the visitor browsing from a handheld device and without giving you the trouble of going over the images to resize them manually. You just need to provide the URL of the image and this nifty tool does the job for you. Don’t get it mistaken for some image resizing software; its nothing you have to download to your computer and run for image resizing. Take this code for example:

<img
src=’http://mysite.com/myimage.png’
alt=’My image’
width=’640′
height=’400′
/>
This is similar to the code that you use to embed images to your HTML webpages. Simply prefix http://i.tinysrc.mobi/ to the URL of the image. Now your code will look like this:

<img
src=’http://i.tinysrc.mobi/http://mysite.com/myimage.png’
alt=’My image’
/>
Here the image dimensions have been removed because tinysrc.net automatically recognizes the handset in use and renders the image to match the screen size of the mobile device. Amazing isn’t it? So, for high end mobile devices with resolution of about 800×600, the tool automatically resizes the images to the corresponding dimensions to fit into the screen of the device. But if you want to specify the dimensions, you can do it by adding the width and height values.

For more information, visit the documentation of tinysrc.net.
Tinysrc.net can really save your time and spare you some trouble while developing webpages for varieties of handheld devices.

You may also like...