View all articles

How To Start Implementing Responsive Images On Your Website

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 adjust seamlessly.  

You’ll also want to deliver the smallest, best-resolution image to the user to ensure that images load faster with higher quality. If you deliver too large of a file size, the image could take dozens of seconds to load, which Google penalizes for — and your users won’t wait for them to load either!

Google announced that mobile friendliness is an important factor in ranking websites in searches on mobile devices. Before that, they stated that speed was a factor in page ranking, both items that also reduce bounce rate on your website. 

It’s important to implement responsive images because in 2014, mobile users surpassed desktop users:

Mobile Vs Desktop Users

Note: Implementing responsive images alone does not fix a non-mobile friendly website. Grab our Free Responsive Web Design Guide to learn how to how to implement flexible, grid-based layouts, media queries, and 6 different responsive layout patterns to make your project or website truly mobile responsive. 

One Goal, Many Options

There are many options to get to the same goal of ensuring that the images on your site scale appropriately.  We’ll show you one way through a simple HTML and CSS tweak and another through a tool that automatically generates code for images according to the sizes you specify. 

To get started, you should be familiar with basic HTML and CSS. 

Option 1: 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. It’s more practical to define widths in CSS.

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 its 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 choose a different image.

Using srcset for Responsive Images

Let’s dive into srcset for responsive images. It’s a way of displaying images, that allows devices with the capability to choose the best image for their screen size. 

If a device or browser can not read the srcset, it just ignores it and displays the image without much issue. 

The srcset code is for choosing the best image of multiple images, this means you’ll have many different image sizes. 

One image will need to be resized multiple times to make this work. 

Luckily, we’ll introduce a tool to you that will resize the images automatically for you based upon conditions you set, let you download the images, and give you the code for all your images. 

Here is an example of using srcset to resize an image on Shopify’s homepage:

Responsive Breakpoints on Shopify
(Source: Cloudfour)

Here is the code: 

<picture>
  <source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" 
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" 
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

This image is responsive because of something called breakpoints. Read more about breakpoints here.

The <picture> in the code above is another way to create responsive images but it’s an HTML5 feature that’s not supported on all older browsers. Read more about using <picture> here

Option 2: Use a Tool

Our main focus in this article is to introduce a tool to you so you can start using responsive images today on your website or project. 

The open source tool to create these breakpoints and responsive images is called Responsive Image Breakpoints Generator.

Responsive Image Breakpoints Generator

Here’s how to use this tool:

1. Upload an image

Upload An Image

2. Select your breakpoint generation settings

Upload an image

Resolution: This is what size resolutions you want to support, generally 200 is ok on the low end for feature phones and 1000 is OK for the high end for most devices. If you want to support “Retina” or higher resolution, select higher. 

Size step: “The performance budget. Only scaled down image versions that reduce the file size by approximately this amount are included.” This determines how many different images you will have based upon how much difference between each size is. The higher you set it, the less images you’ll have, the lower you set it, the more images you’ll have.

Maximum images: Set the max amount of images you want. Remember, more images is more hard drive space required and more assets to manage. 

Retina resolution: Click this if you want to include double resolution images for Retina displays. 

Aspect Ratio: This will make your image in different aspect ratios with code to go along with it. 

After you generate your image you’ll have something like this: 

Aspect Ratio Dimensions

3. Copy your new image code

It lists the different widths, heights, and file sizes for each image also allowing you to view the image. 

It will also give you the HTML5 code you can use with the scale of how the images compare at different sizes. 

Copy Your New Image Code

4. Download the Images

You’ll also get the HTML5 picture tag code and the ability to download the images already resized: 

Download the images

That’s it! 

All you need to do now is unzip the file with the images, upload it to your server, and use the code above to start having responsive images using srcset. 

You may need to adjust the URLs of your images if you host them on Amazon or a special folder on your website. 

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 and tools, but if you’re interested in learning more and delving into more complex and comprehensive solutions, check out this article on Responsive Images.

If you want to learn more responsive design, grab our Free Responsive Web Design Guide to learn how to how to implement flexible, grid-based layouts, media queries, and 6 different responsive layout patterns to make your project or website truly mobile responsive. 

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