Use pictures that prove the work

Transcript

A picture should teach or prove. If it does neither, it is weight.

Photos work as JPEG or WebP. Logos stay sharp as SVG or PNG.

Export near the size you display. Compress after that.

Alt text describes the information. Decorative pictures get an empty alt.

Do not put the headline inside the picture. Keep it as real text, as on these homepages.

A picture should teach or prove. If it does neither, it is weight.

Photos work as JPEG or WebP. Logos stay sharp as SVG or PNG.

Export near the size you display. Compress after that.

Alt text describes the information. Decorative pictures get an empty alt.

Do not put the headline inside the picture. Keep it as real text, as on these homepages.

Try this. Write alt text for three photos. Mark any you cannot describe.

• Three alt lines are written.
• Photos are not camera originals.
• The headline is real text.

Quick check

Pick one answer. You get the explanation right away.

Useful alt text:

Describes what is in the pictureYes. Say what a person would miss if they could not see it.Says imageNo. Look at the screen again and pick the choice that matches what you see.Repeats keywordsNo. Look at the screen again and pick the choice that matches what you see.

A logo should be:

SVG or a clean PNGYes. Flat marks need sharp edges.A blurry screenshotNo. Look at the screen again and pick the choice that matches what you see.A JPEG of a photo of the signNo. Look at the screen again and pick the choice that matches what you see.

Images below the first screen can:

Wait, with lazy loadingYes. Let the first screen arrive first.All be full camera filesNo. Look at the screen again and pick the choice that matches what you see.Replace the headingNo. Look at the screen again and pick the choice that matches what you see.

Mark lesson complete