We need to change our approach to images. Why? Because the Internet has changed. People aren't just browsing at home, any more, they're doing it all over the place, on screens of almost every conceivable size. In fact, there are parts of the world where the only connection people have to the Internet is via smartphones.
Not iPhones, mind you. We're talking cheap phones. What's more, many of them are doing it with limited data plans.
This means that we've got to design our websites to account for this, and this means optimizing images for the mobile web. Raster images, such as .jpeg files, are not suited to responsive designs. Their measurements were designed to be fixed, and the big ones can eat up bandwidth.
If you want to keep costs down for you and your users, while making sure your website always looks its best, you'll need to find a way to make your images responsive. The good news is that people are working on the problem. There are already a few solutions out there. The trick is to know which one will work best for you.
Let's start with the first, and easiest, of your options:
Simply put, you set up that little bit of CSS to apply to all images. Once in place, it will make sure that all of your images stay inside of their parent elements. That way, when people view your website on a smaller screen, the image is guaranteed to shrink down as it should.Example:
This simple technique has its place, but it will not be right for every situation. If your website will be serving lots of images to users on mobile devices, you might want to implement one of the following proposed solutions.
Note: The next two solutions are included in the HTML5 specification. They will become "official" solutions over time, as more browsers begin to support them fully.
Typically, when you embed an image into a page, you only define one "source", in the form of the src attribute, like so:< img src="/img_articles/22532/whatever.jpg" alt="whatever">
The srcset attribute allows you to add other versions of the image, set the screen width at which those images are meant to appear, and let the browser make the decisions. This means that the user's device only downloads the right image for their screen size.
You would set it up like so:< img src="/img_articles/22532/whatever-small.jpg" srcset="whatever-medium.jpg 1000w, whatever-large.jpg 2000w" alt="whatever">
In the end, using the srcset attribute on a single <img> tag is probably the option that people will use most in the future. It just makes sense, when most of us will simply be using several differently-size versions of the same image, in order to save bandwidth.
Where srcset is just an attribute that can be applied to any image, <picture> is a full-fledged element, with its own tag and everything. Its general purpose is the same, though. Tell the browser that there are several different versions of an image, and which screen sizes to display them on.
The difference is in the math. If you only use srcset, the browser will make some calculations based on the screen or windows size of the browser that the site is being viewed on. You can give hints, but the browser itself makes the call.
With <picture>, you are in complete control. If you say that a certain image should be shown at a certain screen width, then that's what will be shown. The cost of this is more code. Therefore, it is generally recommended that srcset be used when dealing with different sizes of the same image. <picture> is to be used when you're doing art direction, and might want a completely different image shown at a specific screen size.
The code looks like this:
< source srcset="whatever-smaller.jpg" media="(max-width: 768px)">
< source srcset="whatever-default.jpg">
< img srcset="whatever-default.jpg" alt="whatever">
Copyright © . All Rights Reserved