Images and videos present unique challenges in responsive design. This guide covers essential techniques for optimizing visual content across different screen sizes and device capabilities.

Basic Image Scaling with CSS

Simple CSS rules can make images fluid within their containers:

img {
  max-width: 100%;
  height: auto;
}

This approach requires images large enough to scale up for maximum display sizes, but desktop-optimized images can be heavy for mobile connections. For legacy Internet Explorer support (IE7 and earlier), add:

img { -ms-interpolation-mode: bicubic; }

Image Breakpoints and Device Adaptation

Basic scaling is insufficient for mobile devices where loading high-quality images is slow. Adaptive images must consider multiple variables:

• Screen resolution
• Bandwidth availability
• Browser viewport width

Optimal solutions provide different image sizes for various resolution groups. Common breakpoints cover:

• 480px: Standard smartphones
• 1024px: Retina smartphones, tablets, standard desktops
• 1600px: Retina tablets, high-resolution desktops

The Future HTML <picture> Element

The W3C is developing the <picture> specification to enable multiple image sources with media query control:

<picture width="500" height="500">
  <source media="(min-width:45em)" srcset="large1.jpg 1x, large2.jpg 2x">
  <source media="(min-width:18em)" srcset="medium1.jpg 1x, medium2.jpg 2x">
  <source srcset="small1.jpg 1x, small2.jpg 2x">
  <img src="img/small1.jpg" alt="">
  <p>Accessible text for all image versions</p>
</picture>

While awaiting browser support, current solutions use CSS and JavaScript.

Artistic Direction Control

Art direction involves providing different image crops for different viewport sizes. For example, a wide shot showing a couple on a boat with background scenery works well on large screens, but on small screens, cropping to focus on the couple provides better visibility.

FocalPoint Framework

FocalPoint enables focusing on the most important parts of images during scaling. It uses a 12×12 unit grid overlaid on images, with classes specifying horizontal and vertical focus areas:

<div class="focal-point right-3 up-3">
  <div><img src="img/portrait.jpg" alt=""></div>
</div>

Classes like right-X/left-X and up-X/down-X define grid units from the center, while portrait adjusts for vertically oriented images.

Current Image Adaptation Solutions

Foresight.js

Foresight.js detects device display capabiliteis and network speed before requesting images, using the CSS image-set() function pattern:

.image-selector {
  font-family: 'image-set(url(small.jpg) 1x, url(large.jpg) 2x)';
}

Implementation:

<script src="foresight.js"></script>
<img data-src="img/castle-small.jpg" data-width="240" data-height="157" class="fs-img" src="castle-small.jpg">

Foresight modifies filename suffixes based on device capabilities.

Picturefill

Picturefill mimics the future <picture> element using <span> elements as a polyfill:

<span data-picture data-alt="Description">
  <span data-src="small.jpg"></span>
  <span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
  <span data-src="large.jpg" data-media="(min-width: 800px)"></span>
  <noscript><img src="small.jpg" alt="Description"></noscript>
</span>

Include the required scripts:

<script src="matchmedia.js"></script>
<script src="picturefill.js"></script>

Responsive Background Images

Anystretch

Anystretch adds dynamically resizable background images to page elements:

<div class="stretchMe" data-stretch="img/background.jpg">
  <p>Content here</p>
</div>
<script>
$(".stretchMe").anystretch();
</script>

Options control positioning and fade effects.

Backstretch

Backstretch provides responsive background image slideshows:

$(".container").backstretch([
  "img/bg1.jpg",
  "img/bg2.jpg",
  "img/bg3.jpg"
], {duration: 5000});

High-Density Display Handling

High-density displays (like Retina) have higher pixel density, requiring images at 1.5× or 2× normal resolution. Media queries detect support:

.icon {
  background: url(sprite.png) no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
  .icon {
    background-image: url(sprite@2x.png);
    background-size: 200px 200px;
  }
}

Foresight.js can handle this with a single request:

.hd-image {
  font-family: 'image-set(url(standard.jpg) 1x, url(retina.jpg) 2x)';
}

Responsive Video Elements

HTML5 <video> elements can be made fluid with:

video, iframe {
  max-width: 100%;
  height: auto;
}

For embedded videos, FitVids.js maintains aspect ratios:

<div class="video-container">
  <iframe src="//youtube.com/embed/..." frameborder="0"></iframe>
</div>
<script>
$('.video-container').fitVids();
</script>

Responsive Image Sliders and Carousels

Elastislide

Elastislide creates responsive carousels that adjust to screen size:

$('#gallery').elastislide({
  minItems: 2,
  orientation: 'horizontal',
  speed: 500
});

FlexSlider2

A comprehensive responsive slider with touch support:

<div class="flexslider">
  <ul class="slides">
    <li><img src="slide1.jpg"></li>
    <li><img src="slide2.jpg"></li>
  </ul>
</div>
<script>
$('.flexslider').flexslider({
  animation: "slide",
  controlNav: true
});
</script>

ResponsiveSlides

Lightweight solution for basic responsive slideshows:

$(".slideshow").responsiveSlides({
  auto: true,
  nav: true,
  speed: 500
});

Swiper

Mobile-optimized touch slider with hardware acceleration:

var gallery = $('.swiper-container').swiper({
  pagination: '.pager',
  paginationClickable: true,
  slidesPerView: 3
});

3D Flow extension adds perspective effects.

Slicebox

3D image slider with slicing transitions:

$('#sb-slider').slicebox({
  orientation: 'h',
  cuboidsCount: 5
});

Touch Gesture Integration

Touch-enabled devices require specific considerations:

• Touch target size: Minimum 44×44 pixels
• Control placement: Position based on typical device holding patterns

QuoJS

Lightweight touch gesture library:

$('#element').hold(function() {
  $(this).toggleClass('active');
});

Hammer.js

Multi-touch gesture recognition:

var touchArea = $(".touch-region").hammer();
touchArea.on("swipeleft", function() {
  // Handle swipe
});

Responsive Table Solutions

FooTable

Converts tables to expandable responsive format:

<table class="expandable">
  <thead>
    <tr>
      <th data-class="expand">Name</th>
      <th data-hide="phone">Phone</th>
    </tr>
  </thead>
</table>
<script>
$('.expandable').footable();
</script>

Extensions add sorting, filtering, and pagination.

StackTable.js

Creates stacked key/value tables for small screens:

$('#data-table').stacktable();

Horizontal Scrolling Tables

Freezes first column for horizontal scrolling:

<table class="scrollable">
  <!-- Wide table content -->
</table>
<script>
$('.scrollable').responsiveTables();
</script>

Table Link Approach

Shows condensed table with link to full version:

@media (max-width: 520px) {
  .full-table { display: none; }
  .compact-table { display: table; }
}

Responsive Form Enhancements

Magicsuggest Autocomplete

Flexible autocomplete with multiple selection:

$('#city-field').magicSuggest({
  data: ['New York', 'Los Angeles', 'Chicago'],
  maxSelection: 3
});

Pickadate Date/Time Picker

Responsive date and time selection:

$('.date-selector').pickadate();
$('.time-selector').pickatime();

Tooltipster

Modern tooltip implementation with touch support:

$('.has-tooltip').tooltipster({
  theme: 'tooltipster-light',
  position: 'right'
});

IdealForms Framework

Compltee responsive form framework with validation:

<form id="contact-form">
  <div>
    <label>Username:</label>
    <input name="username" type="text" data-ideal="required">
  </div>
</form>
<script>
$('#contact-form').idealforms({
  onFail: function() {
    alert('Please correct invalid fields');
  }
});
</script>