Responsive Images Done The Right Way


The Right Way To Do Responsive Images.

In this tutorial we will:

1. Use picturefill.js, the picture & source elements & srcset for truly responsive images (All Browsers Supported).

2. Create a full size width and height banner image.

3. Use CSS The Sassy Way (SCSS) and with plain ol’ CSS.

4. Animate a html character in a span with css3 tranforms.

5. Vertically and horizontally align divs and content using Flexbox.

6. Use vh and vw (viewport sizes).

 


1. I Love The Beach

Responsive images using Picturefill.js, the picture, source elements & source set attribute.

The images will change based on the media query in the source attribute (HTML) targeting the pixel width of the broswer size.

Make sure the image is large enough for desktop screens and then use smaller images for mobile devices.

Notice the image change when the browser size changes.

Viewport sizes are used: vh (viewport height) and vw (viewport width).

The content h1 or text with heart & divs are centred using flexbox CSS.

The animation of the love heart uses a 2D CSS3 transform animation.

You can simply cut the images to different sizes for different device widths and resolutions.

You can use w (width) and h (height) in the source attribute as well as 1x and 2x for different screen resolutions. (See Further Info links below).

Set the container overflow to hidden.

It’s plain ol’ CSS not SASS :).

Don’t forget to link to a picturefill.js resource or CDN like so:

 

https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js


Further Information:

Responsive images with Picturefill.js & srcset video

Github

Note for background images in css use: background-image:url(‘link-to-the-image.png’); & use {background-size:cover;}.

Apply different sized images at different break points using media queries for responsive background images purely in css. But this technique is hard coding the image in css at different breakpoints and not an ideal solution when building with a CMS or building a web app (which will be dynamic).

 


 

2. I Love Code – Using Percentages example %

This technique uses one image across all devices and will take a longer amount of time to download on devices with weaker internet connections (like a mobile phone). The image will scale. The aspect ratio will not change.

I’ve created a JS fiddle to show a full size banner image using percentages.

The parent container uses percentage.

The child div “two” uses percentages and is centred using percentage.

The content h1 or text with heart is centred using flexbox CSS.

The animation of the love heart uses a 2D CSS3 transform animation.

The SASS is nested but no mixins or variables are used.

Keyframes from 0%, 50% to 100% are used with a scale of 1 to 1.3.

 

3. I Love Coffee – vw & vh & css image hack example.

This technique uses one image across all devices and will take a longer amount of time to download on devices with weaker internet connections (like a mobile phone). The image will not scale and will skew based on the browser width and height. The aspect ratio will change.

I’ve created a JS fiddle to show a full size banner image using percentages within a container.

The container and child div “two” uses viewport sizes.

vw (viewport width) is used as well as vh (viewport height).

The content h1 or text with heart is centred using flexbox CSS.

The animation of the love heart uses a 2D CSS3 transform animation.

The SASS is nested but no mixins or variables are used.

CSS hack on the image.

Keyframes from 0%, 50% to 100% are used with a scale of 1 to 1.3.

 

Cheers!

I hope this helped 🙂




This article was written by

Ben Graham

on Monday, 1st January, 1979.

Full Stack Designer from Brisbane, Australia. I completed a degree in Interactive and Visual Design from Queensland University of Technology. In my spare time I enjoy travelling and practicing photography. I have a keen interest in learning, regularly training and developing skills in UI Design, User Experience Design, Web Accessibility, Front End Development & Graphic Design. Currently I work as a consultant @ Avanade, an Accenture and Microsoft company.

UI/UX Designer | UI Developer


  • Daniel Conder

    I wouldn’t call this the “right way”. Rather it is “one way” to do them, and at the time of you writing this, there were already better solutions available.

    • Good Point, I was targeting the keyword on Google…..an improved article would list all ways and break it down further……however it’s a good way to handle responsive images out of all the possible solutions…..and a perfectly fine way to do it. Thanks for the feed-back buddy.