Introduction

The current issue

Many of us now visit websites on a small, phone-size device. Do we really want to wait on an image downloading that was intended for a large desktop? Of course we don’t!

So, here is the problem…

Smaller website images download faster so are ideal for smaller, mobile devices. But, when scaling up to the big screen, they can look really stretched and pixelated.

And if we start with a large image, it can take too long to download, potentially causing a bad user experience.

Solutions

How do we efficiently add images to our websites to suit all screen sizes and devices?

We could try to use an image with a middle ground on the size, but this is becoming much more difficult since screens are getting bigger and also higher resolution.

Another way of doing this is by taking advantage of the HTML picture element. With picture we can have multiple sizes of the same image. And the browser will load up the correct one based on the size of the device.

Not only this, but we can also load different images based on the orientation, type of device, the type of image formats the browser supports, and so much more.

We will also discover many other techniques during this course such as:

• Lazy loading.
• Passing more control to the browser.
• Third-party services.
• Art direction
• Image compression.
• Pixel density and resolution.
• Fallback images.
• Final project to test your skills!. ::

Prerequisites

If you create any type of HTML websites or applications, then this course is ideal for you. You don’t need a lot of experience to take this course. It is designed to be beginner friendly, although some HTML experience will be beneficial since it will assume you know HTML basics.

Let’s move onto the first lesson where we will discover the effect wrong sized images can have on the user experience.