How to Choose a “Responsive Image” Solution
Handling responsive images is a hot topic for web developers right now. Unfortunately, there isn’t a perfect way to handle them yet due to the complexity of the problem. Every solution has major pros and cons. I recently read an article called Choosing A Responsive Image Solution, which gives a great overview of the problem and provides many different solutions. Every project has different needs, so you need to pick which works best for your situation. Any responsive solution at this point is better than nothing, so don’t worry if it doesn’t feel like a perfect solution.
Choosing a responsive image solution for wayne.edu
After going through all the available solutions, I ended up with Adaptive Images. I went with this solution for many reasons:
- Its easily maintainable for our team since we only need to create one image.
- We don’t need to make any changes to our current CMS to handle responsive images.
- Detects retina displays (option to toggle on or off).
- Breakpoints are specified in one PHP file.
- It works for our server environment (APACHE/PHP).
So what doesn’t it do?
- Does not fix the “art direction problem,” meaning we can’t serve cropped images (only scaled down ones).
- No bandwidth detection to serve images based on actual connection speed (not just screen size).
I’ve started to create a responsive SASS template that uses adaptive images and foundation. This template will grow overtime and hopefully be our go-to starting template for creating websites. Once I have it more refined, I may post a public version of it to share with everyone. In the meantime, if you have any questions about it, feel free to ask in the comments or shoot me an email.