Producing images of the perfect size, when you create a Web site that targets multiple device classes with very different screen sizes is always a problem. There are a number of solutions out there, but they all require some kind of server-side detection and image wrangling. tinySrc is a nice and simple solution that takes away most if not all of the legwork. Possibly the only downside of tinySrc is that it relies on server-side detection itself. A lot of developers that worked with browsers like Chrome, Firefox and Opera advocate for client-side detection where it’s the browser that tells you about its capabilities instead of relying on a static database. I will not go into the details of why and when one is better than the other, let’s just say that tinySrc already gives you the power of the server-side, with my little software you can also benefit from the power of the client.
Just give me the solution
If all you care is a super-simple solution that gets the job done, I recommend that you use tinySrc in its basic configuration. tinySrc does a lot of legwork for you and the resulting images are in 90% of the cases or more just great. Check out the tinySrc home and you already have all you need.
I also thought about WordPress Mobile Pack and users that are on simple hosting plans or maybe don’t have the time and skills to generate all the images in the right formats. tinySrc seemed a perfect match.
How it works
See it in action.
Why use it?
Why NOT use it?
I am looking at a couple more improvements, one idea is to use tinySrc’s dataURI API call and use that to replace all image URLs. That should save all the requests to your Apache server that are then redirected to tinySrc. Depending on how many images you have this might or might not make a difference. The problem is browser support, I am looking for some data. If you have any, please contact me.
The source code
If you like what you saw you can get the code on github.