# Install globally
npm install -g @adynato/img4web

# Or use npx
npx @adynato/img4web <input> [options]

# Basic optimization
npx @adynato/img4web ./src/images

# With specific output formats
npx @adynato/img4web ./image.png --formats webp,avif

# Generate responsive sizes
npx @adynato/img4web ./hero.jpg --sizes 640,1024,1920

# Watch mode during development
npx @adynato/img4web ./src/images --watch

// Next.js
import Image from 'next/image'

<Image
  src="/images/hero.webp"
  alt="Descriptive alt text"
  width={1920}
  height={1080}
  priority // for above-fold images
  placeholder="blur"
  blurDataURL={blurDataUrl}
/>

<!-- Plain HTML with picture element -->
<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="Descriptive alt text" loading="lazy">
</picture>

public/
├── images/
│   ├── blog/
│   │   └── [post-slug]/
│   │       ├── cover.webp
│   │       ├── cover.avif
│   │       └── *.webp
│   ├── og/
│   │   └── [page-slug].png
│   ├── icons/
│   │   └── *.svg
│   └── hero/
│       └── *.webp
├── fonts/
│   └── *.woff2
└── videos/
    └── *.mp4

// components/Button.tsx
import { type ReactNode } from 'react'

interface ButtonProps {
  children: ReactNode
  variant?: 'primary' | 'secondary'
  onClick?: () => void
}

export function Button({ children, variant = 'primary', onClick }: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {children}
    </button>
  )
}

// Good
export function Button() { ... }
export function Input() { ... }

// Avoid
export default function Button() { ... }

// Use consistent ordering: layout, spacing, sizing, typography, colors, effects
<div className="flex items-center gap-4 p-4 w-full text-sm text-gray-700 bg-white rounded-lg shadow-md">

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">