View all articles

Get Started With Responsive Images

Screens rule our lives - and that’s why responsive sites matter.  When you switch from your cell phone to your tablet to your laptop, you want a design experience that looks best at each display size, and is flexible enough to make it happen.

For a seamless experience on any device, your code has to be flexible enough to make it happen.

One Goal, Many Options

There are many options to get to the same goal of ensuring that the images on your site scale appropriate.  To get started, you should be familiar with basic HTML and CSS.

Tweaking HTML and CSS

1. Remove Fixed Width:  If your images are not scaling, you should check your code to make sure that you don’t have any fixed widths in your HTML.  For example:

<img src=”bunny-rabbit.jpg” alt=”My Pet Bunny” width=”300” height=”326”/>

When you have an indicated fixed width, the image won’t scale correctly because it will display at the size indicated by your HTML code, no matter what the display screen size is.  Go through your HTML code and remove any width tags. 

2. Max Width: Now, it’s time to take a look at your CSS. Create a CSS rule so that your images will scale to their max width.  

Img {max-width:100%}

Your images should now display at the full width of the screen, instead of the fixed width that was previously in your code.

Issues

The solution above is a first, simple attempt to get you started creating responsive images.  However, there are other issues that this fix doesn’t always solve.

Images on a Retina Display: Retina screens are ubiquitous.  

“Retina” is Apple’s brand name for double-density screens but other manufacturers are creating similar displays. The technology is used in recent iPhones, iPads, MacBook Pros and other high-end devices. - Craig Buckler

If you use a photo (instead of a vector-based graphic), they might not display optimally on a retina display because the pixels don’t offer any additional image details, and retina screens have 4x as many pixels in comparison to other types of screens.  While there are workarounds to this issue, the easiest solution is to make sure that you’re using high-resolution images when needed.

Small vs. Large: Some images do not look good at different scales.  As a creative, you might choose a beautiful banner image that displays incredibly well on a desktop or laptop, but it might lose it’s luster on a smaller phone screen.  You can add code, called visibility classes, to your site that displays images only when viewed from certain screen sizes.  If you’re looking for a quick fix, you might want to chose a different image.

Just the Beginning
There is an incredible amount of attention from the design community to try to create more responsive products.  This article just skims a few basic tweaks, but if you’re interested in learning more and delving into more complex and comprehensive solutions, check out this article on Choosing a Responsive Image Solution.

If you’re a budding interaction designer, check out Designlab’s brand new Interaction Design course!

About Designlab

Designlab teaches you UI/UX design skills through online courses with 1-on-1 mentorship from expert designers.

Get Updates

Be the first to read our new articles on UI/UX design education, career development, and more!

Got it! We'll keep you in the loop.

Get the syllabus & take a tour