html · level 3 · unit 1 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
srcset offers the browser a choice of files.
Most phones and many laptops have a high : they squeeze two or three pixels into the space where older screens had one. A picture made for an older screen looks blurry on them.
srcset lists files for the browser to choose from. After each file name comes a : 1x for ordinary screens, 2x for screens with double the pixels. The browser downloads only the one that suits its screen.
Keep src as well. It is the : very old browsers ignore srcset and use src, so the picture still shows.
<h1>Pets looking for a home</h1>
<img src="dog.svg" srcset="dog.svg 1x, cat.svg 2x" alt="A pet looking for a new home" width="400" height="300">
<p>Ordinary screens get the first file. Sharper screens get the second.</p>Press show my page to see it here.
Practice files are drawings, so each choice here is a different one and you can spot the swap. On a real site, every file shows the same photo.
guess first
Which file does a screen with double the pixels download?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<img src="cat.svg" srcset="cat.svg 1x, dog.svg 2x" alt="A pet looking for a new home" width="300" height="300">your turn
Your turn. Offer a sharper file.
Fill the two descriptors on line 2, so ordinary screens get cat.svg and screens with double the pixels get dog.svg.
Press show my page to see it here.
dog.svgis for sharper screensnot checked yetsrcstays as the fallbacknot checked yet
fix it
The sharp file is never chosen. Can you fix it?
Press show my page to see it here.
- a comma separates the two choicesnot checked yet
srcis still the fallbacknot checked yet
- The browser cannot make sense of the list in
srcset, so it gives up and usessrc. How are the choices separated? - Each choice is a file name and a descriptor. A comma must come between one choice and the next.
- Add a comma after
1xon line 2, then press run.
nailed it
your pictures are sharp everywhere. :D
srcsetlists files for the browser to choose from.1xand2xmatch files to pixel density.- Keep
srcas the fallback for old browsers.
new words in your collection
- pixel density
- descriptor
- fallback
This lesson isn’t saved. A free account remembers every lesson you finish.