الدرس 14 · How browsers use HTML

Responsive images

لم يُترجم بعد؛ يُعرض باللغة الإنجليزية

A picture that looks sharp on a big screen can waste data on a small one. With srcset and sizes, one img element offers the same picture at several widths and says how wide it will be drawn. Follow the browser on a phone and on a laptop as it works out the slot, multiplies by the screen's pixel density and downloads only the one file it needs. Then add the habits that make images behave: width and height, src and alt, and <picture> for a different crop.

10 دقيقة11 خطوات5 أسئلةAdvanced

شكل 14 · تفاعلي

جارٍ تحميل الرسم…

أو ← →

اختبر نفسك

5 أسئلة سريعة

اختر إجابة لتعرف السبب. تُحفَظ نتيجتك مع تقدّمك.

01In srcset="cup-400.jpg 400w, cup-800.jpg 800w", what does 800w mean?

A width descriptor tells the browser how many pixels wide the file really is. How wide it is drawn comes from your CSS; sizes tells the browser that width in advance.

02sizes="(max-width: 600px) 100vw, 50vw". The viewport is 1200 CSS pixels wide. What is the slot?

1200 is more than 600, so the condition is false and the browser uses the last value, 50vw: half of 1200, which is 600 CSS pixels.

03A phone's slot is 400 CSS pixels and its devicePixelRatio is 2. The candidates are 400w, 800w and 1600w. Which file does the browser usually download?

It needs 400 × 2 = 800 pixels across. cup-800.jpg is the smallest file with enough pixels, and only that one file is downloaded.

04Why add width="800" height="600" to an img that CSS resizes anyway?

width and height give the aspect ratio before the file arrives. The browser reserves a box of that shape, so the layout does not shift when the image loads.

05On narrow screens you want a closer crop of the photo, not just a smaller copy. What do you use?

srcset offers sizes of the same picture and lets the browser choose. <picture> with source media lets you choose a different picture; the first matching source wins.

المصطلحات الأساسية

المسرد

Responsive image: An image that serves a suitable file to each screen, so small screens do not download pixels they cannot show.
CSS pixel: The unit page layout and media queries are measured in. It is not the same as one dot on the screen.
devicePixelRatio: How many device pixels (dots of light) fit across one CSS pixel on this screen, such as 1, 2 or 3.
srcset: An img attribute listing the same picture in several files, each with a descriptor such as 800w.
Width descriptor: The w after a file in srcset: 800w means the file is 800 pixels wide.
sizes: An img attribute that says how wide the image will be drawn, with optional media conditions. The first true condition wins.
Slot: How wide the image is drawn, in CSS pixels, worked out from sizes. The browser multiplies it by devicePixelRatio to know how many pixels it needs.
<picture>: An element that wraps an img and one or more source elements, to swap in a different picture (art direction) or format.

تفاصيل إضافية

الملاحظات والمصادر

The HTML standard leaves the final choice to the browser. It may take a smaller file on a slow connection, or reuse a larger one it already has. Browsers aim for the smallest file with enough pixels, as in the figure.
sizes is a promise about your CSS. Here the page's CSS would draw the image across the whole screen on narrow viewports and in a half-width column on wider ones, with height: auto keeping its 4:3 shape.
For an image that is always drawn at one size, such as a logo, srcset can use density descriptors instead, with no sizes: srcset="logo.png 1x, logo-2x.png 2x".
The two screens are round, made-up examples. To see your own screen's numbers, open the browser console and type innerWidth (CSS pixels across the viewport) or devicePixelRatio.

اختبار يتاح بعد الخطوة الأخيرة.