HTML: Images and Figures

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.

Introduction

• Welcome
• What you should know
• Setting up your computer

1. Image Essentials

• Using the img element and src attribute
• Accessibility: alt and title attributes
• Image size: Width and height
• Obtaining images

2. Image Formats

• Image format overview
• GIF and PNG: The format for line art
• JPEG: The format for photos
• SVG: The format for vector line art

3. Images and CSS

• Borders, padding, and spacing
• Alignment
• Challenge: Images and text
• Solution: Images and text
• Special effects
• Background images

4. Responsive 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

5. Figures

• Using figure and figcaption elements
• Autonumbering figures with CSS

Conclusion

• Next steps