Responsive images using PHP
Responsive design is great! By now every web developer should know this. However there is one problem with this technique and that is none other than image serving. Having the mobile device shrink the images in the browser is both a waste of bandwidth and CPU. The good news is that we can use PHP in order to serve adaptive images and implement what is known as RESS (responsive server side)
If you haven’t heard about responsive web design by now here is a brief introduction
What is Responsive design
Responsive web design is a front end development technique, where the content AND the layout respond to the size of the screen it is viewed on. If you’re viewing this website on a desktop, try resizing your browser. You will notice a number of things happening (ie smaller font size, areas shrinking, layout changing etc) in order to better accommodate the content for your current screen size.
The benefits of responsive design
- Developing and maintaining a responsive design for multiple platforms rather than separate websites is faster and easier.
- Having only one HTML source makes SEO easier. This technique is actually recommended by Google in order to improve SEO bit.ly/ZwUbNQ
- It improves mobile usability and readability. Internet mobile penetration is constantly increasing and it’s important to provide that audience with a usable browsing experience bit.ly/14SwlwC
As I already mentioned serving a 1600×900 image to a mobile device that has a resolution of 320×480 is a waste of bandwidth and CPU cycles. We are charging the user for data he does not need and we are putting an unnecessary strain to the CPU (or GPU if available) to resize the image. Even more important, chances are that the users browsing our website through a mobile device are using a sub par internet connection. So we are slowing down our website to the users that actually need a lean and fast website the most.
A better approach for serving images in responsive web design is the following:
- We re-route all image requests to a php file.
- The php file decides if the original image is suitable for the client’s screen size.
- If it’s ok the request proceeds normally. If not the php file resizes, serves and stores the resized image for future requests.
That’s it! Short and sweet. Well not really short, we do have to write some code and if we mess up the resize and store part, it is possible that we are creating more problems than we are actually solving.
Thankfully you can head over to http://adaptive-images.com/ and download all the necessary files.
Adaptive images features
- Works on existing site
- No mark-up changes
- Device agnostic
- Up and running within minutes
You can learn more about it at http://adaptive-images.com/details.htm