Image Formats
Coming soon: Understanding when to use each image format.
Raster Formats
- JPEG - Lossy compression for photographs
- PNG - Lossless with alpha transparency
- GIF - Limited colors, simple animations
- WebP - Modern format, superior compression
- AVIF - Next-gen format, best compression
Vector Formats
- SVG basics and syntax
- Inline SVG vs external files
- SVG optimization
- Styling SVG with CSS
- SVG animations
Responsive Images
Coming soon: Serve the right image for every device.
- The srcset attribute
- The sizes attribute
- Resolution switching
- Art direction with picture element
- Source selection and format fallbacks
- Device pixel ratio (DPR)
Optimization
Coming soon: Make images load faster.
- Compression techniques
- Image dimensions and sizing
- Lazy loading with loading="lazy"
- Eager loading for critical images
- Image CDNs and on-the-fly optimization
- Progressive JPEG
- Tools: ImageOptim, Squoosh, Sharp
Accessibility
Coming soon: Make images accessible to everyone.
- Alt text best practices
- Decorative vs informative images
- Complex images and long descriptions
- Color contrast in images
- Images of text (avoid them)