WEBVTT

00:00:00.000 --> 00:00:06.000
Does a phone need your biggest photo?

00:00:06.000 --> 00:00:13.000
Responsive images give the browser better choices.

00:00:13.000 --> 00:00:18.000
Fit the image to the visit.
6 responsive-image basics.

00:00:18.000 --> 00:00:30.000
Offer more than one size
Provide suitable versions of the same picture.
Small version · Medium version · Large version

00:00:30.000 --> 00:00:42.000
Let the browser choose
Screen size and pixel density affect the best source.
Available space · Screen density · Browser choice

00:00:42.000 --> 00:00:54.000
Describe the layout accurately
Your developer can set srcset and sizes in the markup.
Image candidates · Display width · Accurate settings

00:00:54.000 --> 00:01:06.000
Check the mobile crop
A different crop can keep the important subject visible.
Visible subject · Useful framing · Mobile preview

00:01:06.000 --> 00:01:18.000
Keep space for the image
Set dimensions so the layout can reserve its place.
Image width · Image height · Stable layout

00:01:18.000 --> 00:01:30.000
Test several screen widths
Look for blurred images, tiny details and wasted downloads.
Phone view · Tablet view · Desktop view

00:01:30.000 --> 00:01:39.000
Your checklist
Offer more than one size · Let the browser choose · Describe the layout accurately · Check the mobile crop · Keep space for the image · Test several screen widths

00:01:39.000 --> 00:01:47.000
Keep the subject clear on every screen.
jerseyweb.je