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.
One thought on “Responsive images and tinySrc”
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:
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.