Overview
-
Explore the many ways to present graphics on web pages. Discover how to make your graphics accessible, reliably placed, and a smooth fit for a variety of different screens.
Syllabus
-
Introduction
- Welcome
- What you should know
- Setting up your computer
- Using the img element and src attribute
- Accessibility: alt and title attributes
- Image size: Width and height
- Obtaining images
- Image format overview
- GIF and PNG: The format for line art
- JPEG: The format for photos
- SVG: The format for vector line art
- Borders, padding, and spacing
- Alignment
- Challenge: Images and text
- Solution: Images and text
- Special effects
- Background images
- Resolution and pixel density
- Handling pixel density
- Using srcset and sizes
- Testing screen resolutions
- Challenge: Use srcset
- Solution: Use srcset
- Art direction: The picture element
- Using figure and figcaption elements
- Autonumbering figures with CSS
- Next steps
