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