DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[Sizes Attribute]]|[[srcset and sizes quizz]] ->|

====== srcset and sizes Quiz ======

I want to recap what you just learned about the image attributes ''%%srcset%%'' and ''%%sizes%%''. This is a chance for you to take a closer look at the syntax of each attribute before trying them out on a real page in the next two quizzes.

In this quiz, you’ll experiment with ''%%srcset%%'', and in the next you’ll add ''%%sizes%%'' to give the browser even more information.

===== Syntax =====

There are two flavors of ''%%srcset%%'', one using ''%%x%%'' to differentiate between device pixel ratios (DPR), and the other using ''%%w%%'' to describe the image’s width.

==== Reacting to Device Pixel Ratio ====

<code>
<img src="image_2x.jpg" srcset="image_2x.jpg 2x, image_1x.jpg 1x" alt="a cool image">
</code>
Set ''%%srcset%%'' equal to a comma separated string of ''%%filename multiplier%%'' pairs, where each ''%%multiplier%%'' must be an integer followed by an ''%%x%%''.

For example, ''%%1x%%'' represents 1x displays and ''%%2x%%'' represents displays with twice the pixel density, like Apple’s Retina displays.

The browser will download the image that best corresponds to its DPR .

Also, note that there’s a ''%%src%%'' attribute as a fallback.

==== Reacting to Image Width ====

<code>
<img src="image_200.jpg" srcset="image_200.jpg 200w, image_100.jpg 100w" alt="a cool image">
</code>
Set ''%%srcset%%'' equal to a comma separated string of ''%%filename widthDescriptor%%'' pairs, where each ''%%widthDescriptor%%'' is measured in pixels and must be an integer followed by a ''%%w%%''. Here, the ''%%widthDescriptor%%'' gives the natural width of each image file, which enables the browser to choose the most appropriate image to request, depending on viewport size and DPR. (Without the ''%%widthDescriptor%%'', the browser cannot know the width of an image without downloading it!)

Also, note that there’s a ''%%src%%'' attribute as a fallback.

Ready to give it a shot? Click “Continue to Quiz” to try it out!

---

Here are my finished image tags:

==== DPR (Den Haag) ====

<code>
<img  class="dpi"
      src="images/Den_Haag_2x.jpg"
      srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg 1x"
      alt="Den Haag Skyline">
</code>
Notice how I’ve got a ''%%src%%'' as a backup. The order of the sources in ''%%srcset%%'' doesn’t matter. Also, if you omit the multiplier, it will default to ''%%1x%%'', meaning that

<code>
srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg 1x"
</code>
is the same as

<code>
srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg"
</code>
==== Image Width (Australia) ====

<code>
<img  class="w"
      src="images/Australia_1280w.jpg"
      srcset="images/Australia_1280w.jpg 1280w, images/Australia_640w.jpg 640w"
      alt="Australia from Space">
</code>
Once again, there’s a ''%%src%%'' backup and you can switch the order of the images in ''%%srcset%%''.