Visual Assets
Asset Types
Icons
- SVG: Scalable, small file size, CSS styling
- Icon fonts: Easy to use, limited styling
- PNG sprites: Legacy, larger files
Images
- JPEG: Photos, complex images
- PNG: Transparency, screenshots
- WebP: Modern, smaller files
- AVIF: Newest, best compression
Graphics
- SVG: Illustrations, logos, charts
- Lottie: Animations, complex motion
Optimization
Image Compression
# WebP conversion
cwebp -q 80 input.png -o output.webp
# AVIF conversion
avifenc input.png output.avif
# PNG optimization
pngquant --quality=65-80 input.png
Responsive Images
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw">
</picture>
SVG Optimization
# SVGO optimization
svgo input.svg -o output.svg
Icon Guidelines
- Consistent stroke width
- Consistent sizing (24x24, 20x20)
- Optical alignment
- Clear at small sizes
File Organization
assets/
├── icons/
│ ├── ui/
│ └── brand/
├── images/
│ ├── originals/
│ └── optimized/
└── illustrations/
Performance Tips
- Lazy load below-fold images
- Use appropriate format for content
- Serve responsive sizes
- Consider CDN delivery
- Set cache headers
