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.
So why mix tinySrc with a JavaScript?
At mobilism I met Scott Jehl for the first time and he mentioned working on a JavaScript that would take care of providing the right images based on client-side detection. It sounded quite interesting to me because most of the times, in order to create a decent responsive design, you have to create all the media files in advance.
I started looking at his Responsive Images library and liked the idea. We exchanged a few messages and it seemed easy enough. What it does not do is what I know is very often the real issue: generate the images. So it taps into the power of the client-side detection to understand what the browser and device can do, but then relies on media files generated in advance. In Filament’s online demo you can see that Scott generated 2 images, small and big and that’s all you get. Of course you can extend the JavaScript to manage more sizes, but every time you add a format you will have to edit your JavaScript. This is a good start, but not exactly what I was looking for.
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
The changes I made to Scott’s JavaScript and Rewrite rules are very limited, but I think they open the door to some substantial benefits. The JavaScript now reads the available width and height of the screen and passes those values to tinySrc so that an image of the perfect size will be generated (I padded the image of 20px for safety). You still need to have a small image (for fallback purposes) and a full-size image so that tinySrc has a high resolution image to work from (of course the bigger the better).
See it in action.
Why use it?
If you want to apply responsive design you must create the correct media files for each target device or family. This little script allows you to do that with near-zero effort. If you want to support device families tinySrc supports that, but you will have to change the JavaScript. What’s not to love?
Why NOT use it?
The JavaScript works so that it parses your HTML and replaces all image URLs with a dummy URL on your Apache server (at the time of writing the script requires Apache, nginx in the works). When the client requests that URL your Apache server will redirect the client to tinySrc. This is at least 1 HTTP request for every image that we might avoid. tinySrc on its own already does a great job, so this really is a step further toward responsive design. The only one that knows which approach is best is probably you.
What next?
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.
Andrea Trasatti's tech notes and more 
This is awesome, but you as say, only a step further towards responsive design. Consider my case: Today, I’ve got a simple desktop version of a website. I’m using timthumb to generate correctly sized images, so that the client only has to worry about uploading an image that’s big enough. I put this in the source:
src=”image.jpg?w=500&h=300″
Now, I’m about to make the site reponsive. Say I wanted to create a layout for tablets, in which the above image should be 250×150. How could I easily and automatically do that? I still don’t want the image size to be generated based on the screen/device width, as that would make it too big. That’s only purposeful when we get down to mobile sizes, when deciding the size of the image based on screen/device width makes more sense.
Maybe a script that created a new image with the same width as its container (if the container width is set in %, would there be a way to get the max-width?). I could then set the image to max-width:100% and control the size using CSS media queries.
LikeLike