New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Friday, May 09, 2014

Creating Responsive Images and Media

figure_1_percent_sizing

As mobile and tablet Internet usage continues to grow, responsive web design becomes more and more important. Some reports suggest that mobile Internet usage may actually surpass desktop usage this year. For any website not taking advantage of responsive design, this means a loss of traffic and fewer conversions.

When creating a responsive website, it’s especially important to know the best practices for images and media. In this article, we’ll talk about bitmap-based web graphics, including JPG, GIF, and PNG, as well as video.

Responsive Imagery

One of the easiest ways to make your graphics responsive is to use percentage-based values for your images. In the past, designers used pixels to determine height and width, but this isn’t a viable solution anymore with so many different types of devices and screen sizes. Specifying 100% as the width value for your <img> elements in CSS provides a quick fix for responsive images, allowing them to smoothly resize to fit their container when the page is resized.

figure_1_percent_sizing

When creating a responsive website, using fluid images and adaptive media will go a long way to help your site smoothly adapt to different screen sizes, and provide a much better user experience for visitors. Scaling and replacing images are two popular ways to achieve this. Scaling an image (as in the example image above) to fit within a specific layout may work well for many images and layouts. Other designs may be better served by loading alternate graphics altogether. Loading an additional graphic allows you to change the scale, positioning, and crop of the image.

figure_2_replace_images

Watch a video: Learn to replace a background image with CSS based on the user’s screen size.

Another aspect to consider is high-definition graphics. Many of today’s screens have high pixel density displays, consisting of 166 ppi and higher. This means standard-sized web graphics are being represented with two, three, or fourtimes the number of physical pixels, so graphics can begin to look soft or blurry when viewed on these devices. To fix this, use larger images, and set the size appropriately in HTML or CSS. This allows browsers to use the extra detail in yourimage file, on devices that support it.

figure_3_hi_definition

Watch a video: Learn to create high-definition graphics.

When considering high-definition graphics, you should also consider download as well. Larger graphics mean larger file size, and longer downloads. One approach that can help is to use CSS3′s device-pixel-ratio property to determine whether a high-definition graphic will benefit your user. If you know the pixel ratio of the device that’s viewing your images, you can use the same image-swapping technique discussed earlier to replace our graphics with higher quality versions.

Watch a video: Learn to detect high pixel displays with CSS.

Responsive Media Sizing with JavaScript

JavaScript can play a powerful role in responsive designthe website to serve an optimal image for that user. You can implement adaptive media and fluid images by writing code to scale them specifically for the intended screen size. This becomes important for media-like video, because the HTML video element needs both width and height values to display its contentproportionally (whereas browsers will automatically scale images). While some browsers canproperly scale the video properties, it won’t be consistent for all users.

In addition to inline media elements, using the iframe element in a webpage allows video, maps, social media feeds, and other interactive experiences to be inserted into your page as well. And as with video, the iframe’s dimensions need to be specified to match the content it’s loading. When your content has to be displayed proportionally, you can’t just rely on a width percentage alone and hope for the best.

The solution? JavaScript. Since we can look forelements on the page, store their values, and perform calculations, we can create new calculations and assign them to HTML and CSS based on screen size. This process goes one step beyond adjusting layout or content, in that it dynamically changes properties of the page to respond to screen size.

Watch a video

Learn how JavaScript can be used to monitor and adjust elements of your webpage based on screen size.

The Future Looks Bright

The future of responsive design and fluid media is bright, offering far greater control over how we deliver web content. W3C recommendations being considered for the future include support for bandwidth testing, which would allow us to send assets based on Internet connection speeds, and optimize media for the viewers’ bandwidth. Another W3C recommendation being considered is a new HTML5 picture element, which would allow varying image sources (like we do for video) with web graphics. This solution would provide the best of both responsive image techniques covered in this article. Although these improvements would certainly be welcome, there’s still plenty that you can do today to make your images and rich media responsive in an increasingly mobile world.

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

All articles

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.