Responsive Images and Art Direction
summary
Slides give concrete takeaways: images make up 61% of average 3MB pages, use formats like WebP for ~20% size savings, and plan breakpoints then create an image every 20% width to avoid over‑serving. Shows actual HTML attributes (srcset, sizes, picture), notes poor IE picture support, explains progressive loading and density handling, and demos CMS work: Drupal responsive image module plus editor options focal point versus crop for art direction and automation of generated image styles.
AI-written summary · about
chapters (13)
- 0:00Start
- 1:08PAGE WEIGHT
- 2:50FILE FORMATS
- 8:51sizes CSS MEDIA QUERIES
- 9:56SCALED IMAGES
- 12:41BROWSER SUPPORT PICTUREFILL
- 12:55PROCESS
- 17:49IMAGE STYLES
- 20:38MODULES
- 21:15BREAK POINTS
- 25:46IMAGE WIDGET CROP
- 30:34BROWSER BEHAVIOR
- 32:15PERCEIVED PERFORMANCE
