IIPImage » Blog » Responsive Images using IIPImage. The proliferation of mobile devices has made responsive web design one of the hottest topics in web design. Modern web sites need to be usable on a large range of screen resolutions and sizes, from low resolution mobile devices to high resolution monitors. For page layout, various techniques based on fluid layouts, media-queries or combinations of these with HTML5 have been developed, which adapt layout to suit the available screen size.
Responsive Images However, images themselves also need to adapt to the context, not just for maintaining layout, but also to reduce unnecessary bandwidth. The solve this, the concept of responsive images (or adaptive images) enables the browser to request an image at a size appropriate for the screen resolution. These solutions include modifying the <img> tag by adding something like @srcset, which would look like: Or creating a new adaptive image element such as <picture>: This could also be done in CSS rather than within the element itself.
Resizing. 3 Types Of Solutions To Work With Responsive Images. One of the big 3 requirements for responsive design is flexible images and media. On the surface it seems like an easy thing to do. You remove width and height attributes on images, set their max-width to 100% and call it a day. Beneath the surface there’s a lot more we need to consider.
The Problem with Images in a Responsive World When the Filament Group was redeveloping the Boston Globe website last year they too added max-width to keep images flexibly inside their containers. Unfortunately for all cases except when the maximum image is needed, that’s wasteful. Even if bandwidth weren’t an issue you still have to consider if the same image works at very different sizes. And let’s not forget about high resolution displays. We can’t simply preload all the different images we might use, since it defeats the whole point. We need a greater ability to serve device and context appropriate images and media. 3 Paths to Solution Let’s take a look at the solutions in each path. A New Image Format. FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
CSS: Elastic Videos. While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy.
View the final demo and resize your browser window to see it in action. View Demo Elastic Videos Elastic HTML5 Videos (demo) With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). Elastic Object & Iframe Embedded Videos (demo) The trick is very simple. How to Create Fixed Width & Elastic To restrict the width of the video, an additional <div> wrapper is required. Compatibility Credits This trick was found on tjkdesign.com. Adaptive Images in HTML. ReSRC.it - Responsive images on demand, directly from the cloud.