Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:15Length:1.3 hours
Open Assignment Available
There's a hands-on Open Assignment associated with this course. Practice everything you've learned in the course, ask questions, and post your designs in the comments section.

Next lesson playing in 5 seconds


Free Preview: Understanding Responsive Images


  • Overview
  • Transcript

We all want our images to display at the best possible quality, with optimal file size, on different devices, but achieving that is easier said than done. There are many different techniques for making images responsive, but some of them have serious downsides, such as limited browser support. In this course you’ll learn everything you need to know to get started with responsive images. We’ll cover what they are and how they relate to responsive web design, and we’ll also discuss best practices.

1. Hello!

1.1 Welcome

Hello, and welcome to Understanding Responsive Images. I'm Adi Purdila, and in this course, you'll learn everything you need to know about well, responsive images. In the past couple of years, there's been all this talk about responsive web design, and people are starting to get more and more creative with how they adapt their layouts to various device or screen widths. But, it seems that there's an elephant in the room that nobody really wants to talk about, and that is images. Almost every website out there uses images, and when you are making a website responsive, you should also consider images because those are the heaviest parts, so if you're thinking about performance, then images play a huge role. Now, there are a couple of techniques that allow you to display different images, depending on your device and your connection speed. Some are native to some browsers, some are not, and some are even third-party solutions. And in this course, you’ll learn about all of them. So, let’s dive right in and first learn a little bit about responsive web design. So, that’s coming up next.

1.2 Introduction to Responsive Web Design

Before we talk about responsive images, we need to get a bit of perspective on the whole deal, and the best place to start is responsive web design. And responsive web design is a topic that's been discussed over the last couple of years. And I won't go into too much detail but if you really don't know what it is, or you just really want a refresh, go ahead and check out the lesson notes for some appropriate links. The concept of responsive web design was first nailed back in 2010 by Ethan Marcotte in an article for a list apart. You can find the link down below. There he talked about how we should think about building websites that adapt to the medium that renders them. In other words, instead of building a website for desktop and one for mobile, like people were doing in the past. We should build a single website that will adapt itself or respond to the device it's being displayed on. Either it's a mobile phone, smartphone or a desktop or a laptop. For example let's take a look at the tuts plus website. As you can see this responds really well to the view port size and it doesn't just resize elements, it moves them around to making sure you get the best experience possible. Now this website just like many other websites out there uses a lot of images. In fact, images are being used more and more nowadays. So, let's dig a little deeper.